개요

리액트 프로젝트를 시작할 때 흔히 사용하는 도구로 CRA(Create React App) 와 Vite가 있다.
이번 글에서는 이 둘의 차이점을 정리하고, CRA에서 Vite로 전환할 때 필요한 가이드도 함께 정리해볼 거임

---

CRA(Create React App)란?

한때 React app을 만들 때 가장 기본적인 툴이었음.
명령어 하나로 프로젝트 구조부터 설정까지 모두 자동으로 해주는 도구다

npx create-react-app 프로젝트명
cd 프로젝트명
npm start

CRA 특징

• 장점: 복잡한 설정 없이 바로 시작할 수 있음
• 단점: 빌드 속도가 느리고 설정을 바꾸기가 어려움
• 현재는 유지보수 위주로 진행되며 리액트 공식문서에서도 권장하지 않음

---

Vite란?

최근 각광받는 차세대 프론트엔드 빌드 도구
React, Vue, Svelte, Preact, Lit 등 다양한 프레임워크와 함께 쓸 수 있고, 속도면에서도 CRA보다 훨씬 빠름(가벼움)

Vite 특징

• 즉각적인 개발 서버 실행(파일수정 후 바로 반영됨)
• 더 빠른 빌드 속도
• 설정이 CRA보다 단순하고 유연함
• React 공식문서에서 Vite 사용을 권장함

---

CRA vs Vite (표 비교)

항목	CRA	Vite
개발 서버 기동 속도	느림 (웹팩 기반 빌드)	매우 빠름 (ESM + 핫 모듈 방식)
번들러	Webpack	esbuild + Rollup
빌드 속도	느린 편	빠름
설정 커스터마이징	어렵고 복잡함 (eject 필요)	유연하고 쉬움 (vite.config.ts)
디폴트 템플릿	JavaScript, TypeScript	JavaScript, TypeScript
문서 및 생태계	풍부하지만 Webpack 종속	비교적 신생이지만 빠르게 성장 중
최신 기술 도입	느린 편	빠르게 적용됨
파일 크기	무겁고 느림	가볍고 최적화됨

---

어떤 구조적 차이가 있을까?

1. 번들링 방식의 차이

• CRA(Webpack): 모든 파일을 번들링한 후 전체 앱을 로드함 → 앱 규모가 커질수록 느려짐.
• Vite(ESM 기반): 모듈 단위 실시간 로딩 → 필요한 코드만 불러오므로 속도 압도적임.

2. 개발 경험

• CRA는 기본 설정이 숨겨져 있고 설정 변경하려면 eject 필요.
• Vite는 vite.config.ts를 통해 유연하게 설정 가능.

3. 핫 리로딩 (HMR)

• CRA: 페이지 전체 다시 렌더링되는 경우 많음.
• Vite: 변경된 부분만 즉시 반영됨.

---

실제 체감 속도 차이

• CRA: 앱 기동 수 초 ~ 수십 초 걸릴 수 있음.
• Vite: 1초 내외 기동됨 (진짜 빠름)

---

어떤 걸 선택해야 할까?

상황	추천 도구
빠르게 실험하고 개발 속도가 중요한 개인 프로젝트	✅ Vite
기존 팀 구조가 Webpack 기반 또는 레거시 유지보수	❗ CRA 유지 고려
최신 생태계를 빠르게 받아들이고 싶다면	✅ 무조건 Vite

정리하면
Vite는 “빠르고 가볍고 유연한” 최신 도구,
CRA는 “묵직하고 안정적이지만 구식” 도구

---

CRA에서 Vite로 전환하는 방법

1. 기존 CRA 프로젝트 백업

cp -r my-cra-project my-cra-project-backup

2. CRA 프로젝트 구조 유지하면서 Vite 설치

npm uninstall react-scripts
npm install --save-dev vite

3. 프로젝트 루트에 vite.config.ts 생성

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});

4. index.html 이동

• CRA의 public/index.html → 루트 디렉토리로 이동
• div id="root"는 유지하고, CRA에서 불필요한 meta/script 태그는 정리

5. package.json 수정

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

cf) 타입스크립트라면

npm install --save-dev typescript @types/react @types/react-dom

그리고 tsconfig.json이 프로젝트 루트에 있어야 함!

👩‍🏫Eazy's SUM

• 둘 다 React프로젝트 빌드 도구로 CRA는 과거의 표준이었고, Vite는 현재와 미래의 선택지임.
• 입문자든 숙련자든 이제는 Vite를 기본으로 쓰는 시대다!

---

마치며

지금은 Vite가 CRA를 완전히 대체하는 흐름이라, 새로 프로젝트 시작하거나 기존 프로젝트를 개선할 계획이 있다면 Vite 전환을 고려해보는 게 좋음.
속도, 편의성, 유지보수성 모든 면에서 확실한 차이가 있으니까!