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/
Author And Source
이 문제에 관하여(CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/CRA없이-환경변수-설정하기-dotenv-ReferenceError-process-is-not-defined저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)