앱 처음부터 조립하기

명령 몇 줄과 설정 파일 세 개면 작동하는 앱이 생겨. 스택 전체를 한 자리에서 조립하고 각 연결 지점을 확인해.

이번 레슨의 도착점

끝나면 npm run dev로 React 19 앱을 http://localhost:5173에서 열 수 있어. strict TypeScript가 켜져 있고 Tailwind v4 유틸리티도 적용돼. 오래된 튜토리얼을 복사하지 않고, 실제 명령과 파일을 보며 연결할 거야.

1. Vite 프로젝트 만들기

Vite 팀이 관리하는 React + TypeScript 템플릿으로 시작해. 2026년 기준으로 메타 프레임워크 없이 React 앱을 만들 때 React 공식 문서가 안내하는 시작점이야.

2. Tailwind v4 설치하기

tailwindcss와 Vite 통합 패키지인 @tailwindcss/vite를 설치해. 그런 다음 vite.config.ts에 플러그인을 한 줄 추가하면 빌드 도구 쪽 연결은 끝나.

3. CSS에서 Tailwind 불러오기

메인 CSS에 @import "tailwindcss"를 넣어. v3에서 쓰던 세 개의 @tailwind 디렉티브 대신 v4에서는 이 한 줄이 기본 방식이야.

4. 화면에서 확인하기

JSX 엘리먼트에 Tailwind 유틸리티 클래스를 붙이고 화면을 열어 봐. 스타일이 보이면 CSS import, Vite 플러그인, React 진입점이 모두 연결된 거야. 보이지 않으면 main.tsx가 CSS를 불러오는지와 vite.config.ts의 플러그인부터 확인해.

5. strict TypeScript 확인하기

Vite의 React + TypeScript 템플릿에는 strict 검사가 켜져 있어. 자세한 의미는 다음 레슨에서 다루니 여기서는 tsconfig.app.json과 실제 컴파일 결과만 확인해.

생성된 파일을 직접 읽어. Vite scaffold는 파일 수가 많지 않아. vite.config.ts, 세 tsconfig 파일, src/main.tsx, src/App.tsx, src/index.css를 차례로 열면 이 스택의 연결 구조가 한눈에 들어와. 마법처럼 취급하지 마.

Code

다섯 명령으로 프로젝트 만들기·bash

# 1. Vite + React 19 + TS 프로젝트 scaffold
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# 2. Tailwind v4 + Vite 플러그인 추가
npm install -D tailwindcss @tailwindcss/vite

# 3. 띄우기
npm run dev

vite.config.ts: Tailwind 플러그인 추가됨·ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 5173,
  },
});

src/index.css에 Tailwind v4 CSS-first 설정하기·css

@import "tailwindcss";

/* 테마 토큰은 lesson 5 에서 들어와. 지금은 import 만으로 충분 —
   모든 Tailwind 유틸리티가 쓸 수 있어. */

src/App.tsx에서 설치 상태 확인하기·tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-900 text-slate-100">
      <button
        onClick={() => setCount((n) => n + 1)}
        className="px-6 py-3 rounded-lg bg-cyan-500 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
      >
        Tailwind + React 19: clicked {count} times
      </button>
    </main>
  );
}

Exercise

설치 명령을 실행하고 기본 App.tsx를 sanity-check 예제로 바꿔. 버튼의 색과 hover가 적용되고 카운터가 증가하는지 확인해. 그런 다음 CSS의 @import, Vite 플러그인, main.tsx의 CSS import를 하나씩 잠깐 제거해 각 실패 모양을 보고 모두 복원해.

Hint

@import가 빠지면 Tailwind 유틸리티가 사라지고, 플러그인이 빠지면 CSS 변환이 일어나지 않아. main.tsx의 import를 빼면 Tailwind뿐 아니라 직접 작성한 CSS도 전부 적용되지 않아.

이번 레슨의 도착점

1. Vite 프로젝트 만들기

2. Tailwind v4 설치하기

3. CSS에서 Tailwind 불러오기

4. 화면에서 확인하기

5. strict TypeScript 확인하기

Code

External links

Exercise

Progress

댓글 0