React에서 CRA보다 Vite가 좋다고? - 시작하기

들어가기 전에

Vite는 프랑스어로 빠르다를 의미합니다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

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

vite는 기본적으로 최적화된 설정을 제공하지만, Plugin API 또는 Javascript API를 사용할 수 있습니다. 물론, 타입스크립트도 지원합니다.

지원하는 브라우저

기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.meta를 지원하는 브라우저를 타깃으로 빌드를 수행합니다. 레거시 브라우저는 https://github.com/vitejs/vite/tree/main/packages/plugin-legacy 플러그인을 통해 지원이 가능합니다.

첫 Vite 프로젝트 만들어보기

💡 호환성
Vite는 버전 14.18+ 또는 16+의 Node.js를 요구합니다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수도 있습니다.

// npm
$ npm create vite@latest

// yarn
$ yarn create vite

이후에는 프롬프트 창에 출력된 메시지를 따라주세요.

물론 프로젝트 이름이나 템플릿을 지정해 프로젝트를 만들 수 있습니다. 가령, Vite를 이용해 React 프로젝트를 만들고자 한다면

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

이와 같이 지정할 수 있습니다.

이 외에도 다양한 템플릿에서 지원 가능합니다. (vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelt, svelt-ts)

index.html 그리고 프로젝트 루트

만들어진 Vite 프로젝트를 유심히 보면 index.html 파일이 public이 디렉터리가 아닌 루트에 위치해 있다는 것을 발견할 수 있습니다. 의도적으로 이렇게 위치시킨 것인데, 추가적인 번들링 과정 없이 index.html 파일이 앱의 진입점이 되게끔 하기 위함입니다.

Vite는 index.html 파일을 소스 코드이자 자바스크립트 모듈 그래프를 구성하는 요소 중 하나로 취급하고 있습니다. 추가적으로, Vite는 index.html 내에 존재하는 URL에 대해 %PUBLIC_URL%과 같은 placeholder 없이 사용할 수 있도록 URL 베이스를 자동으로 맞춰줍니다.

Vite는 정적 HTTP 서버와 비슷하게 루트 디렉토리라는 개념을 가지고 있습니다. 향후 <root>라는 이름으로 문서 내에서 보게 되는데, 이는 Absolute URL을 프로젝트 루트를 가리키게끔 함으로써 일반적인 정적 파일 서버와 동일하게 코드를 작성할 수 있게 됩니다. 또한 Vite는 프로젝트 루트 외부에서도 디펜던시를 가져올 수 있게 구현했는데, 이를 사용하면 모노리포 구성 등 다양한 작업이 가능합니다.

또한 Vite는 여러 .html 파일을 앱의 진입점으로 하는 Muti-page apps를 지원하고 있습니다.

프로젝트 루트 지정

vite는 개발 서버를 시작할 때 현재 위치에 있는 디렉터리를 프로젝트 루트로 가정하고 동작합니다. 만약 특정 디렉토리를 지정해 프로젝트 루트로 동작하게 하고 싶다면, vite serve some/sub/dir 명령으로 vite를 시작하면 됩니다.

커맨드 라인 인터페이스

vite가 설치된 프로젝트는 vite 명령을 통해 바로 Vite를 실행할 수 있습니다.(npx vite를 이용해도 됩니다.) 기본적으로 Vite에서 제공하는 npm 스크립트는 아래와 같습니다.

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

Vite CLI와 함께 --port, --https 와 같은 옵션을 사용할 수 있습니다. 모든 옵션을 보려면, npx vite --help 명령을 실행하세요.