멘토님께서 swiper라는 라이브러리를 사용해보라고 추천해주셔서 공식문서를 찾아 구현을 해보았다. 뭔가 라이브러리를 사용하면 편하게(?) 원리도 모르면서 가져다가 쓰는 느낌이라할까....ㅋㅋ 괜히 찔리는걸까. 현업에서는 아닌가보다🤔 생각보다 쉽지는 않아서 가져다 쓰는데 시행착오를 많이 겪었다. 프로젝트를 진행하면서 팀원의 코드도 많이 보고 서로 의견 공유를 많이 하고 있어서 새롭게 알게되는 것들이 많은 것 같다. 기억보다는 기록을 믿으니까....! 잘 정리해야겠다.
✅ 1. Swiper 라이브러리 사용
먼저 npm install swiper로 라이브러리 설치를 한다.
그리고 작성하는 파일에서 아래와 같이 import를 했는데 모듈 에러가 발생했다.
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';원인을 찾다보니 스택오버플로우에서 같은 케이스를 찾게 되었는데 버전을 변경해서 하면 된다는 답변을 발견하였다. npm install swiper@6.8.4를 설치해주고 아래와 같이 import를 변경해서 적용하니 문제없이 작동하였다.
import 'swiper/swiper.min.css';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';확실히 라이브러리를 가져와서 사용하다보니 간편하게 효과를 줄 수 있어 편리했다.
코드도 함께 안내되어 있어, 작성 된 코드를 참고하여 프로젝트에 맞게 변경하여 사용하면 되니까 잘 사용한다면 짧은 시간에 효율적으로 구현할 수 있을 것 같다.
<Swiper
slidesPerView={4} // 한 슬라이드에 보여줄 갯수
spaceBetween={30} // 슬라이드 사이 여백
slidesPerGroup={4} // 슬라이드를 넘길 때 이동 갯수
loop={true} // 슬라이드 반복 여부
loopFillGroupWithBlank={true} // 그룹수가 맞지 않을 경우 빈칸으로 채우기
pagination={{
clickable: true,
}}
navigation={true}
breakpoints={{ // 반응형
500: {
slidesPerView: 1,
},
550: {
slidesPerView: 2,
},
}}
modules={[Pagination, Navigation]}
className="mySwiper"
>반응형을 주고싶다면 breakpoints를 사용하여 주면 된다.
또한 map을 돌려서 구현하는 경우 반복되어 나오는 값은 SwiperSlide 안에 위치시켜주어야 한다. ⭐️ 위치 중요!! ⭐️
{Dummybooks.map((book) => (
<SwiperSlide key={book.id}>
<img src={book.imgURL}></img>
<div>{book.name}</div>
</SwiperSlide>🔥 작동은 하는데 뭔가 부드럽지못하다...? 랜덤으로 작동한다?
➡️ SwiperCore import 해보시는 걸 추천드립니다.
import SwiperCore, { Navigation, Autoplay } from 'swiper';
SwiperCore.use([Autoplay, Navigation]);
✅ 2. Z-index
swiper로 구현을 완료하고나니, 네브바 보다 위로 올라가 네브바가 가려지는 현상이 발생했다. 이 부분을 해결하는 방법을 찾다가 듣기만 많이 해보고.. 사용은 못한 Z-index를 사용하였다. 최상위에 보이는 작업이 필요한 경우에 사용하면 된다고 한다.
즉, 최상위로 올리기 위해서는 css에 z-index를 가장 높게 설정하면 된다.
네브바에 z-index를 부여하여 최상위에 올려 해결하였다.
✅ 3. Recoil
이번 프로젝트에서는 상태 관리 라이브러리로 Recoil을 사용하고 있는데 아직 감이 잘 안 잡히는 것 같다... 응용해서 적절하게 사용하는게 참 어려운 것 같다.
전역 상태 관리를 해줘야 하는 것들은 아톰을 생성하였고 다른 곳에서 아톰을 가져다가 사용하였다.
간단하게 정리해본다.
- useRecoilState : useState와 거의 비슷하다고 생각하면 될 것 같다. 상태를 저장해준다. 아톰의 상태를 설정할 수 있고, 변경시킬 수도 있다.
📌 useState의 경우 const [fixedKeyword] = useState(keyword); 이런식으로 set을 작성하지 않아도 작동하지만 useRecoilState는 반드시!! set과 함께 작성해주어야 한다.
const [keyword, setKeyword] = useRecoilState(bookSearchKeywordState);
- useRecoilValue : 아톰을 조회할 때만 사용한다. 변하지 않는 값을 저장할 때 저장소 같은 느낌으로 사용하는 것 같다.
프로젝트를 하면 할 수록 부족한 점이 많이 보이는 것 같다.
알아야 할 것도 많고 수정해야 할 부분도 많고 해야할 것도 많고 ㅋㅋ 벅차지만, 어제의 나 보다는 더 많은 것을 알고 있으니까 발전하고 있다고 생각하고 나아가야겠다. 잠시 벅차서 헐떡이다가도 팀원들이랑 같이 으쌰으쌰 하면서 하다보면 또 즐겁게 하고있는 나를 발견한다.
이제 일주일 정도 남았는데 이 텐션 유지해서 끝까지 가보자!
