[React] Create React App대신 Vite로 React 사용하기

 

1. Vite란?

공식문서

Vite

 

Vite는 Vue.js 개발자인 에반 유가 만든 빠른 개발도구로 빠른 속도와 간편한 사용을 중시하는 개발 툴링이다.

또한 ES Module을 지원하고, HRM(Hot Module Replacement)을 지원하기 때문에 일부를 수정하더라도 전체 페이지를 새로고침 하지 않고 변경 사항을 즉시 확인 할 수 있다.

 

 

원래는 Create React App 이라는 도구를 이용해서 별도 구성 없이 쉽고 편리하게 리액트 프로젝트를 시작할 수 있었지만

Webpack의 강한 결속 그리고 빌드 속도가 느리다는 것과 커스텀이 어렵다는 것,

그리고 현재 React 18 버전의 호환말고는 업데이트가 되고 있지 않다.

https://github.com/facebook/create-react-app/releases

 

2. Vite 프로젝트 만들기

$ npm create vite@latest 폴더명 -- --template react
$ yarn create vite 폴더명 --template react

타입스크립트
$ npm create vite@latest 폴더명 -- --template react-ts

 

터미널에 입력 후 생성이 됐다면 위 명령어가 나오는데

cd 폴더명 입력 후 npm i로 설치해주고 해당 폴더로 들어가보면 아래처럼 Boiler Plate가 생성이 된다.

 

3. Vite 시작하기

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
 },

 

실행할 땐 npm run dev 명령어를 입력해주면 빠르게 실행할 수 있다.