강의

멘토링

로드맵

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

mungyun1234님의 프로필 이미지
mungyun1234

작성한 질문수

한 입 크기로 잘라먹는 Next.js

2.6) 스타일링

module CSS 말고 Styled-Component로 css를 작성하는 방법은 어떤가요??

해결된 질문

작성

·

249

·

수정됨

0

동료들과 협업할때 CSS를 작성하는 방법을 module로 할지 Styled-Component로 할지 고민인데요.

 

module로 하면 className에 계속 "style." 접두사를 넣어주어야 한다는 불편함이 있고

 

Styled-Component를 쓰게 되면 하나의 파일에 줄이 길어지는 단점과, 스타일링을 코드 한줄 넣고싶어도 하나의 스타일 컴포넌트를 만들어야 한다는 단점이 있더라고요.

강사님꼐서는 module을 추천하시기에 module을 강의에 넣으신걸까요??

퀴즈

46%나 틀려요. 한번 도전해보세요!

Next.js 페이지 라우터에서 파일 기반 라우팅은 어떻게 동작하나요?

파일 이름과 확장자에 관계없이 모든 파일이 페이지로 라우팅됩니다.

`pages` 폴더 구조에 따라 파일 이름과 경로가 URL 경로에 매핑되어 라우팅됩니다.

라우팅은 설정 파일에서만 정의할 수 있으며, 파일 시스템과는 무관합니다.

오직 `index.tsx` 파일만 페이지로 라우팅됩니다.

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

우선 강의에서 module css를 사용한 이유는 그것이 Next.js 공식문서에서 제안하고 있는 가장 기본적인 스타일 방법이기 때문입니다.

물론 요즘은 Tailwind를 사용하는게 더 일반적인 것 같긴 하지만 (그리고 저도 Tailwind를 가장 자주 활용하긴 하지만 ㅎㅎ...) 그렇다고 Tailwind로 갑자기 강의를 진행하면 다른 스타일링 방법을 사용하고 계신 분들께 또 다른 어려움이나 번거로움을 줄 수 있을거라 생각했습니다. 그리고 그런 어려움은 우리 강의에서는 굳이 필요하지 않다고 생각했어요 강의의 목적이 Next.js의 기능과 개념이기 때문이죠!

추가로 말씀해주신 Styled Component 또한 훌륭한 스타일링 방법이지만 이런 CSS-in-JS 방법들은 아쉽게도 아직 Next.js의 서버컴포넌트 환경에서 정식 지원되지는 않는걸로도 알고 있어요 ㅠㅠ 자세한 사항은 다음 문서를 참고하시면 더 좋을 것 같아요!

https://nextjs.org/docs/app/building-your-application/styling/css-in-js

mungyun1234님의 프로필 이미지
mungyun1234
질문자

헉 정식 지원되지 않는다는 이야기는 처음 알았네요 ㅎㅎ...ㅜ
문서 참고해보겠습니다 감사합니다!

mungyun1234님의 프로필 이미지
mungyun1234

작성한 질문수

질문하기