React – React 시작하기 – 개발 환경 설정 – 1 – create-react-app과 Vite 비교
안녕하세요 여러분! 😊
오늘은 React 프로젝트를 시작할 때 가장 많이 쓰이는 두 가지 방식인 create-react-app(CRA) 과 Vite를 비교해보는 시간을 가져볼게요.
이건 마치 자동차를 구입할 때 연비와 옵션, 가격을 비교하는 것처럼 개발 도구의 특성을 잘 알고 선택해야 훗날 후회가 없답니다! 특히 성능과 사용 편의성 측면에서 두 도구는 각자 장점과 단점이 뚜렷하니, 어떤 상황에서 어떤 도구를 쓰는 게 좋을지 함께 알아볼까요?
1. create-react-app(CRA)란?
CRA는 **Facebook(메타)**에서 만든 React 공식 프로젝트 생성기예요.
npx create-react-app my-app- 복잡한 설정 없이 바로 프로젝트 생성 가능
- 내부적으로 Webpack, Babel 등을 포함
- 보일러플레이트 코드가 꽤 많음
👉 초보자에게 아주 친절하고, 표준적인 구조를 가지고 있어서 입문용으로 적합해요.
2. Vite란?
Vite는 에반 유(Evan You) 가 만든 차세대 프론트엔드 빌드 도구로, 기존 번들러의 속도 문제를 해결하기 위해 만들어졌어요.
npm create vite@latest- 개발 서버가 번개처럼 빠름 ⚡
- 모듈 기반으로 작동, HMR(Hot Module Replacement)이 즉각적
- React 외에도 Vue, Svelte 등 다양한 프레임워크 지원
👉 최근엔 CRA 대신 Vite를 사용하는 추세가 점점 많아지고 있어요!
3. 속도 비교: CRA vs Vite
🚀 개발 서버 기동 속도
| 항목 | CRA | Vite |
|---|---|---|
| 개발 서버 시작 시간 | 느림 (수 초 이상) | 거의 즉시 (1초 이내) |
| 코드 변경 시 반영 속도 | 느림 (수 초) | 즉시 반영 (HMR 강력) |
CRA는 Webpack을 사용하기 때문에 파일을 처음부터 빌드하느라 시간이 오래 걸려요. 반면, Vite는 ES 모듈 기반으로 필요한 파일만 로딩해서 엄청 빠르게 반응하죠.
4. 프로젝트 생성 및 구조 차이
📁 CRA 기본 구조
my-app/
├── public/
├── src/
│ ├── App.js
│ └── index.js
├── package.json자동으로 ESLint, Webpack, Babel 등 다양한 설정이 들어가 있어요. 초보자에겐 좋지만, 내부 설정을 건드리기가 어려워요.
CRA는 “숨겨진 Webpack 설정”이 있어, 커스터마이징 하려면
eject해야 하는데 되돌릴 수 없어요 😥
📁 Vite 기본 구조
vite-app/
├── index.html
├── src/
│ ├── App.jsx
│ └── main.jsx
├── vite.config.jsVite는 설정이 아주 간결하고, 직접 설정 파일이 노출돼 있어 커스터마이징이 쉬워요.
5. 번들링 방식
| 항목 | CRA (Webpack) | Vite (ESBuild + Rollup) |
|---|---|---|
| 번들링 | 처음부터 전체 빌드 | 변경된 모듈만 필요 시 처리 |
| 빌드 속도 | 느림 | 빠름 |
| 트리쉐이킹 | 있음 | 있음 (더 빠름) |
Vite는 ESBuild를 이용해 개발 서버를 돌리고, 빌드할 땐 Rollup을 이용해서 생산용 번들을 만들어줘요. 즉, 개발 속도는 빠르고, 결과물도 최적화된 형태로 나와요.
6. CSS/Assets 처리 방식
- CRA는 기본적으로 CSS 파일을 전역으로 인식하고, 모듈 사용 시
.module.css로 구분해야 해요. - Vite는 PostCSS, Sass, Tailwind CSS 같은 도구를 쉽게 통합할 수 있어요.
또한, Vite는 import img from './image.png' 같은 리소스도 모듈처럼 쉽게 다룰 수 있어요!
7. TypeScript 지원
둘 다 TypeScript를 지원하지만, Vite가 훨씬 간편하게 설정돼 있어요.
npm create vite@latest
# → 템플릿에서 "react-ts" 선택반면, CRA는 이렇게 사용해야 하죠:
npx create-react-app my-app --template typescript8. Vite 사용 예시
간단한 React 앱을 Vite로 시작하려면:
npm create vite@latest
# 프레임워크 선택: React
# Variant: JavaScript or TypeScript
cd my-app
npm install
npm run dev개발 서버가 자동으로 http://localhost:5173에 열리고, 수정하면 즉시 반영돼요.
9. 커뮤니티와 안정성
| 항목 | CRA | Vite |
|---|---|---|
| 안정성 | 매우 안정적, 널리 사용됨 | 빠르게 성장 중, 충분히 안정적 |
| 커뮤니티 | 매우 큼 | 활발하고 성장 중 |
| 유지보수 | 공식 Meta에서 유지 중 | 오픈소스, 커뮤니티 주도 (Vite는 빠르게 업데이트됨) |
어떤 걸 선택해야 할까요?
| 상황 | 추천 도구 |
|---|---|
| React를 처음 배우고, 공식 방식을 따라가고 싶다면 | CRA |
| 빠른 빌드 속도, 최신 개발 환경을 원한다면 | Vite |
| TypeScript, Tailwind 등과 쉽게 통합하고 싶다면 | Vite |
| 대규모 프로젝트가 아닌 개인 프로젝트, 포트폴리오 | Vite |
| 기업/팀 단위의 보수적인 운영 | CRA 또는 Next.js 권장 |
주의해야 할 점 정리
| 주의사항 | 설명 |
|---|---|
| CRA에서 설정 변경이 어렵다 | eject를 하면 되돌릴 수 없으므로 신중해야 함 |
| Vite는 일부 오래된 브라우저에서 ESBuild 문제 가능성 | Babel이 기본 내장되어 있지 않기 때문에 구버전 호환이 필요하면 별도 설정 필요 |
| 두 도구의 구조가 다르다 | 문서나 튜토리얼을 볼 땐 사용 중인 도구 기준으로 확인 |
마무리하며
React 생태계에는 다양한 도구가 존재하지만, 그 중 create-react-app과 Vite는 출발점으로 가장 많이 선택되는 두 축이에요.
CRA는 “정석” 같고,
Vite는 “혁신” 같아요.
🚀 빠르게 성장하는 최신 도구의 편리함을 경험하고 싶다면 Vite,
📘 전통과 안정성을 갖춘 교육/실무 표준을 따르고 싶다면 CRA를 선택해보세요!
다음 글에서는 폴더 구조 이해하기로 이어지며, 실제 프로젝트 구성 요소들을 낱낱이 살펴볼게요! 🧩