[React] CRA 지원중단, Vite로 프로젝트 시작하는 방법

2025년 2월 14일부터 React에서 Create-react-app을 더이상 사용하지않고 기존앱에서 프레임워크로 마이그레이션하거나

Vite, Parcel, RSBuild와 같은 빌드도구로 마이그레이션하도록 권장하고 있다고해요.

아직까지  CRA(create-react-app) 로 react프로젝트 생성은 가능하나 굳이 권장하지않는데 사용하는것보다 권장하는 방식으로 프로젝트 생성을 하는 것이 좋다고합니다.

오늘은 빌드도구중 하나인 Vite로 React 개발환경을 구성하는 방법에 대해 알아보려고합니다.

 

react cra중단 vite로 개발환경구성

 

 

 

​

 

  1. Vite란?

 

Vue.js 또는 React 프로젝트를 위한 빠르고 간단한 빌드 도구입니다.

Vite는 모던 브라우저에서 웹 애플리케이션을 더 빠르게 실행하기 위해 개발 되었습니다.

Vue 창시자 에반 유가 만들었으며 자바스크립트 네이티브 모듈을 기반으로 한 데브 서버 입니다.

웹팩을 사용할때보다 훨씬 더 빠르게 개발하고 배포가 가능합니다.

 

​

 

  2. Vite 가 CRA(create-react-app)보다 빠른이유

 

CRA는 Javascript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 

코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 

위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다. 

 

 

​

 

  3. Vite로 React 프로젝트 생성하기

 

 

1. crate react app 명령어 대신 아래 명령어로 생성합니다.

npm create vite@latest 프로젝트명 --template react

 

 

2. select a framework

원하는 프레임워크 선택하면됩니다.  react 프로젝트를 생성할거라 React를 선택했습니다.

 

3. select a variant 

javascript를 선택했는데 Typescript 등도 지원합니다.

 

4. 코드편집기로 이동하여 node_modules 설치

npm install

 

npm run dev

프로젝트를 실행해보면 초기 세팅이 완료되었음을 볼 수 있습니다.