[React] Vite에 대해 알아보자!

Vite를 사용하기 전에는,,

브라우저에서 ES Modules를 지원하기 전까지는 JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 

즉, Javascript 모듈 기능을 브라우저 또는 Javascript 엔진 자체에서 기본적으로 지원하지 못했다. 

 

따라서 require.js, commonJS, AMD 와 같은 외부 라이브러리나 Webpack, Rollup, Percel과 같은 번들러(Bundler)에 의존해야했다.

 

번들링이란 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 작업을 말한다.

번들러를 통해 여러 개의 모듈 파일을 하나로 번들링하여 브라우저에서 실행할 수 있는 하나의 파일로 만들어준다.

📚 CommonJS 와 ES Modules

두 개는 모두 JS 모듈을 가져오거나 내보낼 때 사용하는 방식이다. 

CommonJS의 경우 modules.exports로 모듈을 내보내고, require() 접근하는 방식이다. 

module.exports = { ... }        // 모듈 내보낼 때

const utils = require('utils'); // 모듈 가져올 때   
출처: https://mong-blog.tistory.com/entry/JSModule-CommonJS와-ES-Modules는-무엇일까 [Mong dev blog:티스토리]​

ES modules의 경우 export로 모듈을 내보내고, import로 접근하는 방식이다. 

export.default =()=> { ... }; // 모듈 내보낼 때

import utils from 'utils';    // 모듈 가져올 때  
출처: https://mong-blog.tistory.com/entry/JSModule-CommonJS와-ES-Modules는-무엇일까 [Mong dev blog:티스토리]​

모듈의 경우 기본적으로 CommonJS방식으로 동작한다. 따라서 ESM으로 설정하기 위해서는 package.json 설정과 추가적인 번들러 설정이 필요하다. 

 

하지만 번들러의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 페이지가 나오기 때문에 애플리케이션의 크기가 커짐에 따라 Javscript 모듈의 개수도 증가하면서 Javascript 기반의 도구는 성능 병목 현상이 발생하게 되었고, 개발 서버를 가동하는데 시간이 많이 소요되는 문제가 발생했다. 

 

이러한 속도 저하 문제를 해결하기 위해 나온 것이 Vite 이다.

 

 

Vite는 어떻게 문제를 해결했을까?

1. 사전 번들링 기능을 ESbuild로 사용한다.

Esbuild는 Go 로 작성된 번들러로써 기존의 번들러 대비 10~100배 빠른 속도를 제공한다.

 

하지만 사전 번들링만 esbuild를 사용하여 작업을 수행하고 나머지 배포를 위한 번들링 및 빌드 작업은 Rollup을 이용해 수행한다. 

 

2. Native ESM을 이용해 소스 코드를 제공한다. 

기존의 번들러는 모든 모듈을 하나의 번들로 묶어 클라이언트로 보낸다. Vite의 경우 개발 중에는 브라우저가 import 문을 통해 직접 해당 페이지 내에서 필요한 모듈만을 요청할 수 있도록 하기 때문에 초기 개발 환경 설정과 파일 빌드가 빠르다. 

 

3, vite는 수정된 모듈만을 교체한다.

기존의 번들러는 개발 진행 중에 소스 코드를 업데이트하게 되면 번들링 과정을 다시 거쳐야했다. 이는 서비스가 커질수록 소스 코드 갱신 시간 또한 증가한다.  vite의 경우에는 ESM을 이용하여 어떤 모듈이 수정되면 수정된 모듈과 관련된 부분만을 교체하기 때문에 애플리케이션의 사이즈가 커져도 갱신시간에 영향을 끼치지 않는다. 

 

 

 

 

그렇다면 Vite를 사용해보자.

1. 프로젝트 생성

npm create vite@latest

 

2. 사용할 프레임워크를 선택

3. 프로젝트의 개발환경을 실행한다.

cd vite
npm install
npm run dev

 

 

 

---

공식문서를 추가적으로 보면, index.html의 위치에 대해 추가적인 설명에 대해 나온 부분이 있었다. 

