🔔 Goal
- babel에 대해서 이해한다.
- webpack에 대해서 이해한다.
- module에 대해서 이해한다.
- bundling에 대해서 이해한다.
🌳 babel
Babel은 일종의 트랜스파일러(Transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.
바벨은 아래의 두가지의 문제를 해결할 수 있다.
- 명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우
타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.
- 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 명세에 추가되어 es6에 정의된 문법이나 함수 자체가 es5에는 존재조차 하지 않는 경우 (ex. promise)
바벨은 ES6 이후 버전을 ES5 버전으로 변환할 수 있는 것만 빌드한다.(1번의 경우)
그렇지 못한 경우들은 폴리필이라고 부르는 코드조각을 추가해서 해결한다. (2번의 경우)
폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 한다.
🌳 webpack
webpack은 단순히 얘기하자면 모듈 번들러이다.
모듈 번들러가 무엇인지에 대해서 이해한다면 webpack이 무엇을 하는 놈인지 쉽게 알 수 있다.
모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구
🍃 module
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다.
자바스크립트로 치면 아래와 같은 코드가 모듈이다.
// math.js
function sum(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
const pi = 3.14;
export { sum, substract, pi }이 math.js 파일은 아래와 같이 3가지 기능을 갖고 있는 모듈이다.
- 두 숫자의 합을 구하는 sum() 함수
- 두 숫자의 차를 구하는 substract() 함수
- 원주율 값을 갖는 pi 상수
이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하다. 이 파일 하나하나가 모두 모듈이다.
🍃 bundling
아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 한다.
웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 바벨(트랜스파일러)을 동작시켜준다.
빌드, 번들링, 변환 이 세 단어 모두 같은 의미입니다.
🌳 Reference
