[43] css-modules 적용

dev-allenk commented 4 years ago

branch name

css 클래스명이 중복되어 의도치 않게 overriding 되는 것을 방지하기 위해 css-modules를 적용합니다.
[x] webpack의 css-loader 옵션에서 css-modules를 사용하도록 설정합니다.
- css 클래스명으로 컴포넌트 구조를 알 수 있도록 설정합니다.(참고링크)
[x] import {파일명}.scss 와 같이 사용하던 구문을 import styles from {파일명}.scss와 같이 수정합니다.
[x] css클래스명을 js에서 쉽게 사용하기 위해 className 라이브러리를 사용합니다.

leehwarang commented 4 years ago

관련해서 웹팩의 MiniCssExtractPlugin 라는 것도 사용해보면 좋을 것 같아요! css를 원래 bundle.js 파일에 포함시키는데, bundle.js 파일의 크기가 커지기 때문에 css 를 따로 분리해주는 플러그인이라고 하더라고요~!

dev-allenk commented 4 years ago

오호!💡 좋은 정보 고마워요🙇 이 이슈는 제가 가져갑니다 ㅋㅋ

dev-allenk commented 4 years ago

dev-allenk commented 4 years ago

css 클래스명은 링크를 참고해서 카멜케이스로 수정할게요!

classnames 라이브러리를 쓰면 카멜케이스를 사용할 필요가 없네요😅