Babel, Webpack(바벨, 웹팩)

 

Chrome, Safari, Firefox, Edge 등 에버그린 브라우저의 ES6 지원율은 약 98%로 대부분의 ES6를 지원한다.

 

 

그러나 IE의 경우 약 11%의 지원율을 보이고 있다. 새롭게 도입되는 ES6+와 ES.NEXT는 브라우저에 따라 지원율에 차이를 보인다.

 

최신 ECMAScript 사양을 사용하며 프로젝트를 구형 브라우저에서도 동작하게 하기 위한 환경 구축이 필요하다. 다양한 브라우저 환경에서 동일한 프로젝트가 동작할 수 있도록 도와주는 것이 Babel과 Webpack이다.

 

Babel

 

Babel은 트랜스파일러로 높은 버전의 소스 코드를 다운시켜주는 역할을 한다.

 

[1, 2, 3,].map(n => n ** n); // ES6 : Arrow function, ES7 : 지수 연산자

 

위 코드는 Arrow function(ES6)과 지수 연산자(ES7)를 사용하는 코드이다. ES6를 지원하지 않는 IE이나 ES6, ES7을 지원하지 않는 다른 브라우저에서 위 코드는 문제가 될 수 있다.

 

이 같은 문제를 해결하기 위해 Babel을 사용한다. Babel을 사용하면 ES5 사양으로 다운 그레이드 할 수 있다.

 

'use strict'

[1, 2, 3].map(function (n) {
  return Math.pow(n, n);
}

 

Webpack

 

https://webpack.js.org/

 

Webpack은 의존성이 있는 Js, css, img 등을 하나(또는 여러 개)의 파일로 번들링 하는 모듈 번들러다. 하나의 파일로 의존 모듈이 번들링 되기 때문에 별도의 모듈 로더가 필요없고, 여러 Js 파일을 하나로 묶어주기 때문에 HTML에서 script tag 여러 개로 로드해야 하는 번거로움을 줄일 수 있다.

 

가령 100개 의 Js 파일이 필요하다고 할 때, 웹 페이지가 로드되는 동안 100개의 Js 파일을 받아와야 한다면 병목 현상이 발생할 수 있다. 그러나 Webpack을 통해 하나로 묶어주기 때문에 위 같은 상황을 피할 수 있다.

 

또한, 모듈 단위로 개발하여 유지보수성을 높일 수 있다. 하나의 파일에 모든 코드를 작성하면 몇 천줄을 넘길 수 있다. 이런 환경은 에러를 발생하기 쉽고, 유지/보수가 어렵다. 모듈 단위로 코드를 분리할 수 있어 유지보수성을 높일 수 있다.

 

트랜스파일링, 번들링

 

트랜스파일링은 변환의 개념이고, 번들링은 하나의 파일(또는 여러 개)로 묶는 개념이다.

 

HTTP1 / HTTP2

 

HTTP1을 사용할 땐, 한 번에 하나의 요청을 보내고 처리할 수 있어 번들링이 강제되었다. 

 

그러나, HTTP2가 지원되고 이 점이 개선되며 성능상의 이유로 번들링은 필요하지 않아 졌다. 그러나 Webpack은 앞선 HTTP1을 사용할 때 번들링 하던 이유 외에 의존성을 파악해 실제로 사용하는데 필요한 라이브러리만 묶어 번들링 해주어 성능 향상에 큰 도움이 된다.

 

웹 브라우저는 번들링 자체가 필요하진 않지만, 종속성과 필요한 코드만들 사용하기 위해 Webpack을 사용한다.

 

---

 

이 내용은 '모던 자바스크립트 Deep Dive' 책을 보고 공부한 내용을 다시 정리한 것입니다.

 

참고

 

모던 자바스크립트 Deep Dive - 이웅모 저자

웹팩과 바벨 개념과 역할

 

웹팩과 바벨 무엇이 다른가. 리액트에서는 뭘 써야 할까? · Tonic

 

자바스크립트 개발 환경: 웹팩과 바벨 :: chanyeong

 

ECMAScript 6 compatibility table