[React] Vite의 환경 변수 (cf. CRA)

Vite의 환경 변수

곰곰 다이어리와 이세계 MBTI에서는 Vite를 사용했다.

이번 글의 주제가 번들러는 아니기 때문에 간단하게 설명하면 Vite는 CRA와 같은 번들러다.

CRA(create-react-app)으로 대부분의 프로젝트를 생성하는데, 프로젝트 크기가 크고 빌드 속도가 느리다는 단점이 있다.

CRA의 대체제로 부상한 것이 Vite인데, 이 Vite는 CRA에서 환경 변수를 사용할 때와 방법이 조금 다르다.

CRA에서는

1. .env 파일 생성

2. REACT_APP 으로 변수명이 시작되는 변수 생성

3. 따옴표로 감싸거나 띄어쓰기를 사용하지 않는다.

4. 사용 시 process.env.변수명 으로 호출한다.

REACT_APP_TEST_DATA = hello
process.env.REACT_APP_TEST_DATA

예전에 환경 변수로 골머리를 앓았을 때 새벽까지 디버깅을 했었는데, 어떤 분이 찾아주신 내용이다. (출처: CRA github)

이 코드는 process.env에 정의된 환경 변수 중에 이름이 REACT_APP으로 시작하는 것을 추출해 객체로 만드는 역할을 한다.

이렇게 추출된 환경 변수들은 나중에 웹팩의 DefinePlugin을 사용해 코드에 inject, 주입된다.

// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },

Vite에서는

1. .env 파일 생성

2. VITE_ 로 변수명이 시작되는 변수 생성

3. 따옴표로 감싸도 된다.

4. 사용 시 import.meta.env.변수명 으로 호출한다.

VITE_TEST_DATA = 'hello'
import.meta.env.VITE_TEST_DATA

Vite에서도 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 한다. (출처: Vite 공식 문서)

Vite는 아직 익숙하지 않은데 앞으로 많이 사용할 것 같다.