React+Vite 프로젝트 시작하기

기존에는 Create React App 방식으로 프로젝트를 만들었지만 2023년 이후 유지보수가 중단되어 Vite 사용이 권장되고 있다.

 

Vite는 프랑스어로 '빠르다' 를 의미하며 '바이트' 가 아닌 '비트' 로 읽는다. 

개발 서버와 빌드 도구 역할을 하며 React, Vue, Svelte 등 다양한 프론트엔드 라이브러리, 프레임워크를 지원한다.

Vite는 개발할 때는 ESM 기반으로 파일을 바로 실행시켜서 매우 빠르고 빌드할 때는 Rollup을 사용한다.

 

• ES모듈 (ESM) : 최신 JS 표준으로 import와 export 키워드를 사용한다.
• CommonJS : Node.js 환경에서 주로 사용되며 require()과 module.exports 를 사용한다.

commonJS의 경우 모듈 로더가 동기적으로 작동하는 특징이 있다. 모듈을 순서대로 하나씩 불러오고 처리하는 것인데, 이는 브라우저 환경에 사용하기는 무리가 있었다. (웹 페이지의 로딩 시간을 증가시키기 때문에) 이를 고려해 비동기로 동작하는 모듈 시스템이 필요했고 AMD -> UMD를 거쳐 ESM이 자바 스크립트 모듈 표준이 되었다.

 

그래서 Vite가 왜 빠른데?

 

개발 서버를 시작할 때, 번들러를 기반으로 한 빌드 설정은 전체 애플리케이션을 미리 크롤링하고 빌드해야 한다.

Vite는 애플리케이션의 모듈을 Dependency와 Source Code라는 두 가지 범주로 먼저 나누어 시작 시간을 개선했다.

 

• Dependency : 개발 중에 자주 변경되지 않는 일반 JavaScript 코드
  • Vite는 esbuild를 사용해 의존성을 사전 번들링한다. esbuild는 Go로 사용되어 JS 기반 번들러보다 10-100 배 빠르게 의존성을 사전 번들링한다.
• Source Code : 변환이 필요한 일반 JavaScript가 아닌 코드 (JSX, CSS, 또는 Vue나 Svelte의 컴포넌트) 
  • 네이티브 ESM을 통해 소스코드를 제공한다. 브라우저가 번들러의 일부 역할을 대신하게 되는 것이다. Vite는 브라우저가 요청할 때만 소스코드를 변환하고 제공한다. import 뒤의 코드는 현재 화면에서 실제로 사용될 때만 처리된다.

또한 파일이 수정되었을 경우 전체 번들을 다시 빌드하는 것이 아닌 네이티브 ESM을 이용해 수정된 그 모듈과 연결된 부분만 교체한다. 기존 번들러는 여러 파일을 하나의 번들로 합쳐놓았기 때문에 부분 교체가 어려웠지만 Vite 는 각 파일을 개별 모듈로 인식하기 때문에 수정된 파일만 바꿔치기 할 수 있다.

 

HTTP 캐싱을 활용하여 전체 페이지 새로고침 속도도 높였다. Source Code 모듈 요청은 304 Not Modified를 통해 조건부로 처리되고 Dependency는 Cache-Control: max-age=31536000, immutable을 통해 캐싱되어 한 번 캐싱되면 서버에 다시 요청하지 않는다.

 

하지만 프로덕션 빌드의 경우 esbuild가 아닌 Rollup을 사용하여 번들링 최적화를 수행한다. 왜? 프로덕션 최적화 기능이 있기 때문이다.

프로덕션 빌드는 배포할 때 한 번만 하니까 시간 단축보다는 결과물의 최적화에 더 중점을 두었다.

• Tree-shaking : 안쓰는 코드 제거
• Code-splitting : 청크 분할 최적화

와 같이 정교한 제어가 가능하기 때문에 Vite 는 Rollup 의 플러그인 API와 인프라를 채택하였다.

 

vite@latest로 프로젝트를 만들면 이런 옵션이 나온다.

 

Use rolldown-vite (Experimental)?:

 

Vite는 개발 - 프로덕션을 모두 하나의 통일하는 Rust로 구현된 최신 번들러를 도입하였는데 미리 패키지로 체험할건지 선택 여부를 묻는 것이다. esbuild 의존성을 제거하고 Oxc(고성능 JS 도구) 를 사용하여 대규모 프로젝트에서 최대 3-16배의 빌드 속도를 개선하고 최대 100배의 메모리 사용 절감을 할 수 있다고 한다. 

 

하지만 아직은 실험 단계이므로 기본값은 NO 이다.

 

브라우저 지원 정책

Vite는 개발환경에서는 최신 브라우저만 지원하며 (변환이 최소화 되기 때문에 빠르다.)

프로덕션에서는 2.5년 이상된 브라우저도 지원한다.

 

자세한 사항은 Baseline (웹 표준 기능의 브라우저 지원 수준을 나타내는 기준) 을 확인하면 된다.

 

실행하기

vite는 npm, yarn, pnpm, Bun, Deno 와 같은 패키지 매니저를 통해 프로젝트를 생성할 수 있다.

npm create vite@latest

 

create vite 명령어를 실행하면 프로젝트 이름, 프레임워크를 선택하는 과정을 거쳐 프로젝트가 생성된다.

 

원하는 프레임워크 설정

 

React 선택 후 varient 선택 창

 

TypeScript를 선택한다면  TypeScript 컴파일러(tsc) 와 Babel을 통해 코드를 변환(jsx -> js)하고 타입 검사를 수행한다. 안정적이고 완전한 언어를 지원하지만 빌드 속도가 느릴 수 있다.

 

TypeScript + React Compiler 는 React 19에서 새로 나온 자동 최적화 컴파일러로 useMemo, useCallback, React.Memo를 자동으로 적용해준다. (빌드 시점에) 그러나 아직 실험적이므로 프로덕션에 쓰기엔 위험할 수 있다. 

 

TypeScript + SWC 옵션은 Rust에서 개발된 JS/TS 컴파일러로 기존 Babel을 대체한다. 타입 검사는 수행하지 않는다. 빌드 속도가 중요한 대규모 프로젝트에서 사용된다.

 

 

마지막으로 Yes를 누르면 npm install 과 npm run dev 명령어를 한 번에 처리해준다.

 

개발 서버가 시작된 모습

 

이렇게 Vite를 이용해 React 프로젝트를 생성해보았다!

참고

https://deemmun.tistory.com/86

번들러 파헤치기 1 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)

https://velog.io/@gdgocgachon/react-vite-fast-start-usestate-counter

React 첫걸음: Vite로 10초 만에 시작해서 useState로 카운터 만들기

https://hooninedev.com/240710/

후니네 개발하우스 | VITE의 HMR에 대해서

https://vite.dev/guide/why

Vite

https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4

TypeScript와 TypeScript+SWC의 차이