Vite 알아보기 (React 프로젝트 시작 도구의 변화)

리액트를 공부하다 보니 요즘 강의나 문서에서는 프로젝트를 만들 때 Create React App(CRA)이 아니라 Vite를 쓰고 있었다.

찾아보니 CRA는 유지보수가 중단되었고, 리액트 공식 문서에서도 더 이상 권장하지 않는다고 한다.

그래서 이 포스팅에서는 Vite가 뭔지, 그리고 다들 "빠르다"고 하는데 왜 빠른 건지 학습한 내용을 정리해 보려고 한다.

아직 실무에서 깊게 써본 건 아니라서, 개념과 기본 사용법 수준에서 이해한 만큼만 적어본다.

Vite란

Vite는 프랑스어로 "빠르다"라는 뜻의 프론트엔드 빌드 도구다.\이름 그대로 개발 서버 구동 속도와 코드 수정 반영 속도(HMR)가 빠른 게 가장 큰 특징이다.

CRA를 써봤다면 npm start를 누르고 서버가 켜질 때까지 한참 기다려본 경험이 있을 텐데, Vite는 프로젝트 크기와 상관없이 거의 즉시 켜진다. 처음엔 "그래봤자 몇 초 차이겠지" 싶었는데, 왜 이런 차이가 나는지 원리를 찾아보니 애초에 동작 방식 자체가 달랐다.

왜 빠른가
핵심은 "언제 번들링을 하느냐"의 차이다.

CRA(webpack)의 방식
CRA는 개발 서버를 켤 때 프로젝트의 모든 파일을 미리 하나로 묶는(번들링) 작업을 먼저 한다. 이 작업이 다 끝나야 서버가 켜진다.


파일 100개짜리 프로젝트 → 100개를 다 묶고 나서 서버 시작
파일 1000개짜리 프로젝트 → 1000개를 다 묶고 나서 서버 시작


즉, 프로젝트가 커질수록 기다리는 시간도 같이 늘어나는 구조다. 코드 한 줄을 고쳐도 번들을 다시 만들어야 해서 수정 반영도 점점 느려진다.

 

Vite의 방식

Vite는 미리 다 묶지 않는다. 요즘 브라우저는 import/export 문법(ES Modules, ESM)을 자체적으로 이해할 수 있는데, Vite는 이걸 그대로 활용한다.

서버는 일단 바로 켜고, 브라우저가 "이 파일 주세요"라고 요청하는 파일만 그때그때 변환해서 내려주는 방식이다. 지금 보고 있는 화면에 필요한 파일만 처리하면 되니까 프로젝트가 아무리 커도 서버 켜지는 속도는 거의 그대로다.

코드를 수정했을 때도 마찬가지다. 전체를 다시 묶는 게 아니라 수정된 파일 하나만 갈아끼우면 되니까 HMR 속도가 훨씬 빠르다.

정리하면 이렇다.


CRA: 다 만들어놓고 시작 → 프로젝트 커지면 느려짐
Vite: 일단 시작하고 필요한 것만 그때그때 → 프로젝트 커져도 빠름

참고로 배포용 빌드(npm run build)를 할 때는 Vite도 번들링을 한다. 실제 서비스 환경에서는 파일을 묶어서 내보내는 게 여전히 유리하기 때문이라고 한다. 즉, 개발할 때는 안 묶고, 배포할 때만 묶는 구조로 이해하면 된다.

프로젝트 만들어보기
CRA가 npx create-react-app이었다면, Vite는 아래 명령어로 시작한다.

npm create vite@latest my-app
cd my-app
npm install
npm run dev

명령어를 실행하면 어떤 프레임워크를 쓸지(React, Vue 등) 선택하는 과정이 나온다. React를 고르고 JavaScript/TypeScript 여부만 선택하면 기본 프로젝트가 만들어진다.

직접 해보니 프로젝트 생성 자체도 CRA보다 빨리 끝났고, 생성된 폴더 구조도 더 단순해서 처음 봐도 부담이 덜했다.

CRA와 달랐던 점 몇 가지
서버 실행 명령어
CRA는 npm start, Vite는 npm run dev다. 습관적으로 npm start를 치면 안 되길래 처음에 당황했다.

설정 파일이 눈에 보인다
CRA는 webpack 설정이 내부에 숨겨져 있어서 커스터마이징하려면 eject라는 걸 해야 했는데(한 번 하면 되돌릴 수 없다고 한다), Vite는 프로젝트 루트에 vite.config.js 파일이 그대로 노출되어 있어서 열어서 바로 수정하면 된다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

index.html의 위치
CRA는 index.html이 public 폴더 안에 있었는데, Vite는 프로젝트 루트에 있다. Vite에서는 index.html이 앱의 진입점 역할을 하기 때문이라고 한다.

마무리

정리하면 Vite가 빠른 이유는 "전부 미리 준비하고 시작하는" CRA 방식과 달리, "필요한 것만 그때그때 처리하는" 방식이기 때문이다. 브라우저가 ESM을 지원하게 되면서 가능해진 접근이라는 점도 흥미로웠다.

esbuild나 Rollup 같은 내부 도구 이야기까지 들어가면 더 깊은 내용이 있는 것 같지만, 이번엔 여기까지만 이해하고 넘어가려고 한다. 다음 리액트 프로젝트는 Vite로 시작해보면서 설정 부분도 하나씩 익혀볼 예정이다.