Vite을 이용해서 React 프로젝트 생성하기

 "npx create-react-app ..."의 CRA의 개발이 중단됨에따라 다른 대안으로 React프로젝트를 생성해야 한다.

그중에 Vite가 있는데 CRA처럼 쉬고 간단하게 생성할수 있다.

1) 사전 준비

- 2025년 기준 Node.js 20+ 권장 (LTS). 버전 확인:

$ node -v

2) 프로젝트 생성(이름: my-app)

버전은 기본 최신(latest)으로 설정할 수 있으며 필요시 이전 버전으로 설정할 수 있다. (공식사이트의 Version참고)

대화형(템플릿 선택 프롬프트 표시):

$ npm create vite@latest my-app

1) Window의 Git Bash로 생성

비대화형(바로 React + TS 템플릿):

$ npm create vite@latest my-app -- --template react-ts

pnpm / yarn 사용 시:

$ pnpm create vite my-app --template react-ts

$ yarn create vite my-app --template react-ts

3) 의존성 설치 & 실행

$ cd my-app

$ npm install

$ npm run dev

기본 개발 서버는 http://localhost:5173에서 실행된다.

4) 생성 구조(요약)

• index.html: 진입 HTML
• src/main.tsx: React 엔트리
• src/App.tsx: 샘플 컴포넌트
• tsconfig.json: TypeScript 설정
• vite.config.ts: Vite 설정

5) TypeScript 엄격 모드(선택)

tsconfig.json에서 "strict": true 권장.

6) 경로 별칭 설정(선택)

vite.config.ts 예시:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

7) 환경변수(선택)

Vite는 VITE_ 접두사만 클라이언트로 노출된다.

# .env
VITE_API_URL=https://api.example.com

사용 예:

const api = import.meta.env.VITE_API_URL

8) 빌드 & 프리뷰

$ npm run build

$ npm run preview

9) 트러블슈팅

• Node 버전 오류: Node 20+ 사용 (2025년 기준)
• 포트 점유: npm run dev -- --port 3000
• 템플릿 미지정: --template react-ts 사용