Vite로 React 프로젝트 시작하기

1. Vite란?

Vite는 프론트엔드 빌드 도구로, 빠른 개발 서버 실행 속도와 즉각적인 반영(Hot Module Replacement, HMR)을 강점으로 갖습니다. 기존 CRA(Create React App)에 비해 설정이 단순하고, ESBuild와 Rollup을 기반으로 동작하기 때문에 대규모 프로젝트에서도 쾌적한 개발 환경을 제공합니다.

2. 프로젝트 생성

프로젝트 초기화

먼저, 원하는 경로에서 터미널을 열고 다음 명령어를 실행합니다.

npm create vite@latest

프로젝트 이름 지정

원하는 프로젝트 이름을 입력합니다.

프레임워크 선택

프레임워크는 React, 언어는 JavaScript를 선택합니다. (TypeScript도 가능)

설치 옵션

남은 옵션은 기본값을 사용합니다.

3. 개발 서버 실행

프로젝트 생성이 완료되면 의존성을 설치하고 서버를 실행합니다.

cd <생성한 프로젝트명>
npm install
npm run dev

4. 첫 화면 확인

브라우저에서 http://localhost:5173/에 접속하면 Vite가 기본 제공하는 React 초기 화면을 확인할 수 있습니다.

5. 정리

Vite는 CRA보다 훨씬 빠른 속도로 서버가 실행되고 저장 시 브라우저 반영도 즉각적입니다. 이후에는 vite.config.js를 통해 프로젝트 요구사항에 맞게 프록시, 별칭, 플러그인 등을 손쉽게 설정할 수 있습니다.

구분	CRA(Create React App)	Vite
개발 서버 실행 속도	느림(Webpack 기반, 빌드 후 서버 시작)	빠름(ESBuild 기반, 즉시 서버 시작)
핫 리로딩(HMR)	변경 사항 반영이 느릴 수 있음	반영이 매우 빠름
번들러	Webpack	Rollup (빌드) + ESBuild (개발)
설정 난이도	기본 설정은 간단하지만, 커스터마이징 어려움	vite.config.js를 통해 수정 및 커스터마이징 가능
빌드 속도	상대적으로 느림	빠름