[React] Vite로 react 프로젝트 시작하기

728x90

Vite란?

Vite 공식 사이트에 의하면 Vite는 차세대 프론트엔드 툴로 빠른 개발 서버와 빠른 번들링을 제공한다고 소개하고 있다. 특히 Vite는 개발 환경에서 모듈을 ES Module 방식으로 로드하기 때문에 새로고침 속도가 빠르고 빌드 시간이 짧다는 장점이 있다. 이 외에도 여러가지 장점이 존재하여 최근 리액트 프로젝트는 CRA(Create-React-App)이 아닌 Vite를 사용하는 편이다.

CRA에서 Vite를 지향하는 이유?

CRA에서 Vite를 지향하는 이유에 대해 알아보기 위해 둘의 차이점을 비교해본다면 아래와 같다.

아래 예시 외에도 Vite를 사용하는 이유는 다양하기 때문에 프로젝트를 시작하기 전에 vite 공식 페이지를 참고하는 것도 좋은 방법이다.

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

더 빠른 개발 서버

CRA는 Webpack을 빌드 도구로 사용한다. Webpack은 프로젝트의 모든 모듈을 한 번에 번들링한 후 개발 서버를 시작하기 때문에 프로젝트가 커질수록 초기 서버 시작 시간과 새로고침 시간이 점점 느려진다.

Vite는 ESModules를 기반으로 작동하며 번들링 없이 모듈을 바로 브라우저에서 로드한다.

개발 서버를 실행할 때 Vite는 전체 프로젝트를 번들링하지 않고 필요한 파일만 서버에서 제공하므로 서버 시작 속도가 매우 빠르다.

핫 모듈 교체(HMR) 성능도 Vite가 CRA보다 훨씬 빠릅니다. Vite는 변경된 파일만을 다시 로드하는 방식으로 수정된 코드가 즉시 반영돤다. 반면 CRA는 Webpack의 복잡한 번들링 구조 때문에 더 느린 경우가 많다.

더 빠른 빌드 성능

CRA는 Webpack을 사용하여 모든 파일을 하나로 번들링한다.

이는 프로젝트가 클 경우 빌드 시간이 매우 길어지며 특히 코드 분할이 잘 되어 있지 않다면 초기 로딩 시간도 길어질 수 있다.

Vite는 Rollup을 사용하여 프로덕션 빌드를 진행하며 빌드 과정에서 ESM 기반 코드 분할을 자동으로 처리한다.

Vite의 빌드 프로세스는 매우 최적화되어 있어 대규모 프로젝트에서도 빌드 시간이 CRA에 비해 훨씬 짧다. 또한 빌드된 결과물 역시 더 가볍고 최적화되어 배포된다.

모던한 설계와 최적화

CRA는 Webpack을 중심으로 한 오래된 구조를 따르고 있어 성능 최적화에 한계가 있다. Webpack은 복잡한 설정과 긴 빌드 시간 문제로 인해 특히 최신 자바스크립트 생태계의 요구사항을 따라가는 데 어려움이 있다.

Vite는 최신 브라우저의 ES Module을 활용하여 번들링에 의존하지 않고 빠른 로딩을 지원하며 최신 JavaScript 기능을 적극적으로 활용하여 성능을 극대화한다. 또한 Vite는 코드 분할, 트리 쉐이킹(Tree-shaking), 캐싱 등 최신 최적화 기법을 자동으로 적용하여 성능을 극대화한다.

Vite는 플러그인 시스템이 간편하게 되어 있어 추가적인 최적화와 확장이 더 쉽게 가능하다.

Vite 시작하기

Vite를 시작하기 위해서는 먼저 Node.js 설치가 필요하다. 공식 문서에 의하면 아래와 같은 Node 버전을 권하고 있다.

Vite는 버전 18+ 또는 20+ 의 Node.js를 요구합니다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있습니다.

프로젝트 생성하기

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

# bun
bun create vite

# 명령어 입력 후 아래와 같이 원하는 설정을 선택하면 된다.
> npx
> create-vite

# 1 프로젝트 이름 설정
✔ Project name: … vite-react-app

# 2 framework 설정
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

  # 3 variant 설정
  ? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

시작하면서 프로젝트 이름이나 템플릿을 지정하고 싶다면 아래와 같은 명령어를 사용하면 된다.

# npm v7 이상에서는 `--` 를 반드시 붙여야 한다.
npm create vite@latest my-react-app -- --template react
# typescript를 같이 사용하고 싶다면 템플릿 뒤에 -ts를 붙힌다.
npm create vite@latest my-react-app -- --template react-ts

그 외에 지원하는 템플릿

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-t

프로젝트 실행하기

프로젝트 생성이 완료 되었다면 아래와 같은 명령어로 정상 생성이 되었는지 확인해 볼 수 있다.

cd my-react-app

npm install
npm run dev

# 아래 "Local:" 부분에 있는 주소로 들어가게 되면 vite 세팅이 완료된 것을 확인할 수 있다.

> my-react-app@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.4.8  ready in 311 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

아래와 같이 정상 실행된 화면을 확인했다면 Vite 프로젝트를 성공적으로 생성한 것이다.

참고문헌