Next.js + TypeScript + Tailwind CSS 시작하기 / Tailwind CSS 장단점

프론트엔드의 기술은 정말 빨리 변하는 것 같다. 불과 1년 전만 해도 React와 Vue가 프론트엔드 기술 시장의 점유율을 가지고 싸우는 것 같더니 React가 우세한 것 같다가 이제는 Next.js가 대세로 자리잡고 있는 것 같다.

(리액트 개발자들이 진화한 걸까?)

 

웹페이지를 만들 때 SEO(검색엔진 최적화)는 빼놓고 생각할 수 없는 문제라 React에 부가 라이브러리를 설치하는 방법으로 보완하는 방법도 있었지만 (이 글에서 싱글 페이지 어플리케이션이 왜 SEO에 취약한 지는 다루지 않겠다. 많은 설명 글들이 있으니 찾아보시길..) Next.js는 정말 편리하게 서버사이드 렌더링을 지원해주고 다른 부가적인 기능들이 많기 때문에 리액트 좀 다뤄봤던 개발자들은 안 쓸 수가 없는 프레임워크인 것 같다.

시작하기

$ npx create-next-app@latest

위 명령어를 터미널의 내가 프로젝트를 위치시킬 폴더 경로 안에서 입력하면 차례대로 프로젝트의 설정을 정할 수 있는 프롬프트가 나온다.

프로젝트의 이름을 입력하기!

TypeScript를 사용할 건가요? "Yes" (방향키로 조작할 수 있다.)

ESLint를 사용할 건가요? Lint 좋아하는 사람들은 "Yes"

Tailwind CSS를 사용할 건가요? "Yes"

src 디렉토리를 사용할 건가요? 

나는 주로 src 디렉토리를 사용해서 public 폴더와 분리시키는 편이다.

App Router를 사용할 건가요?

App Router는 매우매우 최신에 나온 기술인데, (글을 쓰고 있는 기점으로) Next.js에서 page폴더를 통한 라우팅 방법을 사용하지 않고 라우팅을 할 수 있도록 만든 기술이다. 아직 안정화 단계가 아닌 듯하여 패스 "No".

import 할 때 경로를 커스터마이징 할 것인지 묻는 항목인데, "Yes".

그럼 이렇게 디폴트로 커스터마이징 된 경로를 사용할 것인지 묻는다. "Yes"

여기까지 마치고 나면 프로젝트 설치가 시작된다.

 

이 글을 쓰고 있는 시점 불과 한달 전에도 프롬프트가 달랐는데 한달 뒤에 또 프롬프트가 어떻게 달라질지 모르겠다. Next.js가 정말 빨리 업그레이드 되고 있고, 또 그만큼 사용량도 늘어나는 추세라 예의주시하고 있어야 할 것 같다.

Tailwind CSS

Next.js를 사용할 때, Tailwind CSS를 많이 사용한다는 얘기를 들어서 한번 사용해봤는데, 왜 사용하는지 알 것 같으면서도 불편한 점들이 많았다.

그래서 장점과 단점, 그리고 단점을 보완하는 방법 등에 대해 생각해봤는데 이를 정리해보려고 한다.

장점

1. Next.js에서 CSS-in-JS 보다 도입이 쉽다.

React의 스타일 툴로 많이 사용되는 Styled-components나 Emotion은 CSS-in-JS로 CSS 코드처럼 보이지만, 사실 JavaScript 코드이고, 브라우저에서 JavaScript 파일이 읽혀야지만 CSS 적용이 된다. 서버사이드 렌더링을 하는 Next.js 경우 이러한 CSS-in-JS툴을 사용하려면 별도의 설정을 해주어야 사용이 가능한데, Tailwind CSS는 순수 CSS로 파일을 생성해주기 때문에 JavaScript에 의존하지 않아도 된다. (서버사이드 렌더링의 장점을 살릴 수 있다.)

 

2. 클래스명을 고민하지 않아도 된다.

클래스명을 짓는 일은 은근 까다로운 일이고, 프로젝트가 커질 수록 클래스명을 기억하는 것이 쉽지 않은데, Tailwind CSS는 미리 클래스명이 지정되어 있고, 그것을 가져다 쓰는 것이라 클래스명을 지을 필요가 없다. 그래서 클래스명 고민하는 시간을 아낄 수 있고, 클래스명이 충돌돼서 예기치 못하게 다른 스타일이 적용된다던가 하는 일이 발생하지 않는다.

