오늘은 Babel과 Polyfill에대해 학습을 해보자 🔥🔥🔥
저번 포스팅에서 Bundler를 학습하며 Babel에 대한 글을 읽게 됐는데 흥미로운 부분이고 필자가 잘 모르는 부분이기때문에 따로 학습을 하고 이렇게 포스팅을 한다!!
Babel ❓
자 Babel이 무엇일까, 덤벨친구? ㅋㅋ
Babel 공식 웹 페이지로 입장하면 다음과 같은 소개를 볼 수 있다.
Babel is a Javascript compiler
아니 Javascript는 interpreter(인터프리터) 언어 아니었나??
compile은 compile(컴파일) 언어만 하는게 아닌가??
자 그럼 먼저 인터프리터 언어란 무엇인지, 컴파일 언어란 무엇인지 학습해볼 수 있다.
컴파일언어 vs 인터프리터언어 🔥
컴파일언어- 전체 코드를 기계어로 변환하여 실행파일을 만든다, 그리고 이 실행파일을 실행시켜 원하고자 하는 동작을 유도한다.
즉, 컴파일언어는 한번에 전체 코드를 읽는 컴파일단계
만들어진 실행파일을 실행시키는 실행단계 나누어져 코드가 실행된다.
종류로는 C, C++, C#, JAVA가 있다.
이렇게 단 한번 컴파일을 시켜놓으면 컴퓨터가 읽기 좋은 실행파일을 실행만 시키면 되기 때문에 코드 실행 속도가 빠른 장점이 있고 대신, 파일이 클수록 컴파일 시간이 오래 걸릴 수 있다.
인터프리터 - 프로그래밍 언어의 소스 코드를 바로 바로 한줄씩 읽어 실행한다.
즉, 컴파일 언어와 다르게 컴파일 과정이 없이 코드 한줄마다 해석하여 실행한다.
종류로는 Python, Javascript, Ruby 등이 있다.
이렇게 한 줄씩 코드를 해석하고 실행하는 과정을 거치다보니 반복 수행되어 실행 속도가 느리다는 단점이 있다. 대신, 컴파일 과정을 거치지 않아 컴파일을 기다리지 않아도된다.
다시 본론으로 ❗️
Babel is a Javascript compiler
라는 문구에 의구심을 갖게 된다. Javascript는 interpeter언어인데 compile을 한다고??
그렇다 사실 많은 브라우저들이 동시에 같은 Javascript문법을 호환하지는 않는다. 새로운 JS문법이 나오더라도 이를 브라우저에서 구현하는데 까지는 시간이 걸린다. 그럼 이 사이에 브라우저에서 신문법을 읽을 수 는 없는 걸까?
Babel이 필요한 이유 ❗️
여기에서 Babel이 필요한 이유를 찾을 수 있다. ECMAScript를 지원하는 브라우저가 모두 다르기 때문에 해당 브라우저가 이해할 수 있는 버전 수준으로 Javascript를 다시 해석해서 브라우저가 읽을 수 있는 수준의 Javascript 파일로 compile해주는 것이다.
정확하게 말하면
transpiler의 역할을 한다.
ECMAScript ❓
여기서 ECMAScript 뭘까? ES6문법 이런거 보지않았나??
바로 그때의 ES가 ECMAScript의 약자이다!! 이것도 몰랐다 ㅎㅎ
ECMA=> Javascript의 표준
한글로치면 국립국어원인 것이다.
국립국어원에서 "홍박"이라는 단어를 홍박사님을아세요? 라는 말의 축소라고 정의하면 우리는 그 표준을 따를 수 있다. 대신 각각 사람마다 이를 이해할 수 있는 사람이 있고 없는 사람이 있다. 이를 이해할수있도록 변환해주는 사람이 Babel같은사람이라고 볼 수 있는 것이다.
polyfill ❓
자, 그럼 polyfill이란 무엇일까?
polyfill은 쉽게 말해 충전솜덩이다. 충전솜뭉치!
그럼 뭐를 충전해준다는 의미일텐데..
자 Babel을 통해 Javascript언어를 브라우저가 이해할 수 있는 Javascript언어로 변환해주었다. 이를 이제 Javascript engine이 읽을 것이다. (런타임 환경:브라우저, node.js)에서 읽을 것이다.
그럼 읽을 수 있다고 모든 함수를 실행할 수 있을까
만약 나는 축구선수이다. 그런데 야구공 커브 던지는법을 책으로 보여줬을 때 이 축구선수는 야구공 커브를 잘 던질 수 있을까? 아니다. 그저 읽을 수 있게만 해준거고 행동은 할 수 없다. 이 행동이 가능하도록 채워주는 것이 polyfill이다.
polyfill: 변환된 script언어를 읽어서 함수를 실행할 수 없을 때 이 polyfill로 부터 최신 함수를 추가할 수 있다.
즉, 최신 함수 코드 덩어리이다.
babel/polyfill은 이제 사용하지 않는다 ❓
기존의 polyfill library인
@babel/polyfill
@babel/plugin-transform-runtime
은 이제 사용하지 않는다.
Babel은 7.4버전에서 부터 @babel/polyfill 을 depeciated(더 이상 사용하지 않는다)했다.
왜일까??
@babel/polyfill
전역 공간에 polyfill을 채워 넣었기 때문에(import 방식으로 바벨 폴리필을 추가했었다.) 전역 스코프에서 polyfill끼리 충돌 (동일한 네이밍)할 수 있다는 단점이 있었다.
구현된 필요하지 않은 폴리필까지 전부 번들에 포함되어 번들 크기가 커지는 단점이 있었다!
즉, 전역에서 import 해오다보니 충돌의 위험이 있었다!
@babel/plugin-transform-runtime
이 분의 블로그를 많이 참고했고 위 캡쳐는 위 작성자 분이 정리해주신 개념입니다 🙇🏻♂️
지금은 core-js@3을 사용한다 ❗️
core-js@3은 전역공간 오염 문제와, 바벨 런타임 플러그인의 인스턴스 메소드 문제를 완벽하게 수정한
완벽에 가까운 polyfill library라고 생각하면 쉽다.
정리
Babel은 브라우저에게 ES(ECMAScript)규격에 맞는 이해할 수 있는 ! 그런 javascript를 transpiling 해주고 polyfill은 이러한 변환에도 브라우저가 실행할 수 없는 함수나 기능에 대한 정보를 모두 담고있어서 import해서 쓸수있도록해주는 충전재 같은것이다.
위 두개를 이용해 크로스브라우징이 가능하고 어떤 브라우저든 Javascript를 잘 읽을 수 있게해준다 ❗️
