[사이드 프로젝트] fillsa 개발일지 006. vite로 리액트 프로젝트 생성하기

원래 webpack을 써서 리액트 개발을 이어가보려고 했으나 예전에 webpack은 느려서 답답하니 vite를 쓰는 게 좋다는 말을 들은 기억이 나서 뒤늦게 vite를 부랴부랴 찾아보았다. 그 전에 프론트엔드의 모듈 번들러에 대한 이해가 부족해서 함께 공부하였다.

모듈 번들러의 역사

npm의 등장

자바스크립트는 모듈(module)이 없다.

자바스크립트가 탄생했을 당시에는 ‘웹에서 자바스크립트로 대형 애플리케이션을 만들거야’라고 상상조차 하지 못했기 때문이다. 아주 간단한 동작만 하기 위한 목적을 가지고 태어났기에 파일을 여러 개로 만들어서 개발할 수도 없었다.

 

이후 node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수와 module.export를 쓰는 CommonJS 방식의 모듈이 만들어졌다. 참고로 당시 js 문법에는 import와 같은 표준 모듈 문법이 없었다.

 

npm의 등장으로 만들어진 모듈을 모두가 공유할 수가 있었고, 이때부터 자바스크립트에서 본격 활용되기 시작했다.

 

브라우저에서는 어떻게 모듈을 사용할까?

브라우저는 js 파일을 저장하지 못하고 매번 불러와야 했기 때문에 언제나 로딩과 비동기가 문제가 되었었다. 이에 대한 해답으로, 여러 개 파일을 비동기로 로딩하지 않고 처음부터 파일을 하나로 합쳐서 전달하는 방식이 고안되었다.

모든 파일을 하나로 합친 것, 번들(bundle)이 여기서 탄생하였다.

 

번들러의 문제점은 '느린 빌드 속도'이다. 기존에는 그저 js를 작성하면 바로 브라우저에서 실행할 수 있었지만, 이제 모든 파일을 하나로 만드는 작업을 선행해야 했기 때문이다. 수정할 때마다 매번 새롭게 빌드가 필요했다.

이를 개선하여 등장한 것이 vite(비트)이다. vite는 현재 많은 개발자의 인정을 받는 빌드 도구이며, 말 그대로 엄청 빠르다.

 

(참고자료 : https://yozm.wishket.com/magazine/detail/1620/)

Vite 이야기(feat. Svelte) | 요즘IT

 

Webpack vs Vite

create react app 명령어를 통해서 리액트 프로젝트를 만들면 webpack으로 번들링을 한다. webpack은 코드가 바뀌면 모든 자바스크립트 코드를 새로 번들링한다. 그래서 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다. 반면 vite는 esbuild를 이용해서 변경된 부분만 새로 번들링한다.

 

 

Vite 사용하기

리액트 프로젝트 생성하기

npm create vite@latest

 

프로젝트 실행하기

npm install
npm run dev

 

환경변수 사용하기

process.env 방식이 아니라 import.meta.env를 이용하여 환경변수에 접근해야한다.

// 예전 CRA 방식
process.env.REACT_APP_API_KEY

// Vite 방식
import.meta.env.VITE_API_KEY

 

 

예전에 create react app으로 리액트 프로젝트를 생성했었는데, 그건 삭제하고 이걸로 다시 세팅을 해야겠다.