inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

자주 사용하는 플러그인

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

404

Edwin Y. Park

작성한 질문수 7

1

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

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

node.js 웹팩 babel eslint

답변 1

1

Edwin Y. Park

console.log(process.env.REACT_APP_API_KEY)

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

 

0

김정환

둘은 다릅니다.

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

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

 

지금 시점에서 해당 강의를 듣는 것에 대하여

1

109

3

2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)

1

218

1

에러 해결 공유드립니다

1

223

2

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

1

232

2

eslint

0

379

3

도와주세요!

0

165

2

[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전

1

144

1

질문 an error occurred while loading the image

1

468

1

webpack에서 babel-loader 사용할때 질문

1

149

1

자주 사용하는 플러그인 에서 질문이 있습니다.

1

167

1

eslint no-extra-semi 관련 질문

1

142

1

webpack5 에서 open index.html하는법 + 질문

1

166

1

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

2

299

1

혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?

1

370

1

에러없이 png안뜨시는 분들

1

273

1

Error: Cannot find module 'node:crypto'

1

463

1

깃허브 확인 문의

0

574

1

폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문

0

404

1

해쉬값과 캐쉬 갱신

1

458

1

Hash 에러 발생

1

2664

2

webpack.config.js에서의 CommonJS방식에 대한 질문

0

828

3

웹팩 버전

0

521

1

웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?

0

482

1

import해오는 두가지 방법에 대해 제가 잘 이해한건지 확인받고 싶습니다!!

0

318

1