내용 정리
- 분산된 모듈의 여러 의존성 관계를 정리하고 하나의 파일로 묶어 네트워크 비용을 최소화하는데 이런 과정을 번들링(bundling)이라고 합니다. 웹팩은 이런 번들링을 진행하는 번들러라고 할 수 있습니다. 트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 과정을 말하는데, 이를 해주는 대표적인 트랜스파일러(transpiler)가 Babel 입니다. 수많은 예시가 있겠지만 예컨대 arrow function으로 작성한 코드를 arrow function이 없던 구 표준을 준수하는 코드로 변환해주는 과정이라고 볼 수 있습니다. Polyfill은 트랜서파일러와는 다르게 좀 더 함수 중심이라고 볼 수 있는데, 예컨대 자바스크립트에 새로운 내장함수가 추가되었거나 했을 때 그 내장함수의 작동 로직을 추가해주는 거라고 볼 수 있습니다. 내장함수의 존재 여부를 체크하고, 없다면 해당 폴리필 스크립트가 실행되게끔 할 수 있습니다. 주로 새로 추가된 내장함수의 경우 MDN 하단에 폴리필 스크립트를 제공해줍니다.
꼬리 질문
- 웹팩 공식문서에서 말하는 주요 네 가지 개념에 대해 간략하게 설명해주세요
- 엔트리(entry)는 말 그대로 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로라고 할 수 있습니다. 엔트리는 포인트는 경우에 따라 1개가 될 수도, 여러 개가 될 수도 있습니다. 아웃풋(output)은 말 그대로 웹팩을 돌리고 난 뒤에 결과물의 파일 경로를 의미하고, 일반적으로 filename과 path를 지정합니다. 그리고 기본적으로 웹팩은 모든 파일을 모듈로 보고 자바스크립트만 읽어냅니다. 그렇기 때문에 자바스크립트 외에 HTML, CSS, 이미지를 포함한 assets 등을 읽을 수 있게 변환해줘야 하는데, 그 역할을 하는 것이 로더(loader)라고 볼 수 있습니다. 플러그인은 로더가 할 수 없는 추가적인 작업을 수행한다고 인지하고 있습니다.
- 폴리필 스크립트를 사용해 본 경험이 있나요?
- 웹팩을 사용하기 이전과 이후의 차이점에 대해서 설명해주세요
참고자료
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.