VITE 알아보기

CRA 환경에서 라이브러리를 설치할때마다 K-승질머리를 가진 나는... 성질머리가 났더랬지.. 
그래서 빠르다고 소문이 자자한 VITE를 사용해보기 시작했고, 그 과정에서 겪었던 CRA와의 차이점을 기록한다. 

VITE

• Vite(프랑스어로 "빠르다(Quick)"를 의미한다. 발음은 /vit/
• Vite의 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠르다.
  • CRA는 webpack기반이다.

시작하기

$ npm create vite@latest [프로젝트 명] --template react

$ cd [프로젝트 명]
$ npm install(필요 패키지 다운)
$ npm run dev(개발 서버 실행)

CRA 환경과의 차이점

vite + ts + ESlint 프로젝트에서 baseUrl 설정하기

• [문제] tsconfig.json 컴파일러 옵션에 "baseUrl": "./src"을 설정하면 파일을 읽지 못하는 오류가 발생함
• [원인] ESlint가 tsconfig.json 파일의 옵션을 읽지 못하기 때문이라는데 잘 모르겠다 (링크)
• [해결] npm install vite-tsconfig-paths --save-dev 플러그인을 설치하고, vite.config.js 파일을 수정한다.

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths' // 추가
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()], // tsconfigPaths 추가
})

vite + ts + react 프로젝트에서의 환경 변수 설정하기

CRA에서의 환경변수 설정

• REACT_APP_로 시작하는 환경변수를 .env 파일에 생성한다.
• process.env객체로 환경변수에 접근한다.
  • process.env는 노드에서 사용하는 전역객체로 환경 변수를 저장하기 위해 사용된다.
  • process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다.

VITE에서의 환경변수 설정

• VITE_로 시작하는 환경변수를 .env 파일에 생성한다.
• import.meta.env 객체로 환경변수를 선언하여 접근한다. : const gaTrackingId = import.meta.env.VITE_GA;
• TypeScript 환경에서는 import.meta.env 타입이 기본적으로 정의되어 되지 않기 때문에 추가적으로 타입을 정의해줘야한다.
  • 루트에 vite-env.d.ts 파일을 생성하고 타입을 정의한다.

// vite-env.d.ts

/// <reference types="vite/client" /> 
interface ImportMetaEnv {
  readonly VITE_CUSTOM_ENV_VARIABLE: string;
}

interface ImportMeta { // ImportMeta 타입 정의 필요 
  readonly env: ImportMetaEnv;
}

•  /// <reference types="vite/client" /> 구문은 필수이다.
• [역할] TypeScript 컴파일러가 Vite 관련 타입을 프로젝트에서 사용할 수 있게 해준다.
• [다른 선택지] tsconfig.json 파일 내에서 컴파일러 옵션에 타입을 명시해줄 수도 있다.

// tsconfig.json 
"compilerOptions": {
        "types": ["vite/client"] // 타입 명시 
}

• 공식 문서로 더 보기
• 선언(declare)을 의미하는 파일이다.
• env.d.ts 는 .env 에 대한 유형정보를 제공한다.

• *.d.ts 파일이란?
  • 선언(declare)을 의미하는 파일이다.
  • env.d.ts 는 .env 에 대한 유형정보를 제공한다.