[React] Vite를 사용해서 React 프로젝트 생성 및 실행

 

 

 

 

 

 

 

 

 

 

 

 

 

 

그림 1. Vite

 

 

Vite 란?

현재 CRA의 지원이 중단되었고 여러 가지 대체 프레임워크가 추천된다.

 

Vite(비트)는 프로젝트를 CSR(Client Side Rendering)로 생성해주는 ESbuild 기반의 빌드 툴이다.

 

Native ESM을 지원하기 때문에 빠른 HMR(Hot Module Replacement)을 지원한다.

 

ESM을 이용해서 전체 코드를 번들링하지 않고 수정된 모듈만을 반영한 뒤 요청이 오면 해당 모듈만 전달한다.

 

그림 2. 기존 JavaScript의 번들링

그림 3. ESM을 이용한 vite의

 

그러나 CSR로 동작하기 때문에 SEO에 약하다는 단점이 있다.

 

SEO를 우선시 하는 사이트에서는 Next.js 및 Remix 같은 대체 프레임 워크의 사용을 권장하고 있다.

 

하지만 클라이언트 사이드 핸들링만을 하는 경우에는 Vite 또는 Parcel 사용을 권장하고 있다.

 

 

Vite로 프로젝트 생성하기

npm, yarn, pnpm, bun 을 사용해서 프로젝트를 생성한다.

# npm
> npm create vite@latest

# yarn
> yarn create vite

# pnpm
> pnpm create vite

# bun
> bun create vite

 

프로젝트의 이름이나 사용하려는 템플릿을 직접 지정해서 생성할 수도 있다.

# npm, '--'를 만드시 붙여야한다.
> npm create vite@latest 프로젝트명 -- --template 템플릿

# yarn
> yarn create vite 프로젝트명 --template 템플릿

# pnpm
> pnpm create vite 프로젝트명 --template 템플릿

# bun
> bun create vite 프로젝트명 --template 템플릿

 

create-vite에서 생성할 수 있는 템플릿은 다음과 같다.

> vanilla
> vanilla-ts
> vue
> vue-ts
> react
> react-ts
> react-swc
> react-swc-ts
> preact
> preact-ts
> lit
> lit-ts
> svelte
> svelte-ts
> solid
> solid-ts
> qwik
> qwik-ts

 

 

프로젝트 생성 및 접속

react-ts 명령어로 create vite 프로젝트를 해준 후 프로젝트를 실행했다.

> yarn create vite vite-project-rct --template react-ts
> yarn
> yarn dev

 

CRA는 'start'로 프로젝트를 실행했지만 vite는 기본적으로 'dev'로 프로젝트를 실행시킨다.

 

프로젝트 실행 시 기본 포트는 5173번으로 설정되어있다.

 

포트를 바꿔서 실행하고 싶으면 다음 명령어로 프로젝트를 실행해주면 된다.

> yarn dev --port 3000

 

프로젝트를 생성한 후 실행되는 기본 화면은 다음과 같다.

그림 4. vite 프로젝트 생성 및 실행

 

다른 명령어 없이 dev로 실행할 경우 로컬에서만 접속이 가능하고 외부 접속이 불가능하다.

 

만약 외부 접속을 원한다면 다음과 같은 명령어로 프로젝트를 실행해주면 된다.

> yarn dev --host --port 3000

 

 

참고 사이트

https://ko.vitejs.dev/guide/why.html

Vite

 

https://frontdev.tistory.com/202

React의 미래: Create React App(CRA) 대신 Vite를 사용하자