Vite로 React 프로젝트 시작하는 법 — pnpm create vite 명령어 한 줄로 끝

React 프로젝트를 시작하려면 먼저 프로젝트 틀을 만들어야 한다. 이전에는 Create React App(CRA)이 많이 쓰였는데, 요즘은 Vite를 쓰는 경우가 훨씬 많아졌다. 포트폴리오 사이트와 모바일 웹앱 모두 Vite로 시작했다.

처음엔 Vite가 뭔지도 몰랐고, 그냥 명령어를 따라 입력했다. 쓰다 보니 왜 Vite를 쓰는지 조금씩 이해가 됐다. 설치부터 실행까지 정리했다.

Vite가 뭔가 — 왜 CRA 대신 쓰나

Vite는 프론트엔드 개발 환경을 빠르게 구성해주는 빌드 툴이다. 가장 크게 체감되는 차이는 속도다. CRA는 프로젝트가 커질수록 개발 서버 시작 속도가 느려지는데, Vite는 훨씬 빠르게 시작된다. 저장하면 브라우저에 즉시 반영되는 속도도 빠르다.

React 공식 문서에서도 현재는 Vite 기반 설정을 권장하고 있다. 새 프로젝트를 시작한다면 Vite로 가는 게 맞다.

💡 CRA는 더 이상 권장되지 않는다 Create React App은 오랫동안 React 프로젝트의 표준 시작 방법이었지만, 현재는 유지보수가 거의 되지 않는 상태다. 새 프로젝트에는 Vite를 사용하는 것이 좋다.

Vite로 React 프로젝트 시작하기

Node.js와 pnpm이 설치되어 있다면 터미널에서 아래 명령어 하나로 시작할 수 있다. (Node.js, pnpm 설치는 4편 참고)

# Vite로 React 프로젝트 생성
pnpm create vite

명령어를 실행하면 몇 가지를 선택하는 화면이 나온다.

• 1
  Project name — 프로젝트 폴더 이름 입력 (예: my-app)
• 2
  Select a framework — React 선택
• 3
  Select a variant — JavaScript 또는 TypeScript 선택 (처음이라면 JavaScript 추천)

선택이 끝나면 프로젝트 폴더가 생성된다. 이후 아래 명령어로 패키지를 설치하고 개발 서버를 실행한다.

# 생성된 폴더로 이동
cd my-app

# 패키지 설치
pnpm install

# 개발 서버 실행
pnpm dev

터미널에 `Local: http://localhost:5173` 이 뜨면 성공이다. 브라우저에서 해당 주소로 접속하면 React 기본 화면이 보인다.

pnpm dev 실행 후 브라우저에서 확인한 Vite + React 기본 화면

 

💡 npm을 쓴다면 명령어가 다르다 pnpm 대신 npm을 사용한다면 npm create vite@latest로 시작하고, 이후 npm install, npm run dev로 실행하면 된다.

Vite는 빠른 개발 환경을 제공하는 빌드 툴로, 현재 React 프로젝트의 표준 시작 방법이다.
pnpm create vite 명령어로 프로젝트를 생성하고, React와 JavaScript를 선택한 뒤 pnpm install → pnpm dev로 실행하면 된다.
터미널에 localhost 주소가 뜨면 개발 환경 준비 완료다.