Webpack
TIL | 웹팩 로더(Style, CSS)
로더-1(style, css) 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다. css-loader, style-loader loader 설치 npm install -D css-loader style-loader 로 로더를 설치 후 웹팩 설정파일에 추가한다. css-loader: css 코드를 모듈로 변환하는 역할을 한다. style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.) webpack.config.js 파일 설정 const path = require("path"); // module.exports = { mode: "devel..
TIL | 웹팩 번들 파일 생성하기
웹팩의 등장 웹 애플리케이션의 크기가 커지면서, JS 파일의 크기 또한 커졌다. 때문에 JS코드 또한 나눠서 관리했으나 이는 script의 많은 사용으로 HTTP 병목 현상이 발생하게 된다. 위와 같은 계기로 인해 모듈로 나누어 관리하는 방법들이 있으며, 대표적으로 웹팩이 존재한다. 웹팩은 다수의 파일(module)을 하나의 파일로 합쳐주는 번들러(bundler). 이때 합쳐진 파일을 번들(bundle)이라고 한다. 웹팩 설치 npm init npm install -D webpack webpack-cli npm init을 통해 npm으로 관리할 프로젝트의 json 파일을 생성한다. 터미널에서 위와 같은 커맨드를 통해 webpack와 터미널 도구인 webpack-cli을 설치한다. -D는, devDepen..
TIL | 웹팩 등장 이전 모듈의 사용
웹팩 등장 이전 모듈의 사용 모듈: 분리된 jS 파일 조각들이다. script 파일이 커지며 기능 또한 복잡해지면서 기능별로 파일을 분리하고 재사용성을 높이고자 도입하게 된 개념이다. import/export가 없던 과거에는 관련 모듈을 index.html에 직접 import하여 사용하였다. 문제점은, 전역 스코프의 오염이다. 즉, window 객체에 sum이라는 함수가 추가되는데, 이때 sum에 다른 값을 할당할 수도 있기 때문에 애플리케이션의 예측 불가와 더불어 런타임 에러가 발생한다. 런타임 에러: 프로그램이 실행되는 환경에서 발생하는 에러 // math.js function sum(a, b) { return a + b; } // // app.js sum(1, 2); // sum = 1; // co..