그래서 Babel, Webpack 이 뭔데 ??

첫 웹 팀프로젝트를 하면서, Babel 과 Webpack 에 대해서는 신경조차 쓰지 않았다.

왜 ? 몰라도 아무 지장이 없었으니까.

Create-React-App (이하 CRA) 를 사용하면 바벨과 웹팩을 전혀 모른 채로 리액트로 개발을 바로 시작할 수 있었다.

처음 프로젝트를 시작할 때, CRA 를 사용하면서 들었던 말이 이거다.

지금 프로젝트 정도 스펙에서는 바벨과 웹팩을 알 필요 없다고.

반대로 생각해보면, 더 좋은 프론트엔드 개발자가 되기 위해선 결국 이해가 필요하다는 말이 아닐까 ?

 

어쨌든 우리는 CRA를 썼지만, 바벨과 웹팩이 뭔가를 해줬기 때문에 배포가 된거고, 정말 아예 모른 채로 프로젝트가 끝났기 때문에 궁금함이 남았었다. 여유가 될 때 알아봐야지, 하고 생각했었는데, 이제 여유가 됬다.

 

그럼 알아보자 !

 

---

출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음

 

Babel

 

그래서 바벨이란 무엇인가 ?

한 마디로 표현하자면, 바벨은 트랜스파일러 (transpiler) 이다.트랜스파일러는 무엇인가 ? 그리고 왜 필요한가 ?

 

 

우선, 웹 표준을 준수하는 모던 브라우저 (이하 에버그린 브라우저) 는 대부분의 ES6 사양을 지원한다.

하지만 프로젝트는 최신 ECMAScript 사양을 사용하는 ES6+ 버전으로 코드를 작성한다.

그럴 경우 에버그린 브라우저라 하더라도 지원율이 제각각이라 문제가 생길 수 있고, 특히 인터넷 익스플로러 (이하 IE) 11 같은 브라우저를 아직도 !! 사용하는 곳이 (한국의 관공서나 공공기관 같은 ..) 있다.

따라서 최신 사양으로 작성한 코드를 구형 브라우저에서 문제 없이 동작시키기 위한 무언가가 필요하다.

그리고 바로 그게 babel 이다 !

 

예를 들어, 내가 다음과 같은 코드를 작성했다고 생각해 보자.

[1, 2, 3].map(n => n ** n);

화살표 함수는 콜백 함수에 직접 선언으로 넣기에 가독성이 매우 좋고, 지수 연산자도 마찬가지다.

하지만 애석하게도 화살표 함수는 ES6 지원, 지수 연산자는 ES7 지원으로 IE 는 알아듣지 못한다 ..

 

그 때 Babel 이 위의 소스코드를 변환해 준다.

"use strict";

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

이렇게 가독성, 편리함, 강력한 최신 기능들을 이용하여 개발자가 최신 사양의 코드를 작성하면,

Babel이 이를 읽고 ES5 사양의 소스코드로 트랜스파일링 하여 브라우저에 전송한다.

 

 

Babel 은 별도의 플러그인이 필요한 경우도 있는데, (예를 들어 현재 제안 단계에 있는 사양을 트랜스파일링 하는 경우)

내 첫 웹 팀프로젝트에서 사용한 플러그인은 다음과 같다.

"devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.20.13",
    ...
}

 

---

Webpack

 

바벨을 이용하여 최신 사양의 코드를 트랜스파일링 했다. 그럼 해결인가 ? 아니다 !

우리는 자바스크립트가 브라우저에서 어떻게 동작하는 지 안다. 여러개의 자바스크립트 소스 코드 파일을 script 태그로 로드해도, 브라우저는 이를 하나의 통짜 자바스크립트 파일로 받아들인다. 즉, C, C++ 의 #include 같은 모듈 기능이 없다.

따라서 ES6 에서는 클라이언트 사이드 자바스크립트에서도 동작하는 ES6 모듈 (이하 ESM) 기능을 추가했다.

하지만, 애석하게도 우리는 ESM 을 사용하지 않고 별도의 모듈 로더를 사용한다. 그 이유는 다음과 같다.

 

• IE 와 같은 구형 브라우저에서는 ESM 을 지원하지 않는다.
• ESM 을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없다.
• ESM 이 지원하지 않는 기능 (bare import 등) 이 있고, 점차 해결되고는 있지만 아직 몇 가지 이슈가 존재한다.

 

따라서 우리는 모듈 번들러인 Webpack 을 이용한다. Babel 또한 Webpack 을 통해 로드한다.

따라서, Webpack 과 Babel 로 인하여 완전히 최신 코드를 브라우저간 호환 가능하게 트랜스파일링하고 번들링 할 수 있게 된다.

 

 

그렇다면 모듈 번들러가 하는 역할은 정확히 무엇인가 ?

모듈 번들러는 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나 (또는 여러 개) 의 파일로 번들링 해준다.

따라서 별도의 모듈 로더가 필요가 없고, HTML 파일에서 script 태그를 여러 번 쓸 필요가 사라진다.

 

따라서 우리는 Webpack 을 설치하고, Webpack 이 모듈을 번들링할 때 Babel 을 사용하여 트랜스파일링 할 수 있게 babel-loader 를 설치하면 된다.

 

 

---

 

이로써 CRA 에게 전부 위임하였던, 바벨과 웹팩이 사실 어떤 일을 해 주는 지 알아보았다 !

규모가 큰 프로젝트에서는 CRA 를 사용하지 않고 웹팩과 바벨을 직접 세팅해야 하는 경우가 생긴다고 하니, 미리 알아두고 그런 일이 생겼을 때 더 공부해 보는 게 좋을 것 같다.