Webpack
정의와 역할
자바스크립트 기반 정적 모듈 번들러
- 하나 이상의 진입점(entries)에서 내부적으로 종속성 그래프(dependency graph)를 만든다.
- 프로젝트에 필요한 모든 모듈을 하나 이상의 번들로 결합한다.
- HMR(Hot Module Replacement)을 제공한다. (파일 변경 시 바로 반영)
관련 특징
- 웹팩 팀이 vercel에 합류하여 Rust기반의 Turbopack을 만들었다.
Babel
정의와 역할
자바스크립트 컴파일러
- 새로운 방식의 자바스크립트(ECMAScript2015+, ES6+)로 개발한 코드를 이전 방식의 자바스크립트 코드로 변환해서 배포할 수 있게 해준다.
- 최신 자바스크립트가 실행되지 않는 브라우저에 대응하기 위해서 사용한다.
- core-js 라이브러리를 탑재하여 ES6+ 문법을 폴리필(polyfill) 할 수 있다.
- 리액트 JSX 코드를 변환시켜준다.
- 타입스크립트의 타입을 제거 해준다.
- Source map을 제공한다. (디버깅을 쉽게)
- 최대한 적은 양의 코드를 사용하려 한다.
예시 코드
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});Polyfill
정의와 역할
브라우저가 지원하지 않는 최신 기능을 제공하는 데 필요한 코드.
- Babel은 폴리필을 위한 트랜스파일러 중 하나이다.
간단한 예시를 보자. 아래 코드는 최신 브라우저에서는 잘 동작하지만, 오래된 브라우저에서는 실패한다. 객체나 메서드에 대한 구현이 없기 때문이다.
[1, 2, 3].at(-1);
Promise.resolve(1);
new Set(1, 2, 3);이때 위 코드를 실행시키기 위해서 Polyfill을 한다.
Array.prototype.at = Array.prototype.at ?? /* Array.prototype.at에 대한 자체 구현 */;문제점
최신 브라우저는 폴리필이 필요 없는데, 만들어 놓은 폴리필 스크립트를 내려 받는다. 비효율적이다.
해결 방법
- @babel/preset-env 사용
- User-agent에 따라 동적으로 스크립트 생성
- 자체 Polyfill 서비스 구축
always be fresh