Webpack

---

Webpack은 모듈 번들러로, 여러 개의 자바스크립트 파일과 자산(CSS, 이미지 등)을 하나의 번들로 묶어주는 역할을 한다.
이를 통해 코드 관리와 배포가 더 효율적으로 이루어질 수 있다.

Webpack 설치 및 실행 방법

설치 : npm install --save-dev webpack webpack-cli
빌드 및 실행 : npx webpack

Webpack 주요 기능

1. 번들링: 여러 파일을 하나의 파일로 합친다. 이는 HTTP 요청 수를 줄이고, 성능을 향상시킨다.
2. 코드 분할(Code Splitting): 필요에 따라 코드를 분할하여 필요한 순간에만 로드할 수 있다.
3. 로더(Loaders): CSS, 이미지, HTML 등의 파일을 자바스크립트 파일로 변환한다.
4. 플러그인(Plugins): 번들링 과정에서 다양한 작업을 수행한다. 예를 들어, 파일 압축, 환경 변수 설정 등이 있다.
5. 핫 모듈 교체(Hot Module Replacement): 개발 중에 코드 변경 사항을 즉시 반영하여 브라우저를 새로고침할 필요 없이 변경된 부분만 업데이트한다.

Babel

---

Babel은 자바스크립트 컴파일러로, 최신 자바스크립트 문법(ES6 이상)을 구형 브라우저에서도 동작할 수 있는 ES5 문법으로 변환해준다.
이는 최신 버전의 자바스크립트가 실행이 안되는 구버전 웹브라우저를 대응하기 위해 사용된다. ES6 코드를 ES5 코드로 변환해주는 것부터 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다.

Babel 설치 방법

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

Babel 주요 기능

1. 트랜스파일링(Transpiling): 최신 자바스크립트 코드를 구형 브라우저에서도 호환되는 코드로 변환한다.
2. 플러그인 시스템: 다양한 플러그인을 통해 특정 문법 변환을 추가하거나 제거할 수 있다.
   예를 들어, 화살표 함수 변환, 클래스 변환 등이 있다.
3. 프리셋(Presets): 여러 플러그인을 묶어 한 번에 적용할 수 있는 설정 모음이다.

Polyfill

---

Polyfill은 최신 자바스크립트 기능을 지원하지 않는 구형 브라우저에 이러한 최신 기능을 추가해주는 라이브러리이다.
=> 최신 ECMAScript 환경을 만들어주는 것
바벨은 ES6 => ES5로 변환할 수 있는 것들만 변환을 하는데, ES6에서 비동기 처리를 위해 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우 에러가 발생한다.
이러한 경우 우리는 Polyfill을 이용해서 이슈를 해결할 수 있다.

Polyfill 설치 방법

npm install --save @babel/polyfill

Polyfill 주요 기능

1. 호환성 보장: 최신 자바스크립트 기능을 모든 브라우저에서 사용할 수 있게 한다.
2. 자동 적용: Babel과 함께 사용하면 필요한 폴리필을 자동으로 적용할 수 있다.
3. 개별 폴리필 사용: 특정 기능에 대한 폴리필만 선택적으로 추가할 수 있다.