TIL - 20220617 (부제 : webpack에 dotenv, dotenv-webpack 설정)

 2일 전에 이러한 리뷰를 받았다.

실제 업무에서는 지금 공부하는 상황처럼 개발용 서버만 존재하는 것이 아닌 실제 배포 서버도 존재할 것이기에 이런 경우에 해당 코드를 어떻게 수정하면 좋을지 고민해보시라는 말씀의 리뷰였다. 독학으로 진행할 때는 이런 경우를 생각조차 못했을텐데 또 공부할 수 있는 기회가 되어서 좋았다.

 

  환경 변수를 관리하는 라이브러리인 dotenv라는 라이브러리가 있다. dotenv는 설정한 디렉토리에 위치하는 .env 파일로부터 환경 변수를 읽어오기 때문에 이를 이용하여 개발 환경과 배포 환경에서의 환경 변수를 다르게 둠으로써 리뷰를 해결할 수 있다. 먼저 dotenv 라이브러리를 설치하자.

npm i dotenv

 

CRA 환경이 아닌 직접 webpack 설정을 했기 때문에 다음과 같이 진행한다.

webpack과 dotenv를 이용한 webpack.config.js

webpack과 dotenv 라이브러리를 불러온 다음 process.env.NODE_ENV로 현재 환경이 무슨 환경인지 알 수 있다. 이를 이용하여 값이 'development'이면 개발 환경 변수를, 'production'이면 배포 환경 변수를 이용하도록 설정한다. 지금은 개발 서버와 배포 서버가 따로 존재하지 않기 때문에 코드를 다르게 설정하지 않았지만, 따로 존재하면 코드를 다르게 간단히 설정할 수 있다. 다음으로 module.exports return 값에 webpack.DefinePlugin()으로 이용할 환경 변수를 담아주면 된다.

 

하지만, 여기서 dotenv-webpack으로 더욱 간단하게 해결할 수 있다.

npm i dotenv-webpack

dotenv와 dotenv-webpack을 이용한 webpack.config.js

webpack 라이브러리를 불러오지 않아도, 이용할 환경변수를 webpack.DefinePlugin()에 담아주지 않아도 new Dotenv()로 해결할 수 있다.

 

실제 업무에서 생각해야 할 부분을 생각할 수 있게 되어서 값진 경험이였고 생각해보지 못하고 해보지 못한 경험을 해본다는건 항상 짜릿하다. 더 열심히 나아가자!