결론부터 말하자면 styled-components

styled-components

$ yarn add styled-components

$ yarn add -D @types/styled-components

(https://velog.io/@xmun74/Next.js-TS에서-ESLint-Prettier-설정하기)

공식문서

(https://nextjs.org/docs/advanced-features/compiler#styled-components)

(https://nextjs.org/docs/advanced-features/custom-document#customizing-renderpage)

결정 과정

• styled-components
  • 장점
    • 개발팀 전원에게 익숙한 문법.
    • Sass문법을 지원함.
    • 관심사를 분리해 독립적인 컴포넌트를 생성 가능.
  • 단점
    • 스타일링을 위해서는 컴포넌트화가 필수적이다.
• emotion
  • 장점
    • styled-componenets와 동일
  • 단점
    • 로고가 못생겼어요
    • pragma line을 파일 최상단에 추가해주어야 함
• tail-wind
  • 장점
    • 간편한 퍼블리싱 가능
    • 모듈 base css라 성능이 가장 우수함
  • 단점
    • 인라인 코드가 지저분해지고, 유지보수가 어려워짐
    • 사전 학습이 어느정도 필요..
• SCSS + CSS-Module
  • 장점
    • 직관적이다.
  • 단점
    • 개발 경험이 좋지 못하다.
      • 파일 하나 더 파야함 ㅎ.ㅎ