CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined

CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데,
CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다.

환경변수?

운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다.

.env(dotenv)?

dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다.
보안을 고려해 관리해야하는 변수들은 dotenv패키지를 이용해 환경변수 파일을 외부에 만들어 접근하도록 만들 수 있다.

dotenv 설치

npm install dotenv

.env 파일 생성

필요한 변수 정보들을 다음과 같은 형태로 넣어준다.

PORT=4000
HOST=localhost
USER=root
PASSWORD=password

webpack.config.js 설정

const webpack = require('webpack');
const dotenv = require('dotenv');
dotenv.config();

//..

	plugins: [
    	//...
		new webpack.DefinePlugin({
			'process.env': JSON.stringify(process.env),
		}),

DefinePlugin?

웹팩에서 제공하는 플러그인으로, 모든 자바스크립트 코드에서 접근이 가능한 전역변수를 선언하기 위해 사용되는 플로그인이다.

전역변수를 지나치게 사용하면 글로벌 네임스페이스가 너무 많은 변수들로 오염되어 유지 보수가 힘들어질 수 있으므로 필요한 상황에서만 사용하도록 하자.

이렇게 설정하고 나면 process.env.[설정한 변수 이름]으로 해당 변수값에 접근해 사용할 수 있다.

Reference

• https://hjuu.tistory.com/24
• https://techbless.github.io/2020/03/24/env%EC%99%80-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98%EB%A5%BC-config%ED%8C%8C%EC%9D%BC%EB%B3%B4%EB%8B%A4-%EC%84%A0%ED%98%B8%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EC%99%80-undefined-%ED%95%B4%EA%B2%B0%EB%B2%95/
• webpack plugin: https://www.daleseo.com/webpack-plugins-define-environment/