🚀 React 빌드 도구 비교: Vite vs CRA

📌 1. React Vite란?

Vite는 빠르고 가벼운 프론트엔드 빌드 도구로, 빠른 개발 환경과 최적화된 번들링을 제공합니다. React 프로젝트에서 Vite를 사용하면 애플리케이션을 빠르게 실행하고 빌드할 수 있으며, 코드 변경 사항이 즉시 반영되는 HMR(Hot Module Replacement) 기능을 지원합니다.

Vite의 주요 특징

⚡️ 빠른 개발 서버
- 모듈을 ESM(ECMAScript Modules) 형식으로 제공
- 필요한 모듈만 즉시 로드하여 매우 빠른 개발 환경 제공
🔥 Hot Module Replacement (HMR)
- 코드 변경 사항을 즉시 반영하여 브라우저 새로고침 없이 UI 업데이트 가능
🚄 빠른 번들링
- Esbuild를 사용하여 번들링 속도를 크게 향상

📌 2. Create React App (CRA)란?

Create React App (CRA) 는 React 프로젝트를 쉽게 시작할 수 있게 도와주는 CLI 도구입니다. 복잡한 설정 없이 바로 React 프로젝트를 시작할 수 있도록 Webpack과 Babel 기반의 기본 설정을 제공합니다.

💡 CLI (Command Line Interface)명령어 기반 인터페이스로, 사용자가 텍스트 명령어를 입력하여 프로그램을 실행하고 제어하는 방식입니다. GUI(그래픽 사용자 인터페이스)와 달리 텍스트 명령어로 프로그램 조작이 가능합니다.

CRA의 주요 특징

📦 Webpack 기반
- 내부적으로 Webpack으로 애플리케이션 번들링, Babel로 최신 자바스크립트 문법 변환
🔧 기본 설정 제공
- 복잡한 초기 설정 없이 바로 프로젝트 시작 가능
⚛️ React 개발 환경 제공
- 별도의 추가 설정 없이 기본적인 React 앱 환경 구축 가능

CRA PWA

npx create-react-app 프로젝트명 --template cra-template-pwa-typescript