모든 React 개발자가 알아야 할 'process.env'의 함정

함정 #1: 브라우저에 존재하지 않습니다.

Node.js와 달리 브라우저에는 process.env 객체와 같은 것이 없습니다. 그러나 한 가지 깔끔한 웹팩 트릭을 사용하면 React 앱에서 바로 이 구조를 "에뮬레이션"할 수 있습니다.

Webpack의 DefinePlugin는 process.env.SOME_ENV_VAR의 토큰 교체로 환경 변수를 주입합니다. 최종 컴파일된 JS는 브라우저에 존재하지 않기 때문에 process.env에 대한 참조가 없습니다. 그래서 우리가 다음과 같은 것을 가지고 있다면:

console.log(process.env.SOME_ENV_VAR);

webpack은 다음과 같이 컴파일합니다.

console.log('value of SOME_ENV_VAR');

함정 #2: React 코드에서 값을 할당할 수 없습니다.

이것은 실제로 함정 #1의 자연스러운 부작용입니다. process.env는 컴파일된 JS 코드에 존재하지 않으므로 다음과 같이 React 앱 내에서 환경 변수를 재정의하는 것은 이치에 맞지 않습니다.

process.env.REACT_APP_ENV_VAR = 'cannot do this';

함정 #3: 예상하지 못한 방식으로 컴파일될 수 있습니다.

주의해야 할 한 가지 중요한 함정이 있습니다. 소스 코드에서 참조되는 모든 환경 변수가 .env 파일 또는 다른 위치에 정의되어 있는지 확인해야 합니다.
DefinePlugin가 참조된 env var의 값을 찾을 수 없는 경우 모든 참조를 undefined로 토큰 대체하지 않습니다. 예를 들어 REACT_APP_NOT_FOUND를 어디에도 정의하지 않았지만 다음 코드가 있는 경우:

console.log(process.env.REACT_APP_NOT_FOUND);

다음으로 번역되지 않습니다.

console.log(undefined);

대신 webpack은 env 변수의 전체 키-값 매핑으로 토큰의 process.env 부분만 문자열로 대체합니다. 따라서 번역은 실제로 다음과 같습니다(최소화 후에도).

console.log(
  {
    NODE_ENV: ‘development’,
    REACT_APP_NAME: ‘My App’,
    REACT_APP_ID: ‘232809283923’,

    // ... possibly a long list of other values
  }.REACT_APP_NOT_FOUND
);

이제 코드 전체에 이와 같은 많은 검사가 있다고 상상해보십시오.

if (process.env.REACT_APP_SOME_OPTIONAL_FLAG) { 
  /* . . . */ 
}

위의 논리는 값이 아니라 플래그의 존재에만 관심이 있기 때문에 괜찮다고 생각하면서 true인 플래그에 대해 .env 파일에 env vars만 정의합니다.

그러나 전체 env vars 개체 리터럴을 포함하는 위의 컴파일된 코드를 가져오고 정의되지 않은 env vars의 수를 아는 사람을 곱합니다. 확실히 번들 크기가 손상될 것입니다.

참고: 위의 동작은 Create React App에서와 같이 일반적으로 process.env가 DefinePlugin로 구성되는 방식을 기반으로 합니다. YMMV.