[JavaScript] Babel, Webpack, Polyfill이란?

1. Babel

: JavaScript 컴파일러로 모던 자바스크립트 코드를 과거 구 표준을 준수하는 코드로 변환시켜 준다.
(*컴파일 : 주어진 언어로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스)
: 최신 버전의 자바스크립트가 실행이 안 되는 구버전 웹브라우저를 대응하기 위해서 사용된다.
: ES6 코드를 ES5 코드로의 변환과 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal까지 처리해 준다.

*바벨이 필요한 경우*
: 새로운 문법인 경우
- const, let
- spread operator
- arrow function
- class
- destructuring

 

2. Webpack

: JavaScript 모듈 번들러로 빌드를 통해 여러 파일들을 하나로 만들어준다.
(빌드 : 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 있다.)
: 웹페이지를 보여주기 위해 수많은 파일을 서버에 개별적으로 요청하는 것이 아닌 모듈들을 하나의 파일로 묶어서 제공하여 사용자 경험도 훨씬 개선된다.

 

3. Polyfill

: 브라우저가 이해할 수 없는 코드에 대하여, 이해할 수 있는 코드로 제공
: 바벨이 ES6에서 ES5로 변환이 가능한 것만 변환한다면 폴리필은 ES5에서 변환할 수 있는 대상이 없는 경우 사용된다.
: 크로스 브라우징 문제를 해결해 주는 기술

*폴리필이 필요한 경우*
: ES5의 전역에 존재하지 않는 객체, 메서드는 컴파일하지 못한다.
- 새로운 객체 (Promise, IntersectionObserver, Set, Map …)
- 기존 객체의 새로운 메서드 (Array.prototype.includes, Object.entries …)
- 새로운 함수 (fetch)

참고
:https://iancoding.tistory.com/m/175
:https://happysisyphe.tistory.com/m/49