[React] webpack으로 구축한 React 프로젝트에서 환경변수 적용하기

CRA를 사용하지 않고, webpack과 babel로 직접 구축한 프로젝트에 환경변수 설정을 하다가 삽질한 내용을 정리하고자 합니다.

'리액트에서 환경변수 적용하기' 키워드로 구글링하다가 보면

dotenv 패키지 설치 > 프로젝트 루트에 .env 파일 생성 > REACT_APP 으로 시작하는 변수 작성 > process.env.<변수명> 으로 환경변수에 접근

위와 같이 하면된다고 한다. 실제로 CRA로 생성한 프로젝트에서는 해당 방법으로 어려움없이 환경변수를 설정했었다. 이번에도 이렇게하면 되겠지하고 적용을 하였지만, 되지않았다..!

1. dotenv란 ?

"dotenv"란, .env 파일에 선언한 변수를 process.env에 로드해주는 무의존성 모듈이다.
os 와 path 모듈을 통해, .env 파일의 절대 경로를 찾고, fs 모듈로 .env 파일을 물리적으로 읽어들여 process.env 에 key-value 형식으로 담고있다.
여기서 os, path, fs 모듈은 Node.js 가 기본적으로 제공하는 모듈 중 하나이다. 이처럼 dotenv는 Node.js의 기본 환경에서 실행되도록 의도된 패키지이므로 무의존성 모듈이라고 할 수 있다.

React는 Node.js가 아니다 😀

Node.js는 React를 사용해 개발된 프로그램이 실행될 수 있는 런타임 환경을 제공하는 것이지, React와 직접적인 관계가 있는 것이 아니다.
Node.js는 webpack이 config 파일의 설정을 바탕으로 정적 파일들을 번들링하고, npm start로 개발용 서버를 올려 번들링된 파일을 실행할 수 있는 환경을 제공해주는 자바스크립트 런타임이다.

즉, React 프로젝트의 자바스크립트 파일은 Node.js 그 자체가 아니기 때문에 특정 패키지가 필요하면 npm을 통해 설치하고 /node_modules 에서 import 해서 의존적으로 사용해야 한다. 때문에 /src 하위의 파일에서는 os, path, fs 모듈들을 찾을 수 없었던 것이다. ( dotenv 만 설치했기 때문! )

2. dotenv로 환경변수를 사용하는 방법 ?

1 ) webpack의 DefinePlugin 을 사용해 process.env라는 전역 변수를 정의해준다.

/src 루트에 .env 파일을 만들고 환경변수들을 적어주면 된다. "REACT_APP"을 붙일 필요는 없지만 다른 환경변수들과의 충돌을 방지하기 위해 구분가능한 prefix를 붙여주는 것은 좋을 거 같다.

2 ) 대체 dotenv-webpack

npm install dotenv-webpack --save-dev

설치해주고 webpack config 파일에서 플러그인에 추가해주면 된다.

const Dotenv = require("dotenv-webpack")

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

이방법은 해보지 않았지만, 찾아보다가 간단한거 같아서 같이 정리하였다.