[개발지식] Webpack과 Babel은 왜 쓰이는 건지 알고 계신가요?

개발지식

정현수 2022. 1. 26. 13:54

개발 이후의 이야기

우리가 리액트를 사용해서 개발을 뚝딱뚝딱 하고 나면 npm build 입력 한 방에(CRA 기준) 빌드가 완료가 됩니다.

리액트 개발에서 대표적인 라이브러리인 create-react-app은 개발 환경부터 빌드까지 모든 것이 다 갖추어져 있죠

하지만 프론트엔드 개발자라면 그 뒷단의 이야기에 대해서 알 필요가 있습니다.

자신의 프로젝트를 온전히 커스터마이징 하고 싶다면, CRA를 이용하지않고 환경 설정부터 빌드 세팅까지 전부 스스로 해야하거든요.

그 중에서도 모듈 번들러와 자바스크립트 트랜스파일러에 대해서 알아보겠습니다.

웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다.

번들러, 말 그대로 여러 개의 파일을 하나의 파일로 모아주는 역할을 합니다.

여러 개의 파일을 하나로 모아주는 것은 왜 필요할까요?

이전에 모듈 번들러가 없을 때는 HTML에 모든 스크립트 파일을 불러왔어야 했습니다.

<html>
  <body>
    <script src="./index.js" />
    <script src="./app.js" />
    <script src="./src/Card.js" />
    ...
  </body>
</html>

이런식으로 말이죠

그러다가 ES2015부터 모듈 시스템이 등장했습니다.

exports로 모듈을 내보내고, require로 모듈을 불러와서 사용할 수 있었습니다.

그러면서 아래와 같은 장점들을 얻을 수 있었습니다.

그리고 ES6부터 import, export 구문이 나오면서

원하는 변수, 함수만 들고오기 쉬워졌습니다.

그리고 이 때부터 script 태그에 type="module"으로 설정할 수 있게 되면서

모듈 형태의 자바스크립트를 HTML에서 불러올 수 있게 됐습니다.

그리고 이제 index.js 하나의 모듈만 불러오면

index.js에서 import하고 있는 다른 모듈들은 자동적으로 불러오게 되었습니다.

<html>
  <body>
    <script src="./index.js" type="module" />
  </body>
</html>

하지만 위와 같은 것들은 아직 모든 브라우저에서 지원을 하지 않기 때문에

모든 파일들을 하나의 모듈로 모아줄 소프트웨어가 필요했고, 그래서 나온 것이 바로 웹팩입니다.

웹팩은 하나의 진입점으로부터 의존하고 있는 파일들을 전부 모아서 하나의 파일로 만들어줍니다.

바벨(Babel)은 자바스크립트 트랜스컴파일러입니다.

트랜스컴파일러는 변환 전에도 자바스크립트, 변환 후에도 자바스크립트입니다.

같은 언어로 왜 변환을 시키는 것일까요?정확히는 최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환시킵니다.

변환 전

// 화살표 함수 (ES6)
// 지수 연산자 (ES7)
[1, 2, 3].map(n => n ** n);

변환 후

// ES5
"use strict";

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

ESNext(ES6 이후 버전)은 개발자들에게 많은 편의성을 가져다 줬지만 하나의 문제가 있습니다.

바로 브라우저 호환성인데요, 몇몇의 브라우저들은 ESNext 자바스크립트를 지원하지 않습니다.

그래서 최신 문법을 사용하는 많은 프로젝트를 대부분의 브라우저에 호환시키기 위해서

바벨을 이용해 호환이 되는 자바스크립트 버전으로 낮춘 다음 사용하는 것입니다.