React에서 환경 변수 로딩 문제 해결하기

리액트에서 환경 변수를 불러오는 방법

리액트 애플리케이션에서 환경 변수를 불러오는 데 어려움을 겪고 있다면 걱정하지 마세요. 많은 개발자들이 리액트에서 환경 변수를 구성하고 접근하는 작업에 어려움을 겪습니다. 이 글에서는 리액트 프로젝트에서 환경 변수를 성공적으로 불러오기 위한 다양한 접근 방법과 해결책에 대해 알아보겠습니다.

1. dotenv-webpack 패키지 사용

가장 일반적인 접근 방법은 dotenv-webpack 패키지를 사용하는 것입니다. 이 패키지를 사용하면 프로젝트의 루트 디렉토리에 .env 파일을 생성하여 환경 변수를 정의할 수 있습니다. 이 파일 안에 변수에 값을 할당할 수 있습니다:

API_HOST=http://localhost:8000
REACT_APP_API_HOST=http://localhost:8000

이러한 변수들을 불러오기 위해서는 웹팩(webpack) 설정 파일을 구성해야 합니다. 웹팩 설정 파일의 플러그인 섹션에 dotenv-webpack 플러그인을 추가할 수 있습니다:

const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ],
  ...
};

2. 명령어에 직접 변수 전달

.env 파일을 사용하지 않고 직접 환경 변수를 webpack 명령어에 전달할 수도 있습니다. 예를 들어:

webpack --env.API_HOST=http://localhost:8000

이렇게 하면 별도의 파일 없이 인라인으로 변수를 지정할 수 있습니다.

3. webpack.EnvironmentPlugin 사용

다른 옵션으로는 webpack.EnvironmentPlugin을 사용하는 것입니다. 이 플러그인을 이용하면 웹팩 설정 파일에서 환경 변수를 직접 정의할 수 있습니다:

const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.EnvironmentPlugin({
      API_HOST: 'http://localhost:8000'
    })
  ],
  ...
};

이 방법은 프로젝트에 특정한 환경 변수를 설정하는 편리한 방법을 제공합니다.

4. 정의되지 않은 변수 문제 해결

만약 여전히 변수가 정의되지 않은 문제를 겪고 있다면, 환경 변수를 올바르게 지정했는지 확인해야 합니다. 리액트 애플리케이션에서는 변수의 이름에 REACT_APP_ 접두어를 꼭 붙여야 합니다. 또한, 변수에 올바르게 접근하는지 다시 한 번 확인해야 합니다. 예를 들면:

console.log(process.env.REACT_APP_API_HOST);

이 문제 해결 단계를 따라가면, 리액트 코드에서 환경 변수에 문제없이 접근할 수 있습니다.

결론

리액트에서 환경 변수를 불러오는 것은 가끔 어려운 작업일 수 있습니다. 하지만 dotenv-webpack 패키지나 webpack.EnvironmentPlugin과 같은 도구를 사용하여 쉽게 환경 변수를 구성하고 접근할 수 있습니다. 변수의 이름을 올바르게 지정하고 정의되지 않은 변수를 피하기 위해 올바른 접두어를 사용하는 것을 기억하세요.

이 가이드가 리액트 애플리케이션에서 환경 변수를 성공적으로 불러오는 데 도움이 되었기를 바랍니다.

참고 자료 : 

reactjs