[230528] 사이드 프로젝트 작업

1. 사이드 프로젝트 소개 티켓 완료

• 오늘도 카페가서 사이드프로젝트 작업을 했다. 티켓 하나 끝 !

  
  

2. swiper 라이브러리 사용

• 슬라이더를 만들어야하는데 swiper 라이브러리를 사용했다.

라이선스 확인

자주쓰는 옵션 정리

1. direction: 슬라이드 방향을 설정합니다. “horizontal” (기본값) 또는 “vertical”로 설정할 수 있습니다.

2. loop: 슬라이드를 무한 루프로 반복하는지 여부를 설정합니다. 기본값은 false입니다.

3. autoplay: 자동으로 슬라이드가 전환되는지 여부를 설정합니다. 객체로 옵션을 지정할 수 있으며, delay (슬라이드 간의 딜레이 시간), disableOnInteraction (사용자 상호작용 시 자동 재생 중지 여부) 등을 설정할 수 있습니다.

4. pagination: 페이징 기능을 활성화합니다. 객체로 옵션을 지정할 수 있으며, el (페이징 요소의 선택자), clickable (페이징 요소를 클릭 가능하게 할지 여부) 등을 설정할 수 있습니다.

5. navigation: 이전/다음 버튼을 활성화합니다. 객체로 옵션을 지정할 수 있으며, nextEl (다음 버튼 요소의 선택자), prevEl (이전 버튼 요소의 선택자) 등을 설정할 수 있습니다.

6. breakpoints: 반응형 레이아웃을 위한 미디어 쿼리 기반의 옵션을 설정합니다. 객체로 옵션을 지정하며, 특정 뷰포트 크기에 따라 슬라이드의 개수, 슬라이드 간격 등을 조정할 수 있습니다.

7. effect: 슬라이드 전환 효과를 설정합니다. “slide” (기본값), “fade”, “cube”, “coverflow”, “flip” 등 다양한 효과가 제공됩니다.

8. keyboard: 키보드로 슬라이드를 제어할 수 있게 합니다. 기본값은 false입니다.

9. on: 다양한 이벤트 콜백 함수를 등록할 수 있습니다. 예를 들어, onInit, onSlideChange, onTransitionEnd 등을 활용하여 슬라이드 전환 시 추가 작업을 수행할 수 있습니다.

리액트 적용

• swiper 사이트에 react 로 예시가 잘 나와있어서 쉽게 적용 가능했다.
• swiper 공식 문서 링크
• 아래는 내가 사용한 디자인에 대한 예시이다.
• 간략하게 말하면 swiper안에 swiperslide 들을 넣어주면 된다. swiper 옵션에 따라 다양한 방식으로 그릴 수 있다.
• swiperslide에 컴포넌트를 넣어서 그려주었다.

import SwiperCore, { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import styled from "styled-components";

SwiperCore.use([Pagination]);

const HorizontalSwiper = styled(Swiper)`
  /* 스와이퍼에 대한 스타일 작성 */
`;

const Slide = styled(SwiperSlide)`
  /* 슬라이드에 대한 스타일 작성 */
`;

const MyComponent = () => {
  return (
    <HorizontalSwiper
    /* ~~ */
    >
      <Slide>Slide 1</Slide>
      <Slide>Slide 2</Slide>
      <Slide>Slide 3</Slide>
      {/* 추가적인 슬라이드 */}
    </HorizontalSwiper>
  );
};

export default MyComponent;