Vite 프로젝트 생성

송기영·2023년 4월 26일

vite 리액트

리액트

목록 보기

3/5

개요

리액트 커뮤니티에 흥미로운 글이 하나 올라왔다.

이는 리액트 프로젝트를 생성할때 Create React App(이하 CRA)을 이용하여 많이 사용했었는데 이제는 CRA는 레거시로 버려지고 Vite를 사용해서 프로젝트로 생성을 한다는 글이었다.

궁금하신 분들은 (번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변을 참고하면 될거같습니다.

글을 요약하자면 글에서는 CRA와 Vite의 차이점, Vite의 장점, 그리고 CRA에서 Vite로의 전환 과정 등에 대해 다루며 결과적으론 Vite를 사용을 권장한다는 내용이다.

공식문서에서도 CRA에 대한 내용이 빠졌다고 한다.

따라서 나도 레거시는 버리고 Vite를 이용해 프로젝트를 생성하려고 한다.

Vite 란?

Evan You가 개발한 빠른 웹 개발 빌드 도구이며 최신 버전의 JavaScript 모듈 시스템을 기반으로 한다.

Just-In-Time(JIT) 컴파일링 방식을 사용하여 개발자들이 더욱 빠르게 개발을 진행할 수 있도록 지원합니다.

Vite는 Vue.js 뿐만 아니라 React, Preact, LitElement 등 다양한 프레임워크를 지원하며, TypeScript, CSS 등 다양한 유형의 파일도 처리할 수 있습니다.

Vite는 빠른 개발 환경과 빌드 속도를 제공하여 개발자들이 효율적으로 개발할 수 있도록 돕습니다.

chatGPT가 대신 답변해줬다. 더 자세한 정보를 원하시면 Vite 공식문서를 확인해보시기 바랍니다.

프로젝트 생성

Vite는 Node.js 14.18+ 또는 16+의 버전을 권장한다고한다. 따라서 Node.js의 버전이 낮을경우 업데이트를 진행해야합니다.

폴더 이동
터미널을 열어서 프로젝트를 생성하고자 하는 위치로 이동한다.

	cd Desktop/study

프로젝트 생성
npm, yarn, pnpm으로 프로젝트 생성이 가능하지만 나는 yarn을 사용해서 프로젝트를 생성했다.
Yarn:
```
	yarn create vite
```
다음 명령어를 입력하면 터미널에 다음과 같은 순서로 안내 문구가 나온다.
- 프로젝트 이름 정하기
```
	Project name : test-vite
```
- 프레임워크 선택하기
```
	Select a framework: > - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelete
    Others
```
- variant(언어?) 선택하기
  여기서 나는 SWC를 선택하였는데 간략하게 SWC는 빌드를 빠르게해주는 Rust기반의 빌드툴이라고 한다.
  자세한 내용은 초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC을 참고하면 된다.
```
  Select a variant : > - Use arrow-keys. Return to submit.
    TypeScript
 >  TypeScript + SWC
    JavaScript
    JavaScript + SWC
```
- 생성 완료
```
  Done. Now run:
	
  cd test-vite
  yarn
  yarn dev
```
템플릿 지정
CRA처럼 템플릿을 지정해서 만드는 방법은 다음과 같이 입력한다.
```
	  yarn create vite test-vite --template react
```