webpack·Babel·polyfill은 각각 어떤 역할인가요?

이렇게 답해 보세요 (핵심 답변)

webpack은 여러 JavaScript 모듈과 CSS·이미지 같은 자산의 의존성 그래프를 분석해 배포용 번들로 묶고 분할(Code Splitting)하는 번들러입니다. 반면 Babel은 최신 JavaScript 문법이나 JSX, TypeScript를 구형 브라우저도 이해할 수 있는 하위 문법으로 바꾸는 트랜스파일러(컴파일러)입니다. 마지막으로 polyfill은 문법 변환만으로는 해결되지 않는 Promise, Array.prototype.at 같은 누락된 런타임 표준 API를 실행 환경에 채워 넣는 코드입니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 모듈 묶기(webpack), 문법 변환(Babel), 런타임 API 보완(polyfill)은 각기 다른 문제를 해결하므로 문제 상황에 맞는 도구를 설정해야 합니다.
2. 지원 대상 브라우저(browserslist)를 명확히 정의해야 불필요한 트랜스파일과 과도한 polyfill로 인한 번들 비대화를 막을 수 있습니다.

면접에서 자주 하는 실수

Babel만 설정하면 구형 브라우저에 없는 모든 최신 내장 객체나 브라우저 전용 Web API까지 자동으로 생겨난다고 오해하면 안 됩니다.