Log 8/9

Dev log

오늘은 컴포넌트 틀을 잡는 CSS 구성과 Tips 컴포넌트를 구성하는 작업을 했다. Tips 컴포넌트를 구성하면서 사용하고자 했던 것은 스와이프였다. 여러정보를 옆으로 넘기면서 볼 수 있는 기능을 구현해야 했다. 생각보다 정말 어려웠다. next.js에 적용시키려다보니 정보가 적었다. Swiper 프레임워크가 있어서 이것을 공부해서 적용시키면 되겠다고 생각했다. 그나마 공식문서의 React 적용하기 편이 있어서 그 부분을 참고로 해서 조금씩 익혀나갔다. Next.js를 사용하고 Scss를 사용하다보니 일반 방법은 사용할 수 없었다.

error - ./node_modules/swiper/components/navigation/navigation.scss
Global CSS cannot be imported from files other than your Custom <App>. 
Please move all global CSS imports to pages/_app.js. Or convert 
the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: components/Tips.js

sass를 사용하고 있었기 때문에 scss로 적용해야 하는데 Swiper를 적용하려는 컴포넌트에서 SCSS 파일을 import를 하니 위와 같은 에러를 만났다. 이 부분만 css로 설정해볼까 바꿔보는 시도도 해보다가 module.scss로 적용되지 않은 글로벌한 설정은 _app.js 에 적용해야 하는 것 같아서 scss 파일을 _app.js 파일 위에 import 하니 적용되면서 에러가 사라졌다. 그렇게 swiper가 적용된 모습을 볼 수 있었다.

import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';

위 부분이 scss 파일들이다. app.js 에 넣은 파일들이다.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper';

이 부분은 구현할 tips 컴포넌트에 import 하는 부분이다.

SwiperCore.use([Navigation, Pagination]);

이 부분으로 우선 함수를 호출하고 나서 사용하는 것 같았다.

그리고 만들 부분을 Swiper 컴포넌트로 SwiperSlide 컴포넌트를 감싸서 swiperslide에 있는 여러 정보들이 스와이프 되는 것 같았다. 그래도 구현이 되는 것 같아서 정말 다행이었다. map으로 정보를 배열의 개수만큼 스와이프를 만들때 map으로 어디를 감싸서 구현해야하는지 잘 구분해야했다. 정리를 하고 나니 잘 구현되었다.

그나마 오늘이 제일 집중이 잘 되었던 것 같다. 집중이라기보다 바둥바둥 거리면서 붙들고 했던 것 같다. 뭐라도 해야했고 정말 도움이 되고 싶었다. 내일도 힘내서 잘 해봐야겠다. 오랜만에 오랜 집중 끝에 해낸 것 같아서 기분이 좋다.