[React/Vite] CRA(Create-React-App) 프로젝트를 Vite 로 변환하기

CRA(Create-React-App)을 Vite로 변환

Vite

1. Vite란?

Vite는 최신 웹 애플리케이션의 개발 환경을 최적화하도록 설계된 최신 빌드 도구 및 개발 서버다. 기본 ES 모듈을 사용하여 시작 시간을 단축하고 핫 모듈을 효율적으로 교체할 수 있으므로 보다 원활하고 빠른 개발 프로세스가 가능하다. Vite는 매우 유연하고 사용자 정의가 가능하므로 프로젝트 구성을 더 많이 제어하려는 개발자에게 매력적인 선택이다. 전반적으로 Vite는 최신 웹 애플리케이션을 더 빠르고 효율적으로 구축하는 것을 목표로 하는 도구다.

https://vitejs-kr.github.io/

Vite

 

---

2. Vite를 써야하는 이유

Vite와 CRA(Create React App)는 모두 React 애플리케이션을 구축하는 데 널리 사용되는 도구이지만 특정 상황에서 Vite를 매력적인 선택으로 만드는 몇 가지 주요 차이점이 있다.

Vite의 주요 장점 중 하나는 CRA에 비해 시작 시간이 더 빠르다는 것입니다. Vite는 최신 브라우저의 기본 ES 모듈 기능을 활용하는 최신 개발 서버를 사용하므로 CRA에서 사용하는 Webpack과 같은 기존 번들러보다 훨씬 빠르게 시작할 수 있다. 이는 특히 재구축 시간이 병목 현상이 될 수 있는 대규모 프로젝트에서 훨씬 더 원활한 개발 환경으로 이어질 수 있다.

또한 핫 모듈 교체(HMR)에 대한 Vite의 지원은 CRA보다 효율적이므로 코드베이스를 변경할 때 더 빠르게 업데이트할 수 있다.

Vite의 또 다른 이점은 유연성이다. CRA는 제한된 구성 옵션으로 미리 구성된 설정을 제공하지만 Vite를 사용하면 프로젝트를 보다 쉽게 ​​사용자 지정할 수 있다. 이는 CRA의 기본 구성이 충족하지 않는 프로젝트에 대한 특정 요구 사항이 있는 경우 특히 유용할 수 있다.

---

3. CRA(Create-React-App)으로 만든 프로젝트를 Vite로 변환하는 법

반응형

3-1. 새 Vite 프로젝트 생성

npm init vite@latest my-react-app --template react-ts

3-2. package.json 복사 및 붙여넣기하고 Install

CRA 프로젝트 내의 `package.json` 파일을 복사하여 Vite 프로젝트의 `package.json`파일로 붙여넣기 합니다. Vite 프로젝트의 의존성 패키지를 설치합니다. 

npm install

3-3. src 디렉토리 내용 복사 및 붙여넣기

CRA 프로젝트에서 src 디렉토리의 내용을 Vite 프로젝트의 src 디렉토리로 복사합니다.

3-4. tsconfig.json을 비교하여 수정하기

CRA 프로젝트의 tsconfig.json과 Vite 프로젝트의 tsconfig.json을 비교하여 수정합니다.

3-5. 개발서버 시작하기

npm run dev

Vite + React 프로젝트

 

---

Vite를 써보니 확실히 CRA를 썼을 때보다 빨라진게 느껴졌고, 코드 변경 후 저장 시 화면에 반영되는것도 빠르다.