[React] Webpack 환경에서 환경변수 사용

1. dotenv?

React에서 .env 에서 설정한 변수를 사용하려고 하는데 알 될 경우 일반적으로 검색했을 때 dotenv를 사용해서

설치해서 해결하는 글이 많다. 

 

dotenv를 설치하고 App.js(혹은 다른 프로젝트 어딘가)에서 dotenv.config()를 호출하면 많은 오류가 나온다. 

완전 동일하게 나올 수 있고 아닐 수 있지만, 일반적으로 fs, os, path쪽 오류가 나오게 된다. 

 

dotenv는 무의존성 모듈로 Node.js에서 기본적으로 사용할 수 있게 만들어진 패키지이다. 

Node.js에서는 os, fs, path가 모두 제공되기 때문에 os와 path를 통해 파일을 찾아 fs를 사용해 읽어들인다.

 

하지만 React에서는 os, fs, path를 기본적으로 제공하지 않기 때문에 프로젝트 내부에선 사용할 수 없다. 

 

2. dotenv 사용하기 

React 프로젝트 내부에서는 os, fs, path 패키지가 없기 때문에 Webpack의 DefinePlugin을 사용해서 

전역변수를 설정해줄 수 있다. 

 

npm install -d --save dotenv

우선 당연히 dotenv 패키지를 설치해준다. 

 

그리고 .env 파일에 내가 필요로하는 변수를 선언해준다. 

 

webpack.config.js에서 dotenv와 webpack을 불러오고 dotenv.config()를 실행해준다. 

 

plugins에서 Webpack의 DefinePlugin을 사용해서 process.env를 전역에서 접근할 수 있도록 설정한다. 

 

3. dotenv-webpack 사용하기 

dotenv 패키지 말고 좀더 간단하게 사용하는 방법도 있다. 

npm install -d --save dotenv-webpack

 

dotenv-webpack 패키지를 사용하면 특별한 추가 설정없이 호출해서 plugins에 넣어주면 바로 사용가능하다.