Webpack, Babel, Polyfill

윤지영·2023년 8월 30일

자세히 더 알아보자! :)

목록 보기

2/7

구 브라우저에서도 최신자바스크립트 코드를 작동하도록 변환해주는 컴파일러(트랜스파일러) 프로그램
최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해 사용
높은 수준의 언어 (Python, Java, C) 등의 언어를 컴퓨터가 이해할 수 있도록 낮은 수준의 언어(어셈블리어)로 변환
ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다.
ES6이상에서 새롭게 추가된 Promise, Map, Set 같은 전역객체들이나 String.padStart등 전역 객체에 추가된 메서드등은 코드 변환이 어려워
일부 기능들은 polyfill로 추가해줘야 한다.

“가장 훌륭하고 좋은 최신 기술을 브라우저에서 지원하든 하지 않든 사용 가능하게 하는 것이 폴리필의 기능이라는 것을 알 수 있습니다.”

브라우저에서 지원하지 않는 최신 자바스크립트 코드를 브라우저가 이해할 수 있게(랜더링이 가능하게) 지원하는 코드 :: 크로스 브라우징 문제 해결
- 브라우저에서 실행되는 시점(런타임 시점)에 필요한 기능을 주입
폴리필(Polyfill)은 최신 ECMAScript 환경을 만들어 준다.
바벨은 ES6 => ES5로 변환할 수 있는 것들만 변환을 하는데,
ES6에서 비동기 처리를 위해 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우 에러가 발생한다.이러한 경우 Polyfill을 이용해서 이슈를 해결할 수 있다.

대표적인 JavaScript 모듈 번들러로 JavaScript 파일을 포함한 에셋을 컴파일, 번들링 하는 데 사용된다.
'빌드'라는 과정을 통해서 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작시켜준다. (자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드함)
여러 개의 모듈들을 하나의 정적인 에셋으로 묶어서 제공하면 사용자가 요청하는 파일의 수 적어지고 이는 곧 사용자 경험 개선으로 이어진다.
웹 팩은 기본적으로 JavaScript 및 JSON 파일만 해석이 가능하다.
따라서 webpack으로 애플리케이션을 빌드할 때, import한 웹 자원 파일을 해석하기 위한 적절한 로더가 필요하다. (loader를 통해 앱에서 사용할 수 있는 모듈로 변환)
loader는 Typescript와 같은 다른 언어를 js 문법으로 변환하거나 이미지를 data URL 형식의 문자열로 변환하고, css 파일을 js에서 직접 로딩할 수 있도록 도와준다.

생태계가 풍부하고 안전성이 뛰어나다.
웹팩에서 제공해주는 개발 서버
- 변경 사항을 자동으로 새로고침 해주는 라이브 리로딩(Live reloading) 기능
- 새로고침 없이 런타임에 브라우저의 모듈을 업데이트하는 핫 모듈 교체(HMR, Hot Module Replacement) 기능
- 서브파티 라이브러리 관리나 CSS 전처리, 이미지 에셋 관리 등에 있어서 다른 번들러보다 강점을 보인다.