[React] Next.js에 대해 알기 2부 (TailWind CSS, Shadcn UI)

들어가기에 앞서

Next.js 1부에 이어 2부를 써본다. 1부에서 놓친점이 있다면 Next.js가 버전마다 큰 차이가 있다는 것을 늦게 확인했다는 점이다. 1부와는 다르게 이번엔 Next.js 14버전을 기준으로 디렉토리 구조를 다시 이해하고 튜토리얼부터 차근차근 따라가보려고 한다.

출처 : Next.js 14 가이드 한글 깃허브 주소

 

튜토리얼을 마치고나면 앞으로 있을 프로젝트에 있어 Front쪽을 맡았기 때문에 Front쪽을 중점적으로 공부해보려고한다. 그래서 Next.js 안에서 TailWindCss을 중점적으로 사용해볼것이다.

 

Next.js 14 버전 디렉토리 구조는 어떻게 바뀌었을까

/app: 애플리케이션의 모든 경로, 컴포넌트 및 로직을 포함하며, 대부분 여기서 작업한다.

/app/lib: 애플리케이션에서 사용되는 함수를 포함하며, 재사용 가능한 유틸리티 함수 및 데이터 가져오기 함수 등을 포함한다.

/app/ui: 애플리케이션의 모든 UI 컴포넌트를 포함하며, 카드, 테이블 및 양식과 같은 것을 포함한다.

/public: 이미지와 같은 애플리케이션의 모든 정적 에셋을 포함한다.

/script/: 나중에 데이터베이스를 채우는 데 사용할 시드 스크립트를 포함한다.

Config 파일: 애플리케이션의 최상단에 next.config.js와 같은 config 파일들 또한 위치하게 된다. 프로젝트를 시작할 때 create-next-app를 사용하여 대부분의 이러한 파일이 작성되고 미리 구성되었다는 것을 알 수 있다.

 

TypeScript ?

대부분의 파일에 .ts 또는 .tsx 확장자가 있다. 이는 프로젝트가 TypeScript로 작성되었기 때문인데,  현대 웹 환경을 반영하여 타입스크립트로 파일이 작성되도록 하여 시작했다.

지금은 /app/lib/definitions.ts 파일을 살펴보면 데이터베이스에서 반환될 타입을 수동으로 정의한다. 

 

TypeScript를 사용하면 컴포넌트나 데이터베이스에 잘못된 데이터 형식을 전달하지 않도록 할 수 있다. 즉, Invoice 같은 데이터 형식을 살펴보면 금액에 숫자 대신 문자열을 전달하는 실수를 방지할 수 있다.

 

TypeScript 개발자의 경우라면?

데이터 형식을 수동으로 선언하고 있지만, 보다 안전하게 type을 사용하고 싶다면, 데이터베이스 스키마를 기반으로 유형을 자동 생성하는 Prisma를 권장하고 있다. Next.js는 프로젝트가 TypeScript를 사용하는지 감지하고 필요한 패키지 및 구성을 자동으로 설치한다. Next.js는 코드 편집기용 TypeScript 플러그인도 제공하여 자동 완성 및 유형 안전성을 돕는다.

 

CSS 스타일링 어떻게 할까?

/app/ui 폴더 내부를 살펴보면 global.css라는 파일이 존재한다. 이 파일을 사용하여 애플리케이션의 모든 곳에 CSS 규칙을 추가할 수 있다. 이는 CSS 재설정 규칙, 링크와 같은 HTML 요소에 대한 전체 사이트 스타일과 같은 것이다.

 

global.css을 애플리케이션의 어떤 구성 요소에서든 가져올 수 있지만, 일반적으로 최상위 구성 요소에 추가하는 것이 좋은 방법이다. Next.js에서는 이를 루트 레이아웃이라고 한다.

애플리케이션에 전역 스타일을 추가하려면 /app/layout.tsx로 이동하고 global.css 파일을 가져오면 된다.

 

변경사항을 저장하고 npm run dev로 서버를 실행하여 브라우저를 확인해보았다.

global.css 파일은 튜토리얼에 있는 코드를 일단 그대로 사용하여 적용시켰다.

 

여기서 global.css 내부를 살펴보면 @tailwind 지시문을 살펴볼 수 있다.

@tailwind base;
@tailwind components;
@tailwind utilities;

input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

 

TailWind CSS 는 뭘까?

Tailwind는 JSX 마크업에서 바로 유틸리티 클래스를 빠르게 작성할 수 있도록 해 개발 과정의 속도를 높이는 CSS 프레임워크다. 이미 주어져있는 컴포넌트나 유틸리티 클래스들을 가져와서 CSS 작업 부분을 도와주는 것인데, 이를 잘 활용할 수 있다면 시간절약에 있어 굉장히 큰 효율을 얻을 수 있다.

쉽게 요약하면 Tailwind에서는 클래스 이름을 추가하여 손쉽게 요소를 스타일링을 할 수 있는 것이다.

예를 들어, "text-blue-500" 클래스를 추가하면 <h1> 텍스트가 파란색이 된다.

<h1 className="text-blue-500">I'm blue!</h1>

 

CSS 스타일은 전역으로 공유되지만 각 클래스는 각 요소에 개별적으로 적용된다. 이는 요소를 추가하거나 삭제할 때 별도의 스타일 시트 유지나 스타일 충돌, CSS 번들 크기가 애플리케이션이 확장됨에 따라 커지는 것에 대해 걱정할 필요가 없다는 것을 의미한다.

