![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cbrY1Y/btq0A3QktKK/PvkwJsNyQRWs9gB0KWPwK0/img.png)
Dotenv와 Webpack DefinePlugin을 활용하여 개발/배포 환경의 환경 변수 설정을 분리하였습니다. 들어가며 웹 개발 환경에서는 여러 가지 환경 변수(상수)를 선언하여 개발을 진행할 환경이 종종 생깁니다. Dotenv를 사용하여 환경 변수를 선언할 수 있는 환경을 구성합니다. 보통 웹 페이지 개발을 할 때 개발 서버에서 개발과 테스트를 마친 뒤 개발 서버 배포 후 라이브 서버에 배포하는 프로세스로 일을 진행하게 되는데 개발 서버의 상수 변수와 배포 서버의 상수 변수가 따로 설정되어야 하는 상황이 있습니다. (예로 API 서버 호스트를 들 수 있겠습니다.) 이러한 상황을 환경 변수로 관리하기 위해서 설정한 환경 변수를 Webpack에 넘겨주어 JS context에서 사용할 수 있습니다. We..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dJlM9o/btqZ3eZcgEB/I19Z0uaCP6drAmBBqZsLv0/img.png)
Webpack을 사용하여 개발환경을 구축하는 과정을 서술합니다. 우선 필요한 패키지는 다음과 같습니다. - webpack - webpack-cli - webpack-dev-server - html-webpack-plugin webpack: 웹팩의 코어입니다. webpack-cli: 간단히는, 웹팩 커맨드를 터미널에서 실행할 수 있게 해 줍니다. webpack-dev-server: 개발서버를 열 수 있습니다. 이로써 개발을 더 쉽게 해 줍니다. html-webpack-plugin: 간단히는, Webpack으로 번들링 한 JS 파일을 내 Html파일에 자동으로 삽입해 줍니다. 1 npm 프로젝트를 생성합니다. npm init -y 명령어로 간단히 생성합니다. -y 옵션은 프로젝트 생성 시 모든 항목을 기본 ..
주요 디펜던시 요소 - react, react-dom - webpack, webpack-cli, webpack-dev-server - @babel/core, @babel/preset-env, @babel/preset-react - babel-loader, css-loader, style-loader, file-loader - html-webpack-plugin, clean-webpack-plugin, mini-css-extract-plugin react, react-dom react: 리액트 코어 입니다. (!) react-dom: 리액트가 DOM을 컨트롤 할 수 있는 Methods를 제공합니다. webpack: 모듈 번들러인 웹팩의 코어입니다. webpack-cli: webpack을 커맨드 라인에서 사..
- Total
- Today
- Yesterday
- android-licenses
- craco-alias
- event delegation
- NodeSelector
- SMUI
- undefined
- state_undefined
- Nullish coalescing operator
- hmr
- webpack
- querySelectorAll
- url mapping order
- ts(2564)
- leftJoin
- flutter doctor
- Global scope
- start with digit
- getElementsByTagName
- Function scope
- CRA
- jsconfig
- code technic
- DOM API
- js
- getElementsByClassName
- tsconfig
- querySelector
- Lexical scope
- save-exact
- getElementById
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |