24.07.12 Vite로 리액트 프로젝트 생성하기

기존에 CRA로 리액트 프로젝트를 생성하려면 수십초가 걸렸었다. 하지만 vite를 사용하면 다르다!

CRA와 Vite의 프로젝트 생성속도차이

vite가 오래 걸린것으로 보이지만, 직접 프로젝트 명과 프레임워크(라이브러리)를 지정하면 엄청나게 빠르다.

지정 후 생성속도(vite)

 

엔터를 누르면 프로젝트가 생성되어있다. 정말 생각지도 못한 속도... 프로젝트 폴더 삭제 또한 빠르다.

CRA는 초기 설정을 포괄적으로 잡은 반면, vite는 필수요소만 설치하여 빠른 것이다.

또한 필요없는 파일이 없으므로 삭제도 빠르다.

 

 

Vite

 

1. 프로젝트 생성하기

yarn create vite

yarn create vite 프로젝트명 --template 사용할프레임워크(라이브러리)

//ex 리액트 프로젝트 생성
yarn create vite vite-react-prac --template react

//ex 리액트 타입스크립트 프로젝트 생성
yarn create vite vite-react-ts-prac --template react-ts

템플릿을 지정하지 않으면 cmd에서 폴더명 입력을 요구하고, 원하는 프레임워크(라이브러리)를 선택하도록 한다.

 

2. vite 프로젝트에 yarn 설치

vscode로 해당 폴더를 들어가거나, cmd에서 해당 폴더로 이동후에 yarn을 설치한다.

yarn

 

3. 실행

해당 폴더에서 cmd나 터미널에 입력하여 잘 실행되는지 확인한다.

yarn dev

터미널

해당 링크를 직접 입력하거나 컨트롤 클릭하면 웹페이지가 나온다

초기 페이지

속도에 매우 놀랐다...