[CS] Webpack, Babel, Polyfill에 대해

웹팩(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

 

---