CRA(Create React App)와 Vite

Hanso·2024년 5월 28일

목적 : CRA와 Vite의 차이점에 대해서 공부하고 싶어서!

주요 차이점

속도

Vite: ES 모듈을 사용하여 매우 빠른 개발 서버를 제공합니다. 개발 중에는 필요한 파일만 즉시 번들링하고, 변경된 파일만 다시 로드하므로 빌드와 핫 리로딩 속도가 빠릅니다.
CRA: Webpack을 사용하여 개발 서버를 제공하며, 전체 프로젝트를 번들링하기 때문에 초기 빌드 시간이 비교적 길 수 있습니다.
번들링 방식

Vite: Rollup을 기반으로 하여 빌드를 수행하며, ES 모듈을 기본적으로 사용합니다.
CRA: Webpack을 사용하여 프로젝트를 번들링합니다.
설정 유연성

Vite: 기본 설정이 간단하며, 필요한 경우 쉽게 확장하거나 수정할 수 있습니다.
CRA: 기본 설정은 대부분의 경우 충분하지만, 설정을 변경하려면 eject 명령을 사용하여 설정 파일을 직접 수정해야 합니다.

기능

Vite: 최신 JavaScript 기능을 빠르게 사용할 수 있으며, 빠른 개발 서버와 효율적인 빌드 시스템을 제공합니다.

CRA: 다양한 기능과 설정이 포함되어 있으며, 널리 사용되는 안정적인 도구입니다.

Vite를 사용한 React 프로젝트 설정 예시

1. 프로젝트 생성

Vite를 사용하여 새로운 React 프로젝트를 생성합니다.

npm create vite@latest my-vite-app --template react
cd my-vite-app

2. 패키지 설치

프로젝트 디렉토리로 이동한 후, 필요한 패키지를 설치합니다.
npm install

3. 프로젝트 구조

Vite를 사용한 프로젝트의 기본 구조는 다음과 같습니다.

my-vite-app
├── node_modules
├── public
│   ├── index.html
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── main.jsx
├── package.json
├── vite.config.js
└── README.md