Vite로 리액트 프로젝트 시작하기

Vite + 리액트

create react app 지원이 중지되었기에, 다른 방식으로 프로젝트를 만드는 것을 추천한다. 방법은 많다. 그중에서 Vite를 이용해서 리액트 프로젝트를 빌딩 하는 방법을 작성하고자 한다.

(create react app 지원 중단 관련 글)

---

왜 쓰는가?

이유는 되게 간단하다. 프로젝트가 커져도 빠른 속도를 유지해주기 때문이다.

작은 프로젝트에서는 잘 못 느낄 수 있지만, 프로젝트가 커지면 npm start시 "미리 보기" 서버를 여는 속도가 매우 늦어진다. (심하면 '분' 단위까지 늘어날 수 있음.) 그리고 코드를 수정하고 저장하고 반영하는 속도도 느려진다.

이런 부분을 방지하기 위함이다.

---

Vite 설치하기

아래와 같은 명령어를 입력하여 설치할 수 있다.
Vite를 사용하기 위해서는 14.18+, 16+의 Node.js를 요구하며 템플릿에 따라 더 높은 버전의 Node.js를 요구할 수도 있다.

npm create vite@latest

yarn create vite

이런 식으로 빌딩하면 프롬프트에 메시지들이 출력된다. 그 메시지에 따라서 세팅하면 된다.

---

템플릿 생성하기

혹은 직접 템플릿을 지정해줄 수 있다.

React로 작성을 할 것이기 때문에 템플릿 명으로 react를 작성하면 된다.
TypeScript의 경우 템플릿-ts를 붙여 작성하게 된다.

# npm 7+ (ex)
npm create vite@latest ${디렉터리 명} -- --template ${템플릿 명}

# jsx
npm create vite@latest vite-test -- --template react

# tsx
npm create vite@latest vite-test -- --template react-ts

---

Vite 실행

npm run dev

---

관련 글

공식 문서 >

https://ko.vite.dev/guide/

Vite

(리액트 프로젝트 예시)

https://stackblitz.com/edit/vitejs-vite-pcmm8rzj?file=src%2FApp.jsx&terminal=dev

Vitejs - Vite (forked) - StackBlitz

(코딩애플)

https://youtu.be/iX3Nu1FcZKA?si=--xcUOlEdHjOVaw6

---