[WEB] ViteJS란? (TypeScript React 생성하기)

ViteJS

vite는 빠르고 간결한 빌드 도구다.

 

---

 

웹 프로젝트 규모가 계속해서 커짐에 따라 빌드를 하는 시간도 그만큼 길어지고 있다. vite는 이러한 문제를 해결할 수 있는 능력을 가지고 있다. 

 

프랑스어로 빠름을 의미하는 vite는 그 이름에 걸맞게 엄청나게 빠른 빌드 속도를 자랑한다.

지금부터 CRA의 대항마인 vite를 사용하여 React 프로젝트를 생성해보자

 

 

---

 

Vite는 원래 Vue용으로 개발되었지만 React, Svelte 등 거의 모든 웹 프레임워크를 지원하고 있다.

 

Vite가 현재 지원하는 템플릿

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

우리는 오늘 react-ts를 사용할 것이다.

 

 

Vite로 react-ts 생성해보기

# npm 6.x
npm init vite@latest tooo1 --template react-ts

# npm 7+, '--'를 반드시 붙여주세요
npm init vite@latest tooo1 -- --template react-ts

# yarn
yarn create tooo1 --template vue

# pnpm
pnpm create tooo1 -- --template vue

본인이 사용하는 자바스크립트 패키지 매니저를 찾고 터미널을 열고 위 명령어를 입력하자.

 

각자 본인의 자바스크립트 패키지 매니저 명령어로 입력하면 된다. (이 글은 npm 기준)

 

 

입력하고 1초 정도 기다리면 전부 받아진다..ㅋㅋㅋ

그리고 친절하게 알려준 Now run 순서대로 명령어를 입력해주자.

 

 

 

 

cd tooo1

먼저 cd 프로젝트로 이동!

 

 

 

 

 

npm install

그다음 npm install 명령어 입력!!

 

 

 

 

npm run dev

마지막으로 npm run dev를 입력하면 끝!

 

결과 화면

 

 

cra 사용하다 vite를 사용하니 진짜 엄청나게 빠르다.. (여러분들도 체감하실 거예요)

 

 

참고사이트

vite 공식사이트

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!