css module 사용

[kingyong9169]

현재 문제점

1. 스타일 작성이 필요할 때, 해당 컴포넌트와 스타일 파일이 너무 멀리 떨어져 있어 DX 오염.
2. classname이 겹칠 때, 영향을 줄 수 있음.
3. 한 파일에 스타일을 몰아서 쓰면 스타일 파일이 길어짐. 그렇다고 파일을 쪼개면 classname이 겹칠 수 있음.
4. 스타일도 관심사 분리가 필요하다는 의견입니다.

모듈로 바꿨을 때, 예상되는 문제점

1. 클래스명이 겹치게 되면 디버깅할 때, 어떤 클래스인지 알기 쉽지 않을수도 있음.
2. 컴포넌트에 style dependency가 생김.

@1ilsang @ooooorobo @anyl92 의견 부탁드립니다~

[1ilsang]

전통적인 CSS 방식을 사용하면, 분업이 용이하다는 장점이 있습니다. 마크업 개발자(퍼블리셔)가 따로 있다면, CSS-in-JS 방식은 불편할 수 있습니다. 마크업 개발자는 주로 페이지 단위로 작업하는 데 반해, 프론트엔드 개발자는 컴포넌트 단위로 작업합니다. 프론트엔드 개발자는 마크업 개발자가 작성한 HTML과 CSS를 받아 컴포넌트 단위로 재구성해야 합니다. CSS-in-JS 방식을 사용한다면, 이미 만들어 놓은 코드를 재배치해야 하기 때문에 효율이 떨어집니다. 유지보수에도 계속 영향을 끼칠 수밖에 없습니다. 물론 퍼블리셔에게 컴포넌트 단위의 작업을 요구할 수 있지만, 이 또한 커뮤니케이션 비용의 낭비로 이어집니다.

• 우리는 class명 겹치는 문제 vs 나중에 디버깅할때 클래스명 그대로 못본다는 문제 이거 둘중에 뭐가 가치있는지 생각해보면 될듯?

물론, CSS Module 역시 CSS 코드가 JS 번들에 포함되어 있습니다

• 현재는 웹팩에서 style-loader 쓰고있어서 무조건 js 번들에 포함됨

• https://fe-developers.kakaoent.com/2022/220210-css-in-kakaowebtoon/

• https://stackoverflow.com/questions/60735091/whats-the-main-diffrence-style-scss-vs-style-module-scss

만약 모듈방식으로 하면 컴포넌트 내부에 scss를 넣는것도 좋을듯? 번들 크기 줄이기 미디엄 글처럼하면 lazy 잘 쓸수있을듯?

[kingyong9169]

혹시 궁금한게 CSS Module이 아니라 CSS로만 쓰면 JS번들에 포함이 안될까요? 그렇다면 되게 신기하네요

[kingyong9169]

모듈 방식으로 하면

Title
|-- index.tsx
|-- style.module.scss

요렇게 쓰면 좋을 것 같습니다!

[1ilsang]

혹시 궁금한게 CSS Module이 아니라 CSS로만 쓰면 JS번들에 포함이 안될까요? 그렇다면 되게 신기하네요

ㄴㄴ 우리는 스타일로더 쓰고있어서 웹팩에서 이미 js에 같이 포함되어있어 yarn build후에 dist 폴더 확인해보면 될듯.

CSS 모듈 / CSS의 차이가 아니라 번들방식의 차이라고 이해하는게 더 나을거같아