export default function ItemDetail() {
  return (
    <div className="px-4 py-10"> // px-4 => padding이 x축으로 4rem
      <div>
        <h2 className="text-2xl font-bold text-gray-900">Similar items</h2>
        <div className="mt-6 grid grid-cols-2 gap-4">
          {[1, 2, 3, 4, 5, 6].map((_, i) => (
            <div key={i}>
              <div className="h-56 w-full mb-4 bg-slate-300" />
              <h3 className="text-gray-700 -mb-1">Galaxy S60</h3>
              <span className="text-xs font-medium text-gray-900">$6</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

 

3. Just-in-time 컴파일러

이것은 Tailwind CSS가 다른 스타일링 툴과 비교한 장점이라기 보다 최근에 버전 3 이상으로 업그레이드 되면서 개선된 점인데, 버전 3 이전에는 모든 클래스명을 다 가지고 있고, 그것을 불러오는 개념이라 용량이 굉장히 컸다고 한다. 버전 3 이상부터는 Just-in-time 컴파일러를 통해서 실제 프로젝트에 사용된 클래스명만 가지고 와서 프로젝트에 주입해주기 때문에 빌드 시 프로젝트의 스타일링 파일 용량이 줄어들었다고 한다.

 

4. 콘텐츠와 스타일의 관심사가 합쳐져 있다.

HTML(처럼 보이는 JSX) 과 스타일링 코드를 한 파일 안에 작성하기 때문에 해당 요소에 어떤 스타일이 적용되어 있는 지 파악하기가 쉽다. 이걸 단점으로 지적하는 사람들도 있는데, 콘텐츠와 스타일링의 내용이 혼재되어 있어서 내용을 각각 파악하기가 어렵다는 이유 때문이다. 나는 개인적으로 HTML 확인하고 그 클래스명 찾아서 CSS 파일 가서 다시 스타일링 내용 찾아보는 과정보다 혼재되어 있어서 바로 찾아볼 수 있는 점이 장점으로 느껴졌다. Visual Studio Code는 코드 하이라이팅 기능이 너무 잘 되어 있어서 색깔로 구분이 되어 있다보니 내용을 못 찾겠다는 등의 불편함은 느껴지지 않았다. 

단점

1. 코드가 못생겼다.

보통 CSS를 작성할 때는 한 속성 다음에 줄바꿈을 해서 세로로 볼 수 있도록 코드를 짜는데, 스타일링 코드를 HTML 안에 작성하다 보니 옆으로 길어져서 코드가 가독성이 떨어진다. 물론, 프리티어 등을 통해 보완할 수 있겠지만 개인적으로 일반 CSS 파일처럼 파악이 쉽게 되지 않는 느낌이 있었다. 예를 들어, input 요소에는 hover, focus, disabled 등 속성 선택자들이 많은데, 이걸 한 줄에 죽 적으니 정말 코드 가독성이 떨어진다.

 

2. 초기 러닝커브가 있다.

클래스 명으로 CSS를 지정하다 보니 일반 CSS 코드 말고 Tailwind CSS의 CSS 코드를 익혀야 한다. 그래서 처음에 익숙해질 때 까지 시간이 조금 걸린다. 물론 CSS와 매우 유사하게 되어 있어서 빠르게 익힐 수 있지만, 처음 사용할 때는 조금 불편하다. Tailwind CSS에서 공식적으로 제공하는 VS code Extension인 "Tailwind CSS IntelliSense"를 설치하면 좀 더 쉽게 사용할 수 있다.

 

3. Tailwind CSS부터 배운다면, 일반 CSS 학습을 해칠 수 있다.

만약, 일반 CSS를 잘 모르고, 빠르게 시작하기 위해 Tailwind CSS 부터 학습한다면, 나중에 일반 CSS를 익힐 때 헷갈릴 수 있다. 코드가 유사한데, 다르므로...

 

4. 스타일링 코드 재사용을 하려면 컴포넌트를 다 제작해야 한다.

이게 개인적으로 가장 불편한 부분이라고 느꼈는데, 디자인 시스템이라던가 일관된 스타일링 적용이 필요할 때, 하나의 클래스 지정을 해놓고 그 클래스명을 계속 가져다 쓰는 것이 아니라 컴포넌트를 다 제작해서 사용해야 한다. 안 그러면, 똑같은 코드를 매 요소마다 복붙해서 사용해야한다. 이 방법이 매우 비효율적인 이유는 수정이 필요할 때 다 일일이 수정을 해줘야 하기 때문에 가급적 컴포넌트를 만드는 것이 효율적이다. 예를 들어, table 태그 안에는 thead, tbody, tr, td 등의 여러 요소가 들어가는데, 공통 스타일링을 적용하기 위해서는 이 각 요소들을 스타일링이 적용된 컴포넌트화 시켜야 한다. 클래스명으로 간단하게 사용하다가 이렇게 만들려니 약간 불편함이 느껴졌지만.. 익숙하지 않아서 그런 것 같기도 하다.

결론

단점이 분명 존재하긴 하지만, 서버사이드 렌더링과 조합이 잘 맞고, 편리한 점도 분명 있기 때문에 Next.js를 사용할 때는 Tailwind CSS를 기꺼이 사용할 것 같다.