요즘 프론트엔드 개발하는 사람들은 vue.js나 react.js를 사용할 것이다. 그러면 자연스럽게 ES6+의 최신 문법을 사용하기 위해 babel과 babel-polyfill을 사용하게 된다. 나 같은 경우에는 공식 가이드에서 알려준 대로 하다 보니 babel이 정확히 뭔지도 모른 채 최신 문법을 사용하기 위해 필요한 패키지정도만 알고 설치하고 사용하고 있었다. 그러다 뒤늦게 babel에 대해 자세히 알아보기 시작했다.
babel
babel은 ECMAScript 2015+ 코드를 현재 및 이전 버전의 브라우저 또는 환경에서 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구다. ( https://babeljs.io/docs/en/index.html)
그렇다. babel은 ES6+ 코드를 브라우저에서 해석할 수 없기 때문에 브라우저의 환경과 호환되는 JavaScript로 변환해주는 컴파일러였던 것이다. ES6의 arrow function이나 template strings 등 편리한 문법들을 사용하려면 이 babel을 설치해야 된다.
그런데 나는 chrome에서 babel설치 없이 ES6의 문법들을 사용했던 것으로 기억하고 있다. 그건 바로 브라우저가 ES6의 문법을 지원하기 때문이다. “어라? 방금 babel을 쓰는 이유는 ES6+ 코드를 브라우저에서 해석할 수 없기 때문에 브라우저 환경에 맞춰 JavaScript로 변환한다고 말해놓고 이제는 브라우저가 ES6의 문법을 지원한다고?”라고 생각할 수 있는데 브라우저 버전에 따라 지원하는 브라우저도 있고, 지원하지 않는 브라우저도 있기 때문이다.
ES6 지원 브라우저 현황을 보면 chrome이나 firefox같은 경우에는 거의 지원하고 있지만 ie11같은 경우에는 거의 지원되지 않는다고 볼 수 있다. 그래서 babel을 사용하여 여러 브라우저에서 호환될 수 있게 해야 한다. 또, 새로운 ES가 나오면 babel을 통해 브라우저가 지원하기도 전에 가장 먼저 사용할 수 있다.
지금까지 babel을 사용하면 최신 문법을 브라우저에서 사용할 수 있다는 것을 알 수 있었다. 그렇다면 babel-polyfill은 뭘까?
babel-polyfill
babel-polyfill은 ES6+에서 새롭게 추가된 Promise, WeakMap와 같은 내장객체나 Array.from, Object.assign와 같은 정적 메소드를 구형 브라우저에서도 작동할 수 있도록 변환해주는 도구다. 쉽게 말해 ES6+에서 새롭게 추가된 객체나 메소드들을 구형 브라우저에도 작동할 수 있도록 변환해준다는 것이다.
babel, babel-polyfill 차이점
babel은 ES6+의 문법을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이라면 babel-polyfill은 ES6+에서 새롭게 추가된 객체들을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이다.
이제는 babel과 babel-polyfill의 차이점을 알게 되었다. 그런데 이제는 어떤 상황에 babel-polyfill을 포함해야 하는지 고민할 필요가 없다. babel 7.4.0부터는 babel-polyfill을 직접 사용하므로 이젠 따로 설치할 필요가 없어지게 되었다. (관련 링크)
마치며
babel을 사용한 기간에 비해 늦게 babel과 babel-polyfill의 차이점에 대해 알게 되었다. 그리고 이제는 babel에 기본적으로 babel-polyfill이 포함되어 babel이 문법적인 변환과 새롭게 추가된 객체들까지도 변환한다고 볼 수도 있게 되었다.
추가로 babel이 ES6를 어떻게 변환하는지 궁금하다면 여기서 직접 ES6 코드를 입력해보면 알 수 있을 것이다.
