[React] Vite 환경 구성하기

CRA를 사용해서 React를 구성하는 경우가 많았는데, 최근 TDD, 클린 코드 with React 3기를 통해서 

Vite를 사용하는 환경을 구성하게 되었다. 

 

당장 구현 자체는 간단한 라이브러리를 통해서 할 수 있지만 Vite가 뭔지, 어떤 장점이 있는지 알아보고 

실제 환경을 구성하는 방법을 알아보자 

 

Vite

바이트? 비트? 다양하게 읽는 사람이 있는데 홈페이지에서는 다음과 같이 안내하고 있다. 

프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.

 

명칭을 봤을때도 알 수 있게 빠른 자바스크립트 번들링 툴이다. 

Webpack 같은 번들링 툴이 있는데 Vite가 나온 이유를 알아보자면 다음과 같다. 

 

너무 긴 서버 구동 

콜드 스타트 방식을 통해 개발 서버를 구동할 때, 번들러 기반의 도구는 애플리케이션의 모든 소스 코드에 

대해서 크롤링 및 빌드 작업을 마쳐야지만 실제 페이지를 제공했다. 

 

※ 콜드 스타트란? 

최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미한다. 

 

vite는 애플리케이션의 모듈을 dependencies와 source code, 두 카테고리로 나눠 개발 서버의 시간을 개선한다 

• Dependencies : 개발 시 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드이다. 기존 번들러로 
                            컴포넌트 라이브러리와 같이 몇 백 개의 JavaScript 모듈을 갖고 있는 큰 디펜던시에 대한 
                            번들링 과정이 매우 비효율적이고 많은 시간이 필요했다. 
   
                            Vite는 Esbuild를 사용해서 이런 문제를 해결했다. 
                            Go로 작성된 Esbuild는 기존 Webpack 같은 번들러에 비해 10~ 100배 빠른 속도를 제공한다. 

[esbuild의 처리 속도 차이] 다른 번들링에 비해 처리 속도가 훨씬 빠르다.

• Source code : JSX, CSS 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript
                         소스코드이다. 
                          
                         Vite는 Native ESM을 통해서 소스 코드를 제공한다. 
                        브라우저가 번들러의 작업의 일부를 차지할 수 있도록 하는 방식이다. 
                        이것을 통해서 Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하지만 하는 방식이다. 
  
                        자체적으로 Dynamic import를 해서 나머지 코드는 실제 사용되는 경우에만 처리된다. 

[번들 기반 개발 환경] 모든 코드를 가지고 와서 렌더링한다.

[Native ESM 기반 개발 환경] Dynamic import 를 통해서 페이지 렌더링이 된다.

 

느렸던 소스 코드 갱신

기존의 번들러 기반으로 개발했을 때, 소스 코드를 업데이트 하게 되면 다시 번들링 과정을 거쳐야 

했다. 따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 된다. 

 

Vite는 수정된 모듈과 관련된 부분만 교체를 진행하고, 브라우저에서 해당 모듈을 요청하면 교체된 

모듈을 전달하는 방식이다. 

 

지금까지 Vite 공식 홈페이지를 통해서 장점을 알아봤는데, 빠른 속도에 중점을 가지고 있는 환경이다. 

 

그럼 이제 Vite를 사용해서 환경을 구성하는 방법을 알아보자

 

Vite 환경 구성

개발 환경으로는 18+ 또는 20+ 버전의 Node.js를 요구한다. 

 

npm create vite@latest

기본적으로 vite를 통해서 환경을 구성하는 명령어이다. 

 

프로젝트 명이나 템플릿을 미지 지정할 수 있는데, react 환경을 만들고 싶다면 아래와 같이 입력하면 된다.

npm create vite@latest my-react-app --template react

다음과 같이 react 환경으로 프로젝트를 만들 수 있다. 

 

그 외에도 react-ts, react-swc, react-swc-ts, ... 등 템플릿이 많이 있다. 

 

※ SWC ?? 

SWC라는 단어가 계속 나오는데 이게 뭘까? 찾아보니 SWC는 Rust 기반 웹용 플랫폼이다.

컴파일과 번들링 모두에 사용할 수 있고 단일 스레드에서는 Babel보다 20배 빠르고 4개 코어에서는 70배 빠르다고 한다. 

 

그렇다면 Babel을 안쓰고 SWC를 사용하는게 무조건 좋은게 아닌가? 라는 생각을 할 수 있지만 

Babel은 방대한 플러그인 생태계를 가지고 있어서 프로젝트를 원하는 방향으로 세밀하게 조정할 수 있다. 

그리고 오래되고 다양한 JavaScript 환경에 대한 광범위한 호환성을 제공한다. 

 

즉, 빠른 빌드 시간과 성능을 우선시한다면 SWC를 고려할 수 있고, 호환성과 방대한 생태계가 필요하다면 

Babel을 사용하면 될 것 같다. 

 

사실 위 명령어를 입력하면 설치는 끝나게 된다. 

 

Vitest

추가적으로 Vite를 사용할 때 테스팅을 진행하는 경우 Vitest를 사용할 수 있다.

 

일반적으로 React 환경에서는 Jest를 통해서 테스트를 진행하는데 테스트 환경을 설정해야 하는 단점이 있었다. 

( 추후 생각나면 글을 작성 하겠다... 귀찮스리랑카... )

 

Vitest는 Vite의 간단하게 개발 설정을 공유할 수 있는 있다는 장점이 있다. 

vite.config.js 플러그인과 통일한 환경으로 테스트를 진행할 수 있다는 장점이 있다. 

 

개발환경으로는 5.0.0+ 버전의 Vite와 18+ 버전의 Node.js를 요구한다. 

 

npm install -D vitest

바로 devDependencies 에 vitest를 설치해주면 끝이다. 

 

이후 package.json 파일에서 test 실행 명령어를 추가해주면 된다. 

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
    // 기본 환경
    "test": "vitest" <== 추가
  },

 

이상으로 Vite를 사용하는 React 개발 환경에 대해서 작성하였다.