2023.03.27 swiper

이무헌·2023년 7월 19일

html,css,js

목록 보기

16/21

1.구조분해 할당

기본적인 배열

//ES5 문법에서
// 배열의 값을 호출해서 변수에 담거나 사용할 때

let one;
let two;

let arr = [1, 2, 3, 4, 5];
one = arr[1];
two = arr[3];
console.log(one, two); //2,4

기본적인 배열이다.

구조분해 할당(배열)

// ES6에서 도입
// 구조분해 할당

//변수를 선언하고 배열의 arr2의 값을 구조분해 할당해서
//순서대로 할당 시킨다.
// 배열의 구조 분해 할당
let arr2 = [1, 2, 3, 4];
let [one1, two1, three1, four1] = arr2;
console.log(one1, two1, three1, four1);//1,2,3,4
// 값이 순서대로 할당된다.
let [a, b] = [1, 2];
console.log(a, b);

// 할당되는 값이 없으면 undefined
let [c, d] = [1];
console.log(c, d);

구조 분해 할당은 배열에서 인덱스 순서에 따라 변수에 값을 할당하는 문법이다.
할당되는 값이 없다면 undefined가 된다.

오브젝트에서 구조분해 할당

let name1 = { firstName: "lee", lastName: "mu" };
// es6 객체의 각 키를 뽑아서 변수에 할당.
// obj는 순서가 아니다.

// key를 기준으로 구조분해 할당이 이루어진다.
// 순서가 아니고,
let { lastName, firstName } = name1;
console.log(firstName, lastName); // 'lee' , 'mu'
let name4 = ({ firstName = "lee", lastName } = { lastName: "kim" });
console.log(firstName, lastName);//'lee','kim'

해당 변수가 object구조면 {}를 이용해 미리 변수를 선언해서 편리하게 사용할 수 있다.

이는 이미 js내장 함수도 사용할 수 있다. 대표적으로 length가 있다.

//문자열을 담은 변수에서 구조분해할당
let str = "asdfgh";
// 문자열 길이구하는 length
// 구조분해 할당으로 변수에 할당
let { length } = str;
console.log(length);//6

활용 예는 특정 오브젝트에서 원하는 값만을 따로 저장할 때 쓸 수 있다.

//작업할 때 객체화 시켜서
// 작업을 하다가 객체안에 필요한 값만 호출해서 구조분해 할당해서 사용할 수 있다.

let list = [
  { id: 1, content: "ㅎㅎ못가", isActive: true },
  { id: 2, content: "ㅎㅎ못가", isActive: true },
  { id: 3, content: "ㅎㅎ못가", isActive: true },
];
// id값만 뽑아오자

let { id } = list;
// list객체에서 id키 값만 구조분해할당으로 할당 해줄수있다.
list.forEach((i) => {
  let { id, content } = i;
  console.log(id); //1,2,3
});

spread operator

// 스프레드 연산자
// 스프레드 연산자 많이 사용한다.
// 스프레드 연산자 구문 ...
// 스프레드 연산자는 본 객체를 변경하지않고
// 새로운 객체를 만들어준다.
let temp = [1, 2, 3];
let temp2 = [4, 5, 6, 7];
let temp3 = [...temp, ...temp2];
console.log(temp3); //[1,2,3,4,5,6,7]

대괄호,중괄호를 벗기는 역할을 한다. 얕은복사,깊은 복사에서 리액트 때 많이 썼던 기억이 난다.

let obj = {
  a: 1,
  b: 2,
};

let obj2 = {
  a: 1,
  b: 3,
  c: 1,
};

let obj4 = {
  a: 3,
  b: 4,
  c: 4,
};

let obj3 = {
  ...obj,
  ...obj2,
  ...obj4,
};

// 마지막으로 키값이 동일할 경우 마지막 값으로 할당된다.
console.log(obj3);

마찬가지로 object형식도 spreadoperator를 쓸 수 있다.

2.swiper

1.html

<body>
    <!-- swiper 라이브러리를 사용하면 빠르고 편하긴한데
        수정이 어렵다. -->
    <div class="swiper-wrap">
      <div class="swiper">
        <ul class="swiper-content">
          <li class="swiper-first-item">4</li>
          <li class="swiper-item">1</li>
          <li class="swiper-item">2</li>
          <li class="swiper-item">3</li>
          <li class="swiper-item">4</li>
          <li class="swiper-last-item">1</li>
        </ul>
      </div>
      <span class="prev">이전</span>
      <span class="next">다음</span>
    </div>
  </body>

2.css

.swiper-wrap {
        width: 500px;
        height: max-content;

        position: relative;
        margin: auto;
      }
      .swiper {
        width: 500px;
        height: 500px;
        position: relative;
        margin: auto;

        overflow: hidden;
      }
      .swiper-content {
        width: max-content;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        display: flex;
        list-style: none;
        transition: 1s;
      }

      .swiper-item {
        width: 500px;
        height: 100%;

        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 이벤트 제거 */
        pointer-events: none;
      }
      .swiper-first-item {
        width: 500px;
        height: 100%;

        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 이벤트 제거 */
        pointer-events: none;
      }
      .swiper-last-item {
        width: 500px;
        height: 100%;

        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 이벤트 제거 */
        pointer-events: none;
      }
      .prev,
      .next {
        z-index: 1;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
      }
      .prev {
        left: 5x;
      }
      .next {
        right: 5px;
      }

3.js

// 클릭의 시작 위치를 가지고 있고
// 끝나면 끝난 좌표와 비굑를 해서
// 오른쪽을 스와이프 된건지
// 왼쪽으로 스와이프 된건지 부터 확인을 하고
// 인덱스를 기준으로 움직임을 제어해보자.

