CS

[CS] Webpack, Babel, Polyfill에 대해

Gapus 2023. 12. 7. 08:00

웹팩(Webpack)

설명

자바스크립트 애플리케이션을 위한 정적 모듈 번들러
웹팩은 애플리케이션을 구성하는 다양한 모듈들을 하나로 묶어주고, 번들링된 결과물을 생성
이를 통해, 애플리케이션의 로딩 속도를 개선하고, 모듈 관리를 용이하게 해준다.
다양한 로더와 플러그인을 제공하여, CSS, 이미지, 폰트 등을 다양한 파일을 처리 가능

사용하는 경우

모듈 로딩 및 의존성 해결

웹팩은 자바스크립트 및 다른 종류의 파일들을 모듈로 인식하고, 이들 간의 의존성을 해결하여 번들링

번들링

웹팩은 의존성 그래프를 기반으로 애플리케이션을 하나의 번들 파일로 생성

로더 사용

웹팩은 로더를 통해 다양한 종류의 파일을 처리하고 변환

플러그인 사용

웹팩의 플러그인은 번들링 과정에서 추가적인 작업을 수행하고 확장 기능을 제공

설치 명령어

웹팩을 사용하기 위해 webpack 모듈을 설치해야 한다.
일반적으로 프로젝트의 개발 의존성으로 설치하며, 프로젝트 루트 디렉토리에서 다음 명령어 실행

npm install webpack --save-dev

바벨(Babel)

설명

최신 자바스크립트 코드를 이전 버전의 자바스크립트 코드로 변환해주는 도구
최신 버전의 자바스크립트 문접과 기능을 사용하여 개발
바벨을 통해 이를 이전 버전의 자바스크립트로 변환하여 모든 브라우저에서 동작할 수 있도록 한다.
이를 통해, 크로스 브라우징 이슈를 해결하고, 최신 자바스크립트 문법을 사용할 수 있게 된다.

사용하는 경우

문법 변환

바벨은 ES6 이상의 최신 자바스크립트 문법을 하위 버전의 문법으로 변환해주어
모든 브라우저에서 호환되는 코드로 만듬

환경 대응

바벨은 특정 환경에 대한 대응을 위해 필요한 플러그인과 프리셋을 제공
예를 들어, @babel/preset-env는 목표 환경에 필요한 최소한의 변환만 수행

설치 명령어

바벨을 사용하기 위해 @babel/core와 필요한 플러그인 및 프리셋을 설치해야 한다.
일반적으로 프로젝트의 개발 의존성으로 설치하며, 프로젝트 루트 디렉토리에서 다음 명력어를 실행

npm install @babel/core @babel/preset-env babel-loader --save-dev

폴리필(Polyfill)

설명

웹 개발에서 특정 기능을 지원하지 않는 구형 브라우저에서 해당 기능을 사용할 수 있도록 도와주는 코드 조각
예를 들어, ES6의 Promise나 Array.from과 같은 메서드는 구형 브라우저에서 지원하지 않는 경우가 있다.
폴리필을 사용하면 이러한 기능을 구현하여 구형 브라우저에서도 사용 가능
폴리필은 바벨과 함께 사용되는 경우가 많고, 바벨이 자동으로 필요한 폴리필을 추가해주기도 한다.

사용하는 경우

브라우저 호환성

폴리필은 구형 브라우저에서 지원하지 않는 기능을 구현하여 해당 기능을 사용할 수 있도록 한다.

추가적인 모듈

폴리필은 특정 기능을 지원하기 위해 필요한 추가적인 모듈을 제공
core-js와 regenerator-runtime은 대표적인 폴리필 패키지

설치 명령어

폴리필을 사용하기 위해 필요한 패키지는 프로젝트의 요구사항에 따라 다를 수 있다.
대표적으로 core-js와 regenerator-runtime 패키지를 사용하는 경우가 많다.
프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 필요한 폴리필 패키지를 설치

npm install core-js regenerator-runtime --save