기존 사용되던 도구의 문제점
React에서는 초창기부터 CRA(Create-React-App)를 사용하여 React 프로젝트를 생성했었다.
무엇보다 CRA는 React 개발팀에서 공식적으로 추천하던 방식이었기에 대세로 사용이 되어왔다.
하지만 최근에는 CRA대신에 Vite 를 활용하여 React 프로젝트를 생성하는 추세이다.
가장 큰 이유는, CRA에서 상대적으로 느린 성능과 낮은 생산성이 큰 영향 때문이다.
CRA는 [Module 번들러]에서 알아보았던, Webpack 기반으로 동작한다. Webpack은 JavaScript 코드로 작성되었기에 언어 특성상, "처리해야 할 코드의 양이 방대해질 경우, 점점 느려진다는 단점" 이 있었다.
점차 애플리케이션이 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수가 증가하면서, 대규모 프로젝트에서 사용되는 수백, 수천 개의 모듈을 처리하다보니 Webpack 등 JavaScript를 기반으로한 도구들의 특성상 성능 병목 현상이 발생이 되었고, 종종 개발 서버를 가동하는데 오랜 시간을 기다려야 하거나, 변경된 파일이 적용될 때 까지 수 초 이상 소요되었다.
이러한 문제점으로 인해 대안으로 떠오른 것이 Vite 인 것이다.
Vite란❓
프랑스어로 “빠르다(Quick)”를 의미
”빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구”
[비트] 라고 발음한다.
Vite 는 기존의 tool들을 대신하여 Vue, React, Svelte 등 주요 프론트엔드 라이브러리, 프레임워크를 빌드하는데 많이 사용되고 있다.
특징
- Vite의 ”Esbuild”를 사용하고 있다. Go언어로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공한다.
매우 큰 수많은 모듈들의 Dependencies에 대한 번들링 과정을 효율적이고, 빠르게 처리할 수 있게 했다.
*아래는 ESbuild 공식 홈페이지 에서 소개하는 성능 비교 결과이다. 무거운 Webpack에 비해 거의 40배가 빠른 것을 볼 수 있다.
- ES6(ES2015)에 도입된 “자바스크립트 모듈 시스템(ES Modules)” 를 이용해 소스 코드를 제공한다.
Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공한다. 현재 화면에서 실제로 사용되는 경우에만 처리될 수 있도록 조건부 동적 import 를 통해 처리된다.
- HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높인다.
필요에 따라 소스코드는 304 Modified로, 디펜던시는 Cache-Control: max age=31536000,immutable을 이용해 캐싱된다. 이렇게 함으로 요청 횟수를 최소화하여 페이지 로딩을 빠르게 해준다.
Vite로 React 시작하기
❗️주의❗️Vite는 버전 18+ 또는 20+ 의 Node.js를 필요로 한다.
먼저 Vite를 이용해 아래와 같은 터미널 명령어를 통해 프로젝트를 생성한다.
# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest [프로젝트 이름] -- --template react
# yarn
yarn create vite [프로젝트 이름] --template react
# pnpm
pnpm create vite [프로젝트 이름] --template react
# bun
bun create vite [프로젝트 이름] --template react명령어를 통해 프로젝트를 생성하고 나면 아래와 같은 메세지가 뜬다.
Vite가 기존 CRA와 다른 점은 프로젝트 생성 시 따로 node_module이 설치되지 않는 다는 것이다. 그래서 위의 메세지와 같이 install 명령어를 통해 node_module 을 따로 설치해줘야 한다.
모두 설치 후 개발 서버를 실행하게 되면 기존 CRA에서 3000번 포트를 사용하는 것과 다르게 Vite는 5173번 포트를 사용하는 것을 알 수 있다.
해당 로컬 서버에 접속하면 다음과 같이 React 프로젝트가 잘 동작하는 것을 볼 수 있다.
주의 할 점
- Vite로 생성한 React 프로젝트에서는 절대 경로를 사용해야한다.
// CRA에서...
import Cards from "../components/cards";
// Vite에서...
import Cards from “/src/components/cards.jsx”- 환경변수(
.env파일)를 사용할 때 아래와 같이 “VITE_”를 앞쪽에 명시해주어 작성해야 한다.
// 예전 방식
REACT_APP_ API_KEY = 3f7dsdf87s78..
// Vite에서 쓰는 방식
VITE_API_KEY = s7986f87sd6f8..참조
esbuild - An extremely fast bundler for the web
