DefinePlugin 관련; env와 관련하여, (21.06.2... - 인프런

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

자주 사용하는 플러그인

DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함

작성

273

DefinePlugin 보고 이런생각이 들었습니다.

React.js나 Next.js로 프론트엔드 개발을 할 때, 서버주소를 보통 env || env.develop 등으로 관리했습니다. 강의와 답변을 보기 전에는 이러한 라이브러리 및 프레임워크가 env 파일을 웹팩으로 설정하여 자동으로 불러오게 만들어 주는것이라고 여겼습니다. console.log(process.env.NODE_ENV);설정한 부분을 콘솔에 기록하는 부분의 코드가 동일했기 때문입니다. 그런데 답변을 보니 DefinePlugin과 env 설정이 다른 것으로 보여서 개념상의 차이가 어떤 부분인지 싶어 질문드립니다.

node.js 웹팩 babel eslint

답변 1

Edwin Y. Park

질문자

console.log(process.env.REACT_APP_API_KEY)

다시 확인해 보니 env 의 객체가 달랐지만, 모두 env 객체를 통해서 호출하는 것으로 보여집니다. DefinePlugin 역시 env 파일에 종속되는 개념인지 궁금합니다.

김정환

지식공유자

둘은 다릅니다.

process는 노드 런타임에서 사용하는 객체인데요 이중 process.env에 환경변수 값이 있습니다. 가령 쉘에서 MODE=production 이란 환경변수를 설정하고 노드 어플리케이션을 실행하면 process.env.MODE에 "production"이란 문자열 값이 들어 있습니다.

한편 DefinePlugin은 번들할 자바스크립트 코드안으로 값을 주입하는 역할을 하는 웹팩 플러그인입니다. new DefinedPlugin({mode: JSON.stringify("production")}) 으로 설정하고 웹팩으로 코드를 번들하면 결과물 코드에 mode="procution" 이란 코드가 추가됩니다.

인프런 커뮤니티 질문&답변

DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함

DefinePlugin 보고 이런생각이 들었습니다.