바벨, 웹팩, 폴리필

Babel

• 자바스크립트 코드를 변환해주는 컴파일러

• 최신 자바스크립트 문법을 지원하지 않는 환경에서 최신 문법을 사용할 수 있도록 도움
  (ES6 문법으로 코드를 작성한 코드를 바벨을 통해 ES5 문법으로 변환할 수 있다.)

• 리액트에서는 JSX 문법을 사용하기 위해서 바벨 사용
  (참고로 JSX는 정식문법이 아님)

Webpack

• 자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어 주는 도구 ➡ 한마디로 번들러

• 여러 자바스크립트 파일을 작성하면, 웹팩이 하나의 자바스크립트 파일로 만듦 (최적화 과정에서 여러개로 분리 가능)
  웹팩이 만든 자바스크립트 파일을 HTML의 script 태그에 포함시켜서 예전 버전의 브라우저에서도 동작

웹팩의 Loader

• 자바스크립트 파일이 아닌 웹자원(HTML, CSS, SVG 등)을 변환할 수 있도록 도와주는 속성

• ex) babel loader, sass loader, file loader 등

Polyfill

• 자바스크립트 표준에 새롭게 추가된 객체나 함수를 사용했을 경우, 실행 시점에 현재 환경(사용자의 브라우저)에 해당 객체나 함수(기능)가 존재하는지 검사하여 없을 때만 주입해주는 코드

• 바벨은 빌드 시점에 코드 변환, 폴리필은 실행 시점에 주입