babel과 webpack

🔔 Goal

• babel에 대해서 이해한다.
• webpack에 대해서 이해한다.
• module에 대해서 이해한다.
• bundling에 대해서 이해한다.

🌳 babel

Babel은 일종의 트랜스파일러(Transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.

바벨은 아래의 두가지의 문제를 해결할 수 있다.

1. 명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우

타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다.

2. 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 명세에 추가되어 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

• javascript.info
• 캡틴 판교님의 웹팩 핸드북