React 개발 환경

⚙️ React 개발 환경 설정: Vite vs CRA

React 프로젝트를 시작하려면 먼저 개발 환경을 설정해야 합니다. 현재 가장 많이 사용되는 방법은 Create React App(CRA)과 Vite입니다. 각각의 특징과 설치 방법을 비교해 보겠습니다.

1. Create React App (CRA)

CRA는 Facebook에서 공식 제공하는 React 프로젝트 초기 설정 도구입니다. 번들링, 개발 서버, 빌드 설정 등이 자동으로 구성됩니다.

🛠 CRA 설치 방법

npx create-react-app my-app
cd my-app
npm start
  

📌 CRA 특징

• 설정 없이 바로 개발 가능
• 초보자에게 적합
• 웹팩(Webpack) 기반
• 프로젝트 크기가 커지고 느림

2. Vite

Vite는 CRA보다 훨씬 빠른 번들러로, ES 모듈 기반으로 동작하여 개발 서버 시작 속도와 HMR(핫 모듈 교체)가 매우 빠릅니다.

⚡ Vite 설치 방법

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

📌 Vite 특징

• 매우 빠른 개발 서버
• 간결하고 가벼운 설정
• 최신 브라우저에 최적화
• TypeScript, Vue, Svelte 등도 쉽게 적용 가능

3. 비교 요약

항목	CRA	Vite
초기 설정	완전 자동	간단한 템플릿 선택
속도	느림	매우 빠름
번들러	Webpack	Vite 자체 + Rollup
학습 난이도	매우 쉬움	쉬움

📍 추천

- 초보자이거나 공식 문서 기반으로 학습하고 싶다면 CRA
- 빠른 개발 환경과 최신 기술을 활용하고 싶다면 Vite를 추천합니다.