항상 CRA(Create React App) 으로 리액트 프로젝트를 생성하곤 했었는데, 요즘 주변 개발자들이 Vite로 생성을 많이 하는 것 같아서 Vite 경험도 해보고 CRA 와 비교해서 어떤 점이 좋은지 알아보는 시간을 갖게 되었당 ㅋ
먼저 프로젝트 생성 방법은(yarn 기준)
1. 터미널에서 명령어 실행.
- yarn create vite [app name] --template react 또는
- yarn create vite [app name] --template react-ts (ts 사용하시는분)2. 해당 프로젝트로 이동
cd [app name]3. 의존성 설치
yarn4. 개발 서버 실행
yarn dev일단 여기까지 진행하면 프로젝트 생성은 완료 된건데, 일단 CRA로 생성하는 것 보다 확실히 빠른게 체감되는 것 부터 벌써 좋음..
그래서 Vite가 CRA 보다 좋은점을 지피티한테 물어봤음 ㅎ
🚀 1. 개발 서버 속도가 훨씬 빠름
- CRA는 웹팩을 사용하기 때문에 프로젝트가 커지면 커질수록 속도가 느려짐
- 하지만 Vite는 ESM 기반의 개발서버를 사용해서 필요한 파일만 로드하기 때문에 초기 로딩 속도가 CRA 보다 훨씬 빠름.
⚡ 2. 빠른 HMR(Hot Module Replacement)
- CRA는 변경된 코드를 반영할 때 전체 앱을 다시 번들링하기 때문에 속도가 느림
- Vite는 HMR이 최적화되어 있기 때문에, 코드 수정 시 즉시 변경 사항을 반영할 수 있음.
🏗 3. 빌드 속도가 더 빠름
- CRA 는 웹팩, Vite는 Rollup 기반으로 빌드속도가 웹팩에 비해 겁나 빠름
📦 4. 번들 크기가 더 작음
- CRA 는 웹팩을 사용하기 때문에 번들 크기가 겁나 큼
- Vite 는 ES Modules 기반으로 동작하고 최신 브라우저에서 바로 사용할 수 있는 최적화된 코드를 생성해서 번들 크기가 작아짐.
🔧 5. 설정이 간편함
- vite 는 vite.config.js 를 통한 간편한 설정이 가능.
🏆 결론: 왜 Vite를 써야 할까?
✅ 개발 서버 속도가 CRA보다 훨씬 빠름
✅ HMR(핫 모듈 교체) 성능이 뛰어나서 개발할 때 빠르게 반영됨
✅ 번들 크기가 작고 빌드 속도가 빠름
✅ 설정이 간편하고 유지보수하기 쉬움
✅ React뿐만 아니라 다양한 프레임워크에서 사용 가능
이 정도면 CRA 사용하는 사람은 그냥 이제 바보라는건가 ? 아무튼 좋은게 좋은거니까 vite 로 넘어가자 다들 !
