Webpack, Babel, Polyfill
- 해당 페이지에서는 Webpack, Babel, Polyfill 의 등장과 전반적인 개념적 내용을 소개해드릴 예정이에요.
- 추가적인 사용방법은 따로 다루지 않을거에요. 대신, 추천 영상 및 포스트로 이동하실 수 있도록 내용을 소개드릴게요.
Webpack
- 코드의 재사용/유지보수를 위해 파일을 분리한 것을 모듈이라고 해요. 자주 사용하는 코드는 모듈로 분리하는 것이 좋다는 것 정도는 알고 계실거에요. 하지만, 개발 편의성을 위해 모듈을 너무 많이 만들면 어떻게 될까요?
- 저희가 웹 애플리케이션을 만들고, 사용자가 저희의 웹 사이트를 보려할 때 내부적으로 아래와 같은 과정이 발생해요.
- 웹 애플리케이션 완성 시, 웹 서버에 HTML, CSS, JavaScript 파일을 배포해요
- 사용자가 브라우저를 통해 웹 사이트에 접근하면, 브라우저는 사용자에게 웹 사이트를 보여주기 위해 웹 서버에 HTML, CSS, JavaScript 등의 리소스를 요청해요.
- 웹 서버는 리소스를 포함해 응답해요. 이 과정이 끝나면 비로소 사용자는 웹 사이트를 볼 수 있게 되요.
- 그런데 만약 모듈이 너무 많아지면, 아래와 같은 문제가 발생하게 되요.
- 모듈이 많으면 그만큼 서버에 요청하는 HTTP 통신횟수가 많아져요.
- 페이지 로딩시간과 네트워크 비용이 증가해요.
위의 문제를 해결하기 위해, 서버로 요청하는 HTTP 개수가 감소되도록, 개발할 때는 모듈로 나눠 개발하고 웹 서버에 배포할 때는 하나의 파일로 묶어 배포하는 방법을 생각할 수 있어요.
여기서, 여러 모듈을 하나로 묶는 작업을 번들(Bundle)이라고 하고, 묶어주는 도구를 모듈 번들러(Module Bundler)라고 해요. Webpack은 이 모듈 번들러의 하나에요.
즉, Webpack은 여러 파일을 하나의 파일로 묶는 모듈 번들러 중 하나라고 정리할 수 있어요. 모듈 번들러는 프론트엔드 측에서 서버로 HTTP 요청 시, 요청 개수를 줄여줌으로써 성능을 향상시키고, 공백 등을 없애므로 리소스를 최적화시켜줘요. 이와 같은 이유로 사용자 경험이 좋아져요. 더 궁금한 내용이 있다면 여기를 클릭해주세요. 추천하는 포스트에요!
Babel
- Babel이 탄생하게 된 이유는 크로스 브라우징과 관련이 있어요.
- 크로스 브라우징은 브라우저 및 플랫폼에 따라 기본적으로 요소들이 보여지는 모습이 다르기 때문에, 이러한 차이를 최소화하기 위한 작업들을 의미해요. 만약 일부 최신 브라우저에만 동작하는 기능을 다른 브라우저에 구현해야 하는 경우가 발생하면, 그 기능을 단순화하거나 생략해야 하는 일이 발생할 수 있어요.
Babel
- 이 이슈를 해결하기 위해 생겨난 툴이 Babel(바벨)이에요.
- 바벨은 ES6+ 버전 코드를 하위버전 코드로 변환해주는 자바스크립트 컴파일러에요.
- 정리하면, 바벨은 ES6+ 버전의 자바스크립트 코드를 하위버전(ES5)으로 변환함으로써 최신버전의 자바스크립트가 지원되지 않는 다른 브라우저에서도 동작할 수 있도록 하는 자바스크립트 컴파일러에요.
- Babel의 처리단계는 크게 3단계로 나뉘어요. 사용방법에 대해 자세히 알아보고 싶으시다면 여기를 클릭해주세요.
코드를 읽고 AST로 변환하는 과정
- Babel은 자바스크립트 코드를 받아서 AST를 만들고, 그걸 활용하여 새로운 자바스크립트 코드를 출력해요.
- AST(추상구문트리)는 프로그래밍 언어 문법에 따라 소스코드의 구조를 나타내는 계층적 프로그램 표현이에요.
적용된 플러그인을 통해 AST를 탐색하고 변경하는 과정
- AST를 변환하는 단계는 사실 Babel의 플러그인이 담당해요. 플러그인은 코드를 어떻게 변환할지에 대한 규칙을 정의해요.
- 여기서, 플러그인의 묶음을 프리셋(preset)이라 해요. 프리셋을 설정하여 필요한 플러그인들을 목적에 따라 세트로 묶어서 적용하기도 해요.
- 현재 바벨은 env 하나로 합쳐서 편리하게 사용할 수 있어요. 대표적인 프리셋은 ES6+로 변환하는 preset-env가 있어요.
수정된 AST에서 새로운 코드를 생성하고, 변환된 결과물을 출력하는 과정
Polyfill
- 하지만, Babel만으로는 모든 ES6+ 코드를 변환할 수 없어요.
- 어떤 ES6+ 문법은 정상적으로 Babel에 의해 컴파일되지만, 어떤 문법은 컴파일되지 못해요. 이 때 필요한 게 Polyfill이에요.
- MDN에서는 Polyfill를 "이전 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는 데 필요한 코드입니다"라고 정의하고 있어요.
- 이 부분에서, Babel과 Polyfill의 개념이 헷갈리기 시작할 수 있어요. 아래 내용을 보고 정리하도록 해요.
Babel(바벨)
구 브라우저에서, 최신 자바스크립트 코드를 사용할 수 있도록 변환해주는 컴파일러(트랜스파일러)에요.
ES5에서 자바스크립트 문법이 아니었던 ES6+의 문법들을 구 브라우저에서 사용할 수 있도록 변환해줘요.
컴파일 시간(Compile-time)에 코드를 구 브라우저에서 사용가능하게 변환해요.
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn MorePolyfill(폴리필)
브라우저가 이해할 수 없는 코드에 대하여, 이해할 수 있는 코드 소스를 제공해줘요.
자바스크립트 문법으로 읽히지만, 정의되지 않은 객체/메소드/함수를 정의해줘요.
Babel이 컴파일하지 못한 전역 객체/메소드/함수들을 브라우저에서 실행되는 시점인 실행 시간(Run-time)에 변환해줘요.
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn More