Pullanner project - Vite 배경 및 설정

이소라·2023년 3월 31일

Pullanner project

목록 보기

6/11

1. Vite를 선택한 이유

1-1. Webpack 개발 환경의 문제점

개발 서버 최초 시작 시 느린 빌드 속도로 인한 개발 경험 저하
- Webpack을 사용했을 때, 규모가 큰 애플리케이션이 아니었음에도 불구하고 개발 서버를 처음 시작할 때 1분 정도의 시간이 걸리곤 했습니다. 프로젝트의 규모가 더 커진다면 이것보다 더 많은 시간이 걸리게 될 것이고, 이는 개발 경험을 낮추게 되는 주 원인이라고 생각했습니다.
비교적 느린 HMR(Hot Module Replacement) 속도로 인한 개발 생산성 저하
- Webpack을 사용한 프로젝트에서 여러 컴포넌트가 중첩된 UI나 이미지 로드가 필요한 UI를 변경했을 때, 화면에 반영되는 시간이 30초 이상 걸렸습니다. 코드를 변경했을 때 변경 사항을 즉시 확인할 수 없고 기다려야 하므로 생산성이 떨어졌습니다.
복잡한 configuration으로 인한 프로젝트 초기 설정 시 많은 시간 소요
- Webpack은 다양한 옵션들(로더, 플러그인, 모듈 등)이 많다는 점에서는 강력하지만, 프로젝트를 초기 설정할 때 일일이 옵션을 구성해야 하므로 시간이 오래 걸렸습니다.
- 필요한 기능과 로더 및 플러그인에 대해서 이해하고 구성해야 하므로, 러닝 커브가 높았습니다. 프로젝트 전체 기간에서 개발 초기 단계에 시간이 많이 소비되어, 구현 시간이 줄어든다는 단점이 있었습니다.

1-2. Vite의 장점

개발 서버 최초 시작 시 빠른 빌드 속도로 인한 개발 경험 향상
- Vite는 ESBuild를 사용하여 dependencies 사전 번들링하므로, 다른 JavaScript 번들러에 비해 10 ~ 100배 빠른 개발 경험을 제공합니다. 그렇기 때문에 개발 서버 최초 시작시 빌드 속도가 빠릅니다.
빠른 HMR 속도로 인한 생산성 향상
- Vite는 Native ESM을 사용하여 HMR 기능을 빠르게 수행합니다. Vite는 브라우저에서 보이는 화면에 대한 소스코드만 불러옵니다. 따라서 소스 코드 변경시 해당 소스 코드와 연관된 모듈만 업데이트하므로, 프로젝트의 규모와 관계 없이 빠른 HMR 속도를 경험할 수 있습니다.
간편한 configuration 및 제공되는 템플릿을 통한 초기 개발 환경 설정 시간 단축
- Vite에서 제공해주는 다양한 템플릿 중, react-ts 템플릿을 사용하여 초기 개발 환경 설정 시 많은 시간을 절약하고, 번거로움을 줄일 수 있었습니다.
  - 템플릿에 React와 TypeScript 관련 라이브러리가 모두 포함되어 있어 한 번에 설치할 수 있습니다.
  - 기본적으로 설정된 tsconfig.json 파일을 제공해 주기 때문에, 일일이 구성 옵션을 설정할 필요가 없습니다.

2. Vite 관련 설정 과정

2-1. Vite template 설치

Vite에서 제공하는 react-ts 템플릿을 사용하여 프로젝트를 생성합니다.

yarn create vite pullanner --template react-ts
cd pullanner // pullanner 폴더로 이동 
yarn // package.json에 명시된 패키지들 설치

2-2. 절대경로 사용을 위한 `vite-tsconfig-paths` 설정

vite-tsconfig-paths를 설치합니다.

yarn add -D vite-tsconfig-paths

vite.config.ts의 plugins에 tsconfigPaths()을 추가합니다.

// vite.config.ts
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  //... some configs

  plugins: [..., tsconfigPaths()],

  //... some configs
});

tsconfig.json 파일에서 baseUrl과 paths를 추가합니다.

// tsconfig.json
{
  "compilerOptions": {
	  //... some configs
    "baseUrl": "./", // "paths"가 있는 경우 반드시 지정되어야 함
    "paths": {
      "@/*": [
        "src/*" // baseUrl을 기준으로 src/ 하위 디렉토리를 @로 표현함
      ]
    }
  }
}