[리액트] 리액트 + Vite_🐾

 

[React, Vite_ Proxy]

 

Vite을 이용하여 React를 시작하는 방법에 대해 알아보자

 

---

 

<STUDY>

 

RCA(react-create app)을 사용하여 개발을 하던 중 Type Script를 도입하였더니 컴파일 시간이 조금 느려졌다는 느낌을 받았다.

 

그래서 찾아보니 Vite 이라는 빌드툴을 사용하면 시간이 매우 많이 단축된다는 정보를 알게되었다.

 

 

❓ Vite

 

원래 Vite은 Vue.js를 위한 빌드 툴이었으나 현재는 Vue 뿐만 아니라 React, Svelte, VanilaJS 등 여러 프레임워크들과 사용 가능하다.

 

Vite을 이용하면 얼마나 속도가 빨라지는지 궁금하기도 했고,

무엇보다 rca를 이용하여 개발하는 과정에서, 특히 첫 빌드 시간이 오래걸려 답답했던 시기에 시도해 보게 되었다.

 

Vite은  esbuild 라는 자바스크립트 번들러를 이용하여 종속성 (dependencies)를 미리 번들링 하기 때문에 기존 rca의 webpack을 이용했을 때보다 속도가 10~100배 훨씬 빠르다고 한다.

 

 

🐾 Vite으로 리액트 시작하기

 

1. Vite 설치

npm create vite@latest
or
yarn create vite

 

2. 리액트 프로젝트 생성

npm create vite@latest product-name --template react
or
yarn create vite product-name --template react

 

   💡 타입스크립트로 시작하는 경우 react → react-ts

 

 

3. 프로젝트 실행

cd project-name
npm install
npm run dev

 

     💡 npm install 을 사용하여 필요한 package, library를 설치한다.

 

 

---

 

이렇게 Vite + 리액트로 개발을 시작했다.

 

진행중인 프로젝트가 엄청나게 규모가 큰 프로젝트는 아니어서 엄청난 속도 차이를 느끼지는 못했다.

 

하지만 웹팩과는 조금씩 다른 부분들을 공부하며 두 빌드 툴의 차이를 알아가고 있다.

 

[참고] 시작 명령어는 package.json에서 scripts 부분에서 변경할 수 있다.

ex) "start" : "vite --open" 을 추가하면 [yarn start] 또는 [npm start] 를 통해 시작 가능하다.

"scripts": {
  "start": "vite --open", // 이부분
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview"
},

 

---

<자세한 내용은 Vite 공식문서에서 확인할 수 있습니다.>

 

Vite

 

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview