Vite로 React 프로젝트 생성하기

CRA는 이제 그만. Vite를 사용해 빠르고 가벼운 React 개발 환경을 구축하는 방법을 단계별로 알아봅니다.

---

1. 사전 준비

Vite로 React 프로젝트를 생성하려면 Node.js가 설치되어 있어야 합니다. Node.js를 설치하면 패키지 매니저인 npm도 함께 설치됩니다.

에디터는 Visual Studio Code를 사용합니다. VS Code를 실행한 뒤 상단 메뉴에서 File → Open Folder를 클릭하여 프로젝트에 사용할 빈 폴더를 선택합니다.

폴더를 선택하면 VS Code가 다시 열리고, 왼쪽 Explorer 탭에 선택한 폴더 이름이 표시됩니다. 이 상태에서 Terminal → New Terminal을 클릭하여 내장 터미널을 열어줍니다.

---

2. 프로젝트 생성 명령어

터미널에 다음 명령어를 입력합니다.

npm create vite@latest .

이 명령어의 각 부분이 의미하는 바는 다음과 같습니다.

구성 요소 의미

npm	Node.js 패키지 매니저
create	npm이 제공하는 프로젝트 생성 스크립트 명령어
vite@latest	Vite 도구의 최신 버전 템플릿
.	현재 폴더에 프로젝트를 생성

즉, npm을 통해 Vite의 최신 템플릿으로 현재 폴더에 프로젝트를 생성하겠다는 뜻입니다.

---

3. 대화형 프롬프트 설정

명령어를 실행하면 Vite가 프로젝트 구성을 위한 대화형 프롬프트를 표시합니다. 사용자의 선택에 따라 프로젝트 골격이 결정됩니다.

프레임워크 선택

첫 번째 프롬프트에서는 프레임워크를 선택합니다. Vite는 빌드 도구로서 Vanilla JS, Vue, React, Preact, Lit, Svelte 등 다양한 프레임워크 템플릿을 지원합니다.

React 애플리케이션을 만들 예정이므로 화살표 키로 React를 선택하고 Enter를 입력합니다.

Variant 선택

다음 단계에서는 프로젝트의 언어, 트랜스파일러, 라우터 등을 선택합니다. 현재 Vite에서 React를 선택하면 다음과 같은 옵션이 표시됩니다.

옵션 설명

TypeScript	ESBuild 기반 트랜스파일링. 가장 기본적인 TS 템플릿
TypeScript + React Compiler	React Compiler를 함께 사용하는 TS 템플릿
TypeScript + SWC	SWC 기반 트랜스파일링. 빌드 속도에 초점
JavaScript	ESBuild 기반 트랜스파일링. 기본 JS 템플릿
JavaScript + React Compiler	React Compiler를 함께 사용하는 JS 템플릿
JavaScript + SWC	SWC 기반 트랜스파일링 JS 템플릿
React Router v7 ↗	React Router v7 기반 프로젝트 (외부 템플릿)
TanStack Router ↗	TanStack Router 기반 프로젝트 (외부 템플릿)
RedwoodSDK ↗	RedwoodSDK 기반 프로젝트 (외부 템플릿)
RSC ↗	React Server Components 프로젝트 (외부 템플릿)

옵션이 많아 고민될 수 있지만, 입문 단계에서는 TypeScript를 선택하는 것을 권장합니다.

💡 어떤 옵션을 골라야 할까?

• TypeScript vs TypeScript + SWC — 기본 TypeScript를 선택하면 ESBuild가, SWC 옵션을 선택하면 SWC가 트랜스파일링을 담당합니다. SWC를 사용하려면 별도의 Vite 플러그인이 필요하고, SWC가 업데이트되더라도 해당 플러그인이 지원하지 않으면 사용할 수 없습니다. ESBuild도 충분히 빠르고 안정적이므로 굳이 SWC를 선택할 필요는 없습니다.
• React Compiler — React 19에서 도입된 React Compiler를 사용하면 useMemo, useCallback 등의 수동 메모이제이션 없이도 React가 자동으로 최적화를 수행합니다. 미래 지향적인 설정을 원한다면 좋은 선택입니다.
• React Router v7 / TanStack Router / RedwoodSDK / RSC — 이들은 외부 템플릿으로, 라우팅이나 서버 컴포넌트가 내장된 보다 풍부한 프로젝트 구조를 제공합니다. 프레임워크 수준의 기능이 필요할 때 선택합니다.

---

4. 의존성 설치

프롬프트 선택이 끝나면 프로젝트의 골격이 순식간에 생성됩니다. 이제 필요한 패키지를 설치합니다.

npm install

npm install은 프로젝트 폴더의 package.json을 참고하여 필요한 모든 패키지를 자동으로 설치하는 명령어입니다. 설치 시간은 컴퓨터 사양에 따라 달라질 수 있습니다.

---

5. 개발 서버 실행

패키지 설치가 완료되면, 개발 서버를 실행합니다.

npm run dev

실행하면 다음과 같은 출력이 나타납니다.

VITE v6.x.x  ready in 300ms

➜  Local:   http://localhost:5173/

Vite에 내장된 개발 서버가 실행되면서 로컬 주소가 표시됩니다. 이 주소를 Cmd + 클릭(macOS) 또는 Ctrl + 클릭(Windows)하면 웹 브라우저에서 React 애플리케이션이 열립니다.

✅ 브라우저에 React 로고와 카운터 버튼이 보이면 프로젝트가 정상적으로 생성된 것입니다. OS 테마 설정에 따라 다크모드 또는 라이트모드로 표시될 수 있으니, 화면 색상이 다르더라도 걱정하지 않아도 됩니다.

---

전체 명령어 요약

# 1. 프로젝트 생성
npm create vite@latest .

# 2. 프롬프트에서 React → TypeScript 선택

# 3. 의존성 설치
npm install

# 4. 개발 서버 실행
npm run dev

Vite를 사용하면 단 세 줄의 명령어로 React + TypeScript 프로젝트를 생성하고 실행할 수 있습니다. CRA에 비해 설치 속도와 개발 서버 시작 속도가 월등히 빠르므로, 새로운 React 프로젝트를 시작할 때 Vite를 적극 활용해 보세요.