해당 부분의 설명을 보면, 

 

create-react-app(CRA) 로 생성된 프로젝트의 경우 index.html 파일이 public 디렉토리 내에 위치해있다.

이와 달리, vite를 통해 생성한 프로젝트의 경우 index.html 파일이 프로젝트 루트에 위치해있다. 

 

 

이는 vite는 개발 프로세스를 간소화하도록 설계하기 위해 추가적인 번들링의 과정 없이 index.html 파일이 개발 단계에서 애플리케이션의 진입점이 되게끔 지정하였기 때문이다.

 

 

해당 공식문서로 이해하기에는 이해가 되지 않았다.. 😂 

 

https://giphy.com/gifs/hp-escape-enemy-jou4Cd2mx1lGU

그래서 더 자세하게 두 개의 방식으로 생성된 프로젝트의 index.html 측면에서의 차이점에 대해 찾아보았다...!

 

CRA

1. index.html 파일이 정적 파일을 저장하는 public이라는 폴더 내에 위치하여, 이 파일을 기반으로 앱의 기본 구조가 정의된다.

=> 즉, 해당 파일을 기반으로 앱이 렌더링된다. 

2. 브라우저는 처음 index.html을 로드할 때, 해당 파일 내에 <div id="root">  요소가 포함되어있다.

=> 리액트는 이 <div id="root"> 요소를 찾아 해당 요소 내에 리액트 컴포넌트를 렌더링한다. 

3. 빌드가 완료되면 index.html 파일은 정적 리소스와 함께 build 폴더에 저장되고, 배포된 앱은 클라이언트가 index.html을 로드하면서 시작된다. 

 

 

VITE

1. index.html 은 프로젝트의 루트 디렉토리에 위치하여 vite의 개발 서버가 직접 읽고 로드하는 방식으로 동작한다. 

=> vite의 개발 서버는 해당 파일을 직접 해석하여, <script type="module"> 태그로 명시된 JavaScript 파일을 ESM 방식으로 로드한다.

2. Vite는 네이티브 ESM 기능을 사용하여 index.html 에서 모듈을 직접 로드할 수 있도록 한다. 

=> 이를 통해 더욱 빠른 개발 서버 성능을 제공한다. 

3. 개발 환경에서의 vite는 index.html을 기준으로 브라우저가 필요한 모듈을 요청하고, 이를 esbuild로 빠르게 변환한다. 

 

 

 

📚 참고자료

https://mong-blog.tistory.com/entry/JSModule-CommonJS%EC%99%80-ES-Modules%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

https://ko.vitejs.dev/guide

 

---

지금까지 vite에 대해서 스리슬쩍 들어보기만 했지 이렇게 적용해본 것은 처음이었다.

 

vite에 대해 공부해보게 된 계기는 이번 동아리의 React에 대한 스터디 내용 중에 아주 잠깐 세팅에 대한 방법만을 잠깐 짚고 넘어갔었다. 

하지만 어떻게 시작하고, 어떤 방식으로 적용해야하는지 보다는 기존에 내가 알던 react 프로젝트를 생성하는 방법(CRA)보다 vite를 통한 프로젝트 생성을 왜 택하였는지, 이 방법은 기존에 내가 알던 방법과 차이점은 무엇인지 문득 궁금하여 찾아보게되었다. 

 

막상 찾아보니 모듈 시스템과, 번들링 작업, 빌드 등,, 이런 여러 작업들과 단어에 대한 이해가 기본적으로 깔려있어야 이해가 완전히 가능한 부분이라 이 부분에 대해 이해하는 데도 오래걸리고, 내가 잘 이해하고 있는지도 아리송했다... 아리송하다면 더 공부해야하는 bub,, 

 

쨌든 어색하게나마 vite를 왜 사용하는지, 내가 궁금한 부분을 공식문서를 통해 공부하고 이해하는 방법에 대해 성정한 것 같아 뿌듯했다.