1. Tailwind CSS
- 클래스 기반으로 스타일을 지정하는 CSS 프레임워크
장점
- 클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능
- 사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능
- 구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능
단점
- 클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림
- HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.
서버 사이드 렌더링
- 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.
- 빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.
2. styled-components
- CSS를 JavaScript 안에 포함시켜 컴포넌트에 스타일을 적용하는 방식 (CSS-in-JS)
장점
- 컴포넌트의 스타일을 캡슐화하여 코드의 유지보수와 재사용성 증가
- JavaScript를 통해 동적으로 스타일 변경 가능
단점
- 스타일이 JavaScript 파일에 포함되어 프로덕션 번들 크기 증가로 초기 로딩 속도에 영향
- 렌더링할 때 스타일을 동적으로 생성해 성능 문제 발생
서버 사이드 렌더링
- 서버 사이드 렌더링 시에도 styled-components를 사용하여 컴포넌트를 렌더링하고 초기 스타일을 적용 가능
- 다만, 서버에서도 컴포넌트를 렌더링하기 때문에 ServerStyleSheet 등의 API를 통해 서버와 클라이언트의 스타일 일관성을 유지해야 된다.
3. 비교
프로젝트의 스타일 라이브러리/프레임워크 로 한번도 사용해보지 않은 Tailwind를 사용해야될지 익숙한 styled-components를 사용해야될지 많은 고민을 했다. 두 기술 스택 모두 서버 사이드 렌더링과 호환되고 각자의 장단점도 명확하게 있어서 선택하기가 쉽지 않았다. 최근에 CSS-in-JS 방식의 성능 문제가 대두되고 있기도 하고 CSS 프레임워크의 다양한 기능을 사용해보고 싶기도 해서 최종적으로 Tailwind를 선택하게 되었다.
4. Tailwind 적용
Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
- postcss : CSS 후처리기, Tailwind CSS를 컴파일하고 변환하기 위해 사용
- autoprefixer : PostCSS의 플러그인, CSS에 자동으로 벤더 접두어를 적용하여 브라우저 호환성 향상
Tailwind 초기화
npx tailwindcss init -p
- Tailwind CSS의 기본 구성 파일인 tailwind.config.js 생성
- -p 옵션을 통해 postcss.config.js을 추가 생성
전역 CSS 파일에 지시어 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
- @tailwind base : 브라우저 기본 스타일 초기화
- @tailwind components : Tailwind에서 제공하는 UI를 사용 가능
- @tailwind utilities : 유틸리티 클래스 포함
5. Prettier-plugin-tailwindcss 적용
- recommended class order를 기반으로 클래스 자동 정렬을 지원
- 기본 계층 클래스, 컴포넌트 계층 클래스, 유틸리티 계층 클래스 순으로 정렬
설치
npm install -D prettier prettier-plugin-tailwindcss
.prettierrc 파일에 플러그인 적용
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"useTabs": false,
"tabWidth": 2,
"printWidth": 120,
"arrowParens": "always",
"plugins": ["prettier-plugin-tailwindcss"] // 플러그인 중에 가장 마지막에 와야된다.
}
'Next.js' 카테고리의 다른 글
Next.js 14에서 Context를 사용해서 토스트 메시지 구현하고 최적화하기 (1) | 2024.05.11 |
---|---|
Next.js 14에서 NextAuth 없이 로그인 인증 구현하기 (0) | 2024.04.15 |
Next.js 14에서 원격 이미지 최적화하기 (1) | 2024.02.16 |
Next.js 14 프로젝트 초기 설정 (0) | 2024.02.10 |