React 빌드 도구 비교: 왜 Vite가 대세인가?" 🚀

kwonowk·2025년 2월 28일

왜 Vite인가?

React 프로젝트를 만들 때 create-react-app(CRA)만 있는 게 아니라 Vite, Next.js, Parcel, Snowpack 같은 다양한 빌드 도구를 사용할 수 있습니다. 각각의 장점과 차이를 알아봅시다.

✅ Vite의 장점 설명

빠른 개발 서버
기존 번들러(CRA)는 모든 파일을 한 번에 변환하고 서버를 시작하지만, Vite는 ES 모듈(ESM) 기반으로 동작해 필요한 파일만 즉시 변환해서 로드함. 덕분에 서버 실행 속도가 매우 빠름.

📌 비유: CRA는 도서관에서 모든 책을 한 번에 복사해서 나눠주는 방식이라면, Vite는 요청할 때만 필요한 페이지를 바로 가져다주는 방식임.
빠른 빌드 속도
Vite는 esbuild라는 초고속 번들러를 사용함. esbuild는 Go 언어로 만들어져 있어서, 기존 JavaScript 기반 번들러(Webpack)보다 10~100배 빠르게 코드 변환(트랜스파일링)이 가능함.

📌 비유: Webpack이 수작업으로 종이 문서를 타이핑해서 만드는 방식이라면, esbuild는 스캐너로 즉시 디지털화하는 방식이라고 볼 수 있음.
HMR(Hot Module Replacement) 성능 우수
HMR은 코드 변경 시 전체 페이지를 새로고침하지 않고 수정된 부분만 즉시 반영하는 기능임. Webpack 기반의 CRA도 HMR을 지원하지만, Vite는 변경된 모듈만 바로 적용하므로 속도가 훨씬 빠름.

📌 비유: CRA는 옷을 한 벌 다 갈아입어야 하지만, Vite는 부분적으로 필요한 부분만 교체하는 방식임.
플러그인 확장성
Vite는 Rollup을 기반으로 하므로 이미 잘 만들어진 Rollup 플러그인 생태계를 그대로 활용할 수 있음. 덕분에 빌드 과정에서 최적화, 코드 변환, 다양한 기능 확장이 가능함.

📌 비유: Vite는 이미 인기 있는 Rollup 마켓에서 다양한 확장팩을 가져다 쓸 수 있는 게임 같은 느낌.

❌ Vite의 단점 설명

지원 브라우저 제한
Vite는 ES 모듈(ESM)을 지원하는 최신 브라우저에서만 동작함. Internet Explorer(IE)처럼 오래된 브라우저에서는 ESM을 지원하지 않기 때문에, Vite 프로젝트를 실행할 수 없음.

📌 비유: 최신 앱이 오래된 핸드폰에서 실행되지 않는 것과 비슷한 개념.
생태계가 CRA보다 상대적으로 작음
CRA는 오랫동안 React 공식 추천 방식이었기 때문에 많은 자료와 강의가 존재하지만, Vite는 비교적 최근에 인기를 끌면서 아직 CRA만큼 압도적인 생태계를 갖추진 못함. 하지만 현재 빠르게 성장 중이라 이 문제는 점점 해결되고 있음.

📌 비유: CRA는 오래된 대형 마트, Vite는 요즘 뜨는 핫한 편집숍. 아직 매장 수는 적지만, 트렌디하고 성장 가능성이 큼.

React 프로젝트 빌드 도구 비교

빌드 도구	특징	장점	단점
Vite	최신 빌드 도구, ES 모듈 기반	빠른 속도, HMR 성능 우수, 경량	오래된 브라우저 지원 부족
CRA (Create React App)	전통적인 React 프로젝트 설정 도구	쉬운 설정, 익숙한 환경	느린 빌드 속도, 번들 크기 큼
Next.js	서버 사이드 렌더링(SSR) 지원	SEO 최적화, 정적/동적 페이지 지원	SSR 필요 없으면 무거울 수 있음
Parcel	설정 없이 바로 사용 가능, 빠른 번들링	Zero-config, 빠른 빌드	확장성이 낮음, 생태계 작음
Snowpack	ES 모듈 기반 빠른 개발 환경	빠른 개발 서버, HMR 우수	번들링 기능 부족, 유지보수 어려움