![](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 옵션은 프로젝트 생성 시 모든 항목을 기본 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/E052x/btqYQxryvzV/xDJPquC2PcM6PvwFKZV3y0/img.png)
평소 간단한 테스트를 할 때 굳이 Webpack 프로젝트를 구성하지 않고 기본적인 HTML, JS, CSS 파일들을 단순 Link 하여 진행할 때가 많습니다. 하지만 CRA 프로젝트나, webpack-dev-server의 hot-module-replace 기능을 사용해본 개발자로써 해당 기능은 개발 소요 시간을 많이 줄여주고, 귀찮음을 해결해줄 수 있는 기능이란 것을 알기 때문에 webpack으로 만들지 않은 프로젝트에서도 HMR격의 기능을 사용할 수 있는지 알아보던 중 Vscode의 Extension(부가기능)중 Live Server라는 패키지를 찾았습니다. 설치부터 활용까지 방법은 아주 단순합니다. 과정은 아래와 같습니다. 1) Vscode의 `Extensions`(Ctrl+Shift+X)탭으로 이동..
- Total
- Today
- Yesterday
- state_undefined
- Function scope
- tsconfig
- android-licenses
- save-exact
- Nullish coalescing operator
- Global scope
- CRA
- ts(2564)
- leftJoin
- querySelector
- flutter doctor
- start with digit
- url mapping order
- SMUI
- webpack
- getElementById
- hmr
- craco-alias
- Lexical scope
- querySelectorAll
- NodeSelector
- jsconfig
- DOM API
- undefined
- getElementsByClassName
- getElementsByTagName
- js
- event delegation
- code technic
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |