다시보는 babel 과 polyfill

자바스크립트는 끊임없이 변하는 언어이다.

ECMAScript의 새로운 버전이 출시되면서 새로운기능 출시와 기존의 기능 변경이 이루어진다.

특히나 ES5 에서 undefined을 가리키는 this는 window 객체를 가르켰는데, 그대로 undefined으로 가리키도록 변경사례가 있다.

 

이렇게 언어자체가 발전하면서 변경되고 추가되는 사항은 언어가 변하는것이지 브라우저가 그대로 지원한다는 소리는 아니다.

즉, javascript와 브라우저 는 별개로 생각해야한다.

만약에 ES2022 문법을 1980년 브라우저에 돌린다고 생각한다면, 돌아갈까? 언어는 40년이 지나 새로운 기능이 엄청나게 추가됬는데, 옛날 브라우저에서는 그런 명세가 없기 때문에 원하는 대로 동작하지 않을 수 있다.

 

그래서 최신의 javascript코드를 표준을 준수하는 코드로 변경해주는 것이 babel의 역할이다.

즉, 바벨은 javascript -> 표준 javascript 로 변환해주는 transpiler 이다.

 

근데 이제껏 개발하면서 내코드가 최신코드라서, 브라우저가 옛날꺼라서 안돌아간 적이 없다.

크롬은 최신의 자바스크립트 문법을 빠르게 따라가지만, 다른 브라우저는 아닐 경우가 있다.

그래서 간혹 크롬에서는되는데 다른브라우저에서는 안될 때가 있고, 웹사이트 중 "크롬이 아니면 정상동작하지 않을 수 있다" 라는 문구가 보이기도 한다.

 

이런 문제 없이 모든 브라우저에 호환성을 맞추기 위해서 babel은 필수라고 생각해도 무방하다.

또한 바벨뿐 아니라, 리액트를 사용한다면 JSX문법, Typescript 등의 정적언어도 지원하기 위해서 여러 트랜스컴파일러가 필요하다.

고수준에서 아주 옜날의 자바스크립트인 저수준으로 바꾸어, 개발은 모던하게하고 배포는 호환성있게 할 수 있다.

 

Babel 동작원리 이해하기

바벨을 설치한다.

npm install --save-dev @babel/core @babel/cli

이렇게 설치하고서 아래 명령어를 입력하면, 트랜스컴파일링 된 결과물이 /lib 폴더안에 생성된다.

npx babel index.js --out-dir lib

하지만 아무 변화가 없을 것이다.

preset과 plugin 이 없다면 아무일도 하지 않는다.

plugin은 어떻게 변환할건지에 대한 기능이고, preset은 plugin을 모아놓은 종합선물세트다.

 

예를 들어서 ES6 문법인 arrow function 을 ES5로 컴파일하고 싶다면 arrow function 에 대한 플러그인을 설치하고

npm install --save-dev @babel/plugin-transform-arrow-functions

 

바벨의 설정파일인 .babelrc 폴더를 만들어, plugin을 추가해주어야한다.

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

그리고서 다시 cli 명령어를 실행하면 잘 변환된 결과를 확인할 수 있다.

 

그런데 만약 ES6의 더많은 문법들을 ES5로 전환하고싶다면 매번 plugin을 설치할 수는 없는 노릇이다.

그래서 plugin을 모아놓은 preset을 설치하면되는데, 아래와 같은 공식 프리셋들이 있다.

@babel/preset-react
@babel/preset-env
@babel/preset-typescript
@babel/preset-flow
@babel/preset-jest

 

아래 프리셋을 설치하고 적용해보면 좀더 다채롭게 변함을 알 수 있다.

npm install --save-dev @babel/preset-env

const add = (a, b) => {
  return a, b;
};

// ----

"use strict";

var add = function add(a, b) {
  return a, b;
};

let, const 도 사라지고 var 로 변하고, arrow function도 일반 함수로 변경되었다.

babel/preset의 경우 이렇게 단순히 변환말고도 특정 브라우저를 선택하여 몇버전까지 지원하도록 한다던지의 설정을 해줄 수 있다.

 

 

만약 특정브라우저를 지정하지 않을경우 모든 브라우저에게 제공되도록 변경되는데 왼쪽의 5줄의 코드가 저렇게 커져버린다.

프론트개발자의 자질은 UI/UX이고, 그것은 곧 사용자가 서비스를이용하는 속도가 될 수있고, 번들파일이 크다면 그 속도는 줄어든다.

모든 브라우저의 호환성 하나만을 위해서 다른 단점을 불러올 수 있다.

그렇기 때문에 적절한 스코프를 찾아 설정하는 것이 중요하고, 아마 대중적인 설정법이 있으니 그것을 따라가면된다.

그리고 요즘 브라우저는 대부분 ES6를 지원하기 때문에, 그런점들도 다 체크해서 필요없는 컴파일링은 줄이는 것이 좋다.

 

보통은 바벨만 사용하는 경우는 없고, 프론트 개발환경을 구축하기 위해서는 또다른 환경을 구축해야되기 때문에 webpack과 같은 번들링 툴과 함께 사용한다.

Polyfill 이란

babel은 코드를 컴파일 타임에 트랜스컴파일링 해주고

폴리필은 런타임에 등록되지 않은 메서드나 기능을 주입해준다.

 

예를들어서 Promise는 ES5문법 자체에 존재하지 않는기능이다.

그럼 이상태에서는 ES6에서 작성한 Promise 코드가 ES5에서는 존재 자체를 안하니, 변경할 대상이 없는 것이된다.

이때 폴리필은 그런 존재하지 않는 기능들을 추가해주는 역할을 한다.

 

@babel/preset-env에는 폴리필도 포함되어있다.

 

하지만 이역시 마찬가지로 사용하지 않는 폴리필도 모두 불러오기 때문에 적절한 설정을 해서, 필요한 부분만 가져와 번들파일 크기를 줄이는 것이 중요하다.