[React] Vite 사용하기!

Vite란?

Vite는 공식문서에 따르면 프랑스어로 "빠르다"를 의미하며,
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞추어서 탄생한 빌드

• 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다.(e.g. Hot Module Replacement)
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다.
  이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.

Create React App대신 Vite를 사용하는 이유?

우선 CRA는 자바스크립트 코드로 구성된 툴인 Webpack을 사용합니다.
자바스크립트는 기본적으로 interpreted 언어이기 때문에 느립니다.
코드의 양이 적다면 차이를 느끼기 어려울 수도 있지만, 처리해야 할 코드 양이 방대한 경우에는 그 단점이 확실히 느껴질 겁니다.
그래서 개발자들은 위와 같은 단점을 해결하기 위해 Go와 같은 저급언어(low-level language)를 활용하여 자바스크립트 툴을 창조하였고, 그렇게 해서 생겨난 게 Esbuild이며 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 된 것 입니다.

Vite가 지원하는 템플릿

• vanilla
• vue
• react
• preact
• lit
• svelte

Vite 프로젝트 만들기

Vite를 사용하기 위해서는 호환성 문제 때문에 Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구합니다.
다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있습니다.

$ npm create vite@latest
$ yarn create vite

위의 코드를 입력하여 Vite를 설치하고 이후에는 프롬프트 창에 출력된 메시지를 따라주면 됩니다.
그러면 다음과 같이 폴더가 생깁니다.

물론 프로젝트의 이름이나 템플릿을 지정해 프로젝트를 만들 수도 있습니다.
예를들어 Vite를 이용해 React + TypeScript 프로젝트를 만들자고 한다면 다음과 같이 작성을 할 수 있습니다.

# npm 6.x
npm create vite@latest [프로젝트 명] --template react-ts

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest [프로젝트 명] -- --template react-ts

# yarn
yarn create vite [프로젝트 명] --template react-ts

# pnpm
pnpm create vite [프로젝트 명] --template react-ts

Vite 시작하기

기본적으로 Vite에서 제공하는 명령어는 다음과 같습니다.

{
  "scripts": {
    "dev": "vite", // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
    "build": "vite build", // 배포용 빌드 작업을 수행합니다.
    "preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
  }
}

저는 yarn으로 작업을 해보았기 때문에 다음의 명령어로 개발서버의 화면을 띄었습니다.

$ yarn dev or yarn vite(개발 서버 실행)

참고

Vite - 공식문서
[React] Vite를 사용해보자
왜 Create React App 대신 Vite일까