// 마우스 시작 클릭 지점 x좌표
let _start;
// 진행중인 인덱스
let _index = 2;

let _swiper = document.querySelector(".swiper");
let _swiperContent = document.querySelector(".swiper-content");
let swiperItem = document.querySelectorAll(".swiper-item");
let firstIndex = document.querySelector(".swiper-first-item");
let lastIndex = document.querySelector(".swiper-last-item");

let { length } = document.querySelectorAll(".swiper-item");
let _prev = document.querySelector(".prev");
let _next = document.querySelector(".next");
firstIndex.style.display = "";

lastIndex.style.display = "none";

// getComputedStyle 적용된 스타일의 값을 가져올 수 있다.
// 적용된 스타일 가져올 태그를 매개변수로 전달
let _swiperWidth = parseInt(getComputedStyle(_swiper).width);
_swiper.addEventListener("mousedown", (e) => {
  // console.log('클릭 시작');
  // 클릭했을 때 x좌표
  // 클릭한 x의 좌표
  // e.clientX;
  _swiperContent.style.transition = "1s";

  _start = e.clientX;
});

_swiper.addEventListener("mouseup", (e) => {
  if (e.clientX < _start - 50) {
    _index++;
    swiperMove();
  } else if (e.clientX > _start + 50) {
    _index--;
    swiperMove();
  }
});

// 인덱스를 기준으로 움직임
function swiperMove() {
  _swiperContent.style.left = -((_index - 1) * _swiperWidth) + "px";
}

_prev.addEventListener("click", () => {
  console.log(_index);

  _index--;
  swiperMove();
  _swiperContent.style.transition = "1s";
});

_next.addEventListener("click", () => {
  console.log(_index);
  _index++;
  swiperMove();
  _swiperContent.style.transition = "1s";
});

// 메모
_swiperContent.addEventListener("transitionend", () => {
  if (_index === length + 1) {
    lastIndex.style.display = "";
  } else if (_index === length + 2) {
    _index = 2;
    _swiperContent.style.transition = "0s";
    _swiperContent.style.left = "-500px";
  } else if (_index === 1) {
    _index = length + 1;
    _swiperContent.style.transition = "0s";
    _swiperContent.style.left = -(4 * _swiperWidth) + "px";
  }
});

_swiperContent.style.left = -(1 * _swiperWidth) + "px";

💡 기본적으로 이 코드가 작동하는 방식은 다음과 같다. 1.swiper 클래스에 overflow를 hidden을 준다. 2.swiper-content 에display: flex;와 position: absolute; 을 줌으로서 위치를 고정시키고 자식 컨텐츠를 일렬로 늘인다. 3.swiper-item 에선 부모와 똑같은 크기를 자식 하나하나에 부여하고 일부로 옆으로 넘치게한다. 이렇게 되면 부모 밖으로 나가는건 hidden으로 보이지 않고, 하나의 요소(부모와 크기가 같으므로)만 보이게 된다. 4. 그 후 left로 500px단위로 움직여 보여지게 만든다.

스크린샷 2023-03-27 오후 5.29.09.png

→swiper는 부모임에도 500px로 고정되어 있다.

스크린샷 2023-03-27 오후 5.29.51.png

→반대로 그 자식은 일부러 500px단위로 가로로 넘치게 설정해놨다.

스크린샷 2023-03-27 오후 5.29.59.png

→하나하나의 아이템은 500px로 부모와 똑같이 준다. 이제 swiper-content의 left를 움직여 이 아이템을 swiper안에 들어오게 하면 된다!

마우스를 클릭했을때(누를 때)함수
```
_swiper.addEventListener("mousedown", (e) => {
  // console.log('클릭 시작');
  // 클릭했을 때 x좌표
  // 클릭한 x의 좌표
  // e.clientX;
  _swiperContent.style.transition = "1s";

  _start = e.clientX;
});
```
- _swiper를 눌렀을 때 _start변수에 x좌표를 할당한다.
- 그 후 뗐을 때 차이값을 이용하여 왼쪽으로 슬라이딩할지,오른쪽으로 슬라이딩할지 결정한다.
- _swiperContent.style.transition 는 추후에 있을 _swiperContent.style.transition = "0s"를 되돌리는 역할을 한다.
마우스를 뗐을때 함수
```
_swiper.addEventListener("mouseup", (e) => {
  if (e.clientX < _start - 50) {
    _index++;
    swiperMove();
  } else if (e.clientX > _start + 50) {
    _index--;
    swiperMove();
  }
});
```
- 만약 처음 x좌표와 뗐을 때의 x좌표의 차이가 음수라는 것은 왼쪽으로 이동하는 것이다. _index를 깎자.
- 반대로 양수라는 것은 오른쪽으로 이동한다는 것이다._index를 증가시키자

swiper content를 움직이는 함수

// 인덱스를 기준으로 움직임
function swiperMove() {
  _swiperContent.style.left = -((_index - 1) * _swiperWidth) + "px";
}

_index에 비례하여 _swiperContent를 움직여준다.

왼쪽,오른쪽 버튼

_prev.addEventListener("click", () => {
  console.log(_index);

  _index--;
  swiperMove();
  _swiperContent.style.transition = "1s";
});

_next.addEventListener("click", () => {
  console.log(_index);
  _index++;
  swiperMove();
  _swiperContent.style.transition = "1s";
});

앞에 있는 마우스 이벤트랑 별 차이가 없다.
다만, 마우스를 누를 때 발생하는 _swiperContent.style.transition = "1s" 로직은 발동이 안되므로 따로 추가한다.

무한루프를 가능하게 하는 함수

이무헌

개발당시에 직면한 이슈를 정리하는 곳

이전 포스트

2023.03.24 popupCookie로 쿠키만들기 및 만료시간 설정

다음 포스트