CRA 지고 Vite가 왔다...!!

이번 프로젝트는 리액트 기반이라 익숙하긴 했지만, 기존에 쓰던 CRA(Create React App) 대신 비트(Vite)라는 툴을 쓰고 있어서 처음엔 조금 낯설었다.
막상 써보니 왜 많은 개발자들이 Vite로 넘어가는지 체감이 되었다. CRA와 비교했을 때 확실히 빠르고, 설정도 훨씬 간결했다.
이번 글에선 두 도구의 차이와 Vite가 왜 더 나은 선택지가 될 수 있는지를 간단히 정리해보려 한다.

---

1. CRA의 장점과 한계

CRA는 한동안 리액트 프로젝트의 기본 셋업 도구로 많이 쓰였다.
npx create-react-app 한 줄로 프로젝트가 뚝딱 만들어지고, 바로 개발을 시작할 수 있다는 점에서 초보자에게 정말 친절한 툴이다.
 
하지만 프로젝트가 어느 정도 커지거나 커스터마이징이 필요해지는 순간, 단점이 하나씩 드러났다

• 느린 개발 서버 시작 속도
• HMR(Hot Module Replacement) 반응 속도 지연
• 설정 변경의 불편함 (eject 필요)
• 최신 브라우저 기능 활용 부족

본인도 CRA 기반 프로젝트를 하면 항상 프로젝트가 무겁다는 느낌이 강했다. 

---

2. 비트(Vite)로 전환하면서 느낀 변화

Vite(비트)는 CRA의 불편함을 해소하기 위해 등장한 모던 프론트엔드 빌드 툴이었다.
Vite의 핵심 장점은 다음과 같다:

• 개발 서버가 정말 빠름
  → ES 모듈 기반으로 동작해서 서버 시작 속도가 거의 ‘즉시’에 가깝다.
• HMR 반응 속도가 체감될 정도로 빠름
  → 변경 사항 저장하자마자 바로 반영된다.
• 설정이 간단하고 유연함
  → 복잡한 eject 없이도 vite.config.ts 하나로 커스터마이징 가능.
• 빌드도 빠르고 최적화됨
  → Rollup 기반 빌드로 번들 사이즈 최적화와 빠른 배포 가능.

---

3. 핵심 개념 비교 – CRA vs Vite

항목	CRA (Create React App)	비트 (Vite)
개발 서버	Webpack 기반, 시작 속도 느림	ESM 기반, 즉시 시작
HMR	느림, 반응까지 지연 있음	빠름, 거의 실시간 반영
설정	제한적, eject 필요	유연, 설정 파일로 바로 가능
빌드 방식	Webpack 기반 번들링	Rollup 기반 최적화
확장성	커스터마이징 어려움	플러그인 기반 유연 확장

 

---

4. 프로젝트 세팅

처음 Vite로 프로젝트를 세팅할 땐 아래처럼 명령어 몇 줄이면 끝난다.

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

이렇게 시작하면 CRA보다 훨씬 빠르게 개발 서버가 실행되고, 코드 수정할 때마다 바로 반영되는 HMR 덕분에 UI 조정도 편하다.

---

5. 결론

프로젝트 규모가 커지거나 빠른 피드백 루프가 중요한 상황이라면,
CRA보다는 Vite가 훨씬 더 효율적이라는 걸 이번에 제대로 느꼈다.
개발 서버 속도부터 HMR 반응성, 설정의 유연함까지 너무 맘에 들었다...!
물론, CRA도 HMR을 지원하긴 하지만, Webpack 기반이라 반응 속도가 약간 느릴 수 있다고 한다.
 
 
CRA도 정말 좋은 도구였지만, 개발 환경은 계속 진화하고 있고
당분간은 리액트 프로젝트를 시작하게 된다면, 별다른 고민 없이 Vite로 세팅할 것 같다.
물론 아직 직접 써보지 못한 기능들도 많지만... 그건 또 하나씩 경험해보면 되겠지ㅎㅎ