새 프로젝트를 시작할 때 create-next-app을 사용하면 Next.js가 Tailwind를 사용할 지 여부를 묻는데, "예"를 선택하면 Next.js가 자동으로 필요한 패키지를 설치하고 애플리케이션에서 Tailwind를 구성한다.

 

테일윈드 CSS와 관련해서는 이곳을 참고하면 확인해볼 수 있다.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

공식문서 등을 참고해서 Tailwind CSS를 많이 다루어보았다. 어떤식으로 데이터를 담아서 전달하는지 그 데이터는 어떻게 꺼내어 쓰는지 등 을 차트나 송장 같은 기능으로 구현하는 웹페이지를 제작해볼 수 있었다.

Next.js 프레임워크에 TailWind CSS를 입혀보았다.

 

연습을 위해 하나의 대시보드, 차트, 송장목록까지 확인해 볼 수 있는 웹페이지를 구현해보았다. 디렉토리 구조까진 하나하나 캡처할 순 없으나 모두 TailWind CSS 에서 제공하는 컴포넌트, 유틸리티 클래스들을 활용해서 구현한 것이다. 순수 CSS를 하나 둘 짜면서 이 정도의 웹페이지 하나를 만드려면 굉장히 시간 소요가 클 것이다. 하지만 이제 TailWind CSS를 사용한다면 큰 시간을 소요할 필요 없이 쉽게 만들어볼 수 있다.

 

TailWind CSS를 적용하여 작업해보면서 그래도 조금 아쉬웠던 점을 꼽아보자면 꽤 괜찮아보이는 컴포넌트들은 유료 결제를 해야한다는 점이다. 그 가격도 $299로 만만치 않은 가격이었다..

 

TailWind의 기본 컴포넌트만 써보기엔 아쉬운 생각이 들어서 다른 CSS 프레임워크는 어떤게 있는지 더 찾아보고 공부해보아야겠다. Chakra UI 처럼 Next.js와 같이 어울릴 수 있는 CSS 프레임워크들이 존재한다고하지만  아직 Next.js 14 버전에 컴파일이 되지 않는 부분들이 많다고하니 주의해야한다.

 

Shadcn UI 적용해보기!

위에서 언급한 것처럼 Next.js 14에서 Chakra UI를 적용하는데에 아직 어려움이 있어 다른 UI를 찾아보았다. 마침 TailWind CSS를 기반으로 여러 컴포넌트들을 더 제공해주는 Shadcn UI가 있다고 하여 홈페이지를 찾아가보았다. 부트스트랩을 써본 사람들은 Shadcn UI에서 제공해주는 컴포넌트들을 이해하는데 좀 더 수월할 것이다. 대략 45~50개의 컴포넌트 카테고리들을 제공하는데 TailWind CSS에서 제공하는 컴포넌트들에 비해 매우 다양했다. 심지어 적용에 있어서도 TailWincd CSS와 충돌을 방지해주는 코드도 알아서 설치해준다.

 

설치 방법도 굉장히 쉽다

우선 Next.js 프로젝트에 TailWind CSS가 설치되어 적용되어있다는 전제 하에 손쉽게 설치가 가능하다.

npx shadcn-ui@latest init

 

Run the CLI를 보면 이 명령어를 활용하여 shadcn UI를 설치할 수 있다.

componets.json을 어떻게 구성할 것인지 컴포넌트 구성을 물어볼 것이다.

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

 

유의해야할 점은 아마 TailWind CSS가 깔려있다면 app/globals.css가 이미 존재할 것이다.

(Next.js 프로젝트를 구성할 때 src 디렉토리를 구성하였다면 src/app/globals.css에 위치할 것이다.)

 

그래서 where is your global CSS file? 을 물어볼때 이미 깔려있는 위치로 똑같이 설정해주면된다.

그냥 엔터만 누르다가 app/globals.css가 2개가 구성된다면 TailwindCSS와 shadcn UI 둘 다 적용이 안될 것이다.

(이 원인 찾느라 꽤 시간을 버렸다..)

 

이제 사용해볼 컴포넌트를 추가해보자

npx shadcn-ui@latest add button

 

shadcn의 버튼 기능을 추가하고 싶다면 위와 같이 그냥 버튼 기능을 추가하겠다는 명령어를 입력하면 설치가 끝난다.

물론 이는 TailWind CSS가 설치되어 적용되고있다는 전제 하에 손쉽게 설치가 가능하다.

 

components.json 구성 시에 Configure the import alias for utils: › @/lib/utils 경로를 설정해주었을 것이다.

해당 경로에 생성되는 utils.ts 파일인데 해당 파일은 TailWind CSS를 merge할 때 발생할 수 있는 클래스 충돌 문제를 해결해주는 역할을 한다.

// src/lib/utils.ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

 

이제 구성이 완료되었다.

npm run dev로 서버를 실행시키고 메인페이지에 캐러셀을 추가하여 하단에 띄워보았다.

아래와 같이 커스텀이 가능하다. 다양한 shadcn UI 컴포넌트를 잘 활용한다면 CSS 구성하는 데에 있어 이제 아주 수월하게 시간을 절약할 수도 있을 것 같다.

npx shadcn-ui@latest add carousel

 

Shadcn UI가 잘 적용되는지 확인해보았다.

마치면서

앞으로 있을 Frontend 개발에 대비하여 Next.js 기반으로 CSS, UI 적용까지 다양하게 시도해보았다. 타입스크립트 문법도 처음 접했을 땐 조금 난해하였으나 계속 보다보니 조금 익숙해지는 것 같기도하다. 이제 개발프로젝트에서 시간절약도 잘 해내면서 충분한 성과를 거둘 일만 남았다. 화이팅 !