Polyfill, Webpack, Babel

🔅 Webpack이란?

• 모듈 번들링이라고 하는데, html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 합니다.
• 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 의미합니다.

왜 Webpack을 사용할까?

• SPA를 사용하면서 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함됩니다. 종속된 여러 자바스크립트 파일들을 하나로 묶음으로서 관리하기 편하다.
• 파일을 컴파일 할 때 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에, 이를 해결하기 위해 여러 자바스크립트 파일을 하나의 파일로 번들링한다. 하나의 자바스크립트 파일로 만들기 때문에 웹페이지 성능 최적화를 해준다.

 

🔅Babel 이란?

ES6+ 버전의 자바스크립트나 typescript 혹은 JSX와 같이 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주는 도구이다.

예) 크롬, 사파리, 파이어폭스 등 대부분의 브라우저는 ES6 버전을 지원해준다. 하지만 인터넷 익스플로러11의 경우 지원을 해 주지 않는다. 따라서 ES6를 지원하지 않는 브라우저의 경우 구버전으로 바꿔 지원해야 한다.

 

바벨 빌드 단계

• 파싱(Parsing): 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
• 변환(Transforming): 추상 구문 트리를 변경
• 출력(Printing): 변경된 결과물을 출력

바벨은 파싱과 출력을 담당하고, 바벨 플러그인은 변환을 담당한다. 바벨 플러그인은 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타낸다.

플러그인을 매번 설정해도 되지만, 필요한 플러그인을 목적에 따라 세트로 묶어놓은 preset을 사용하면 더 편리하게 사용할 수 있다.

 

실무에서는 바벨을 직접 사용하는 경우보다는 웹팩으로 통합해서 사용하는 경우가 더 많습니다. 이 때 로더 형태로 제공되는 babel-loader를 사용합니다.

 

 

🔅 Polyfill 이란?

신규 Javascript API를 오래된 버전의 브라우저에서도 사용할 수 있도록 하는 방법입니다.

 

오래된 버전의 브라우저에는 자바스크립트에서 흔히 사용하는 Promise나 Set 객체가 없는 경우가 있습니다. 실제로 Array.prototype.at() API는 Chrome 92 이상에서만 지원되기도 합니다. 

바벨은 ES6+를 ES5로 변환할 수 있는 것들만 변환을 하는데, Promise와 같이 변환할 수 있는 대상이 없는 경우에는 에러가 발생합니다. 이러한 문제를 폴리필을 통해 해결할 수 있으며, Promise를 ES5로 변환할 수는 없지만 ES5의 방식으로 구현하여 해결하는 것입니다.

 

이렇게 브라우저에서 지원하지 않는 기능들의 구현을 채워주는 스크립트를 Polyfill이라고 합니다.

 

import 'core-js/actual';

core-js를 사용하면 오래된 브라우저에서도 최신 기술을 지원할 수 있습니다.

 

Polyfill의 문제

core-js를 사용하면 폭넓은 브라우저를 지원할 수 있다는 장점이 있지만, 불러와야 하는 Javascript 코드가 많아진다는 단점이 생깁니다.

최신 버전의 브라우저에서는 이미 포함된 메서드임에도 불구하고, 불필요한 Polyfill 스크립트를 내려받아야 합니다.

 

• @babel/preset-env: 브라우저의 지원 범위를 설정하면 Polyfill을 안정적으로 포함하면서 스크립트의 크기를 감축할 수 있습니다.

 

🔅 References

• https://toss.tech/article/smart-polyfills

똑똑하게 브라우저 Polyfill 관리하기

• https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%84%EC%88%98-Webpack%EC%9D%B4%EB%9E%80

• https://devowen.com/293

Babel이란 무엇인가?