강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

지성님의 프로필 이미지
지성

작성한 질문수

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[04-03] CSS-Module

emotion대신 tailwind를 사용하는 이유가 뭔가요?

해결된 질문

작성

·

174

·

수정됨

0

이전 버젼의 강의에서는 emotion을 쓰고

본 강의에서는 tailwind를 쓰는데

 

저는 emotion이 가독성도 좋고 사용하기 편안하다는 느낌을 받았는데요

새로 생긴 강의에서는 tailwind를 사용하는 이유가 뭘까요?

답변 1

1

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 지성님!


react17 => react18버전으로 올라오면서, "서버컴포넌트"란 개념이 생겼어요!
이 과정에서 폴더구조 셋팅 방식에 변경이 생겼는데요!
* 1) 앱라우터 방식: 신규 서버컴포넌트기반 방식(app 폴더)
* 2) 페이지라우터 방식: 기존방식(pages 폴더)

문제는, 이 앱라우터방식(서버컴포넌트방식)에서 CSS-IN-JS(emotion, styled-components 등)의 호환이 어려운 문제가 있어요!
따라서, 그나마 가장 CSS-IN-JS와 비슷한 방식으로 사용하는 CSS-Module (nextjs 기본 지원)을 채택하게 되었구요!
이미 많은 회사에서 동일한 방식으로 사용중에 있답니다!


추가로, 이를 글로벌하게 공통적으로 처리하는 경우에 tailwind를 사용하고 있답니다!
(다시말해, tailwind를 메인으로 사용하고 있지 않아요!)


마지막으로, 모든 회사가 최신 앱라우터방식을 사용하는데에는 사실상 어려움이 있어요.
특히나, 규모가 있는 회사들은 마이크로프론트엔드(MFE) 등의 기술을 사용하게 되는데, 이 역시 마찬가지로 앱라우터방식에서 호환이 어려우므로 페이지라우터를 사용하는 경우가 많이 있답니다! (이 때는 여전히 CSS-IN-JS 방식이 적용 가능하므로, 최신기술에 너무 의존하는 것은 좋은 방법이 아니랍니다!)


넓은 시야로 궁금증을 가지며 공부하시는 것을 보니, 지성님의 깊이있는 성장이 기대되네요!^^

지성님의 프로필 이미지
지성

작성한 질문수

질문하기