Babel(바벨), Polyfill(폴리필)

🧪 Babel(바벨)이란?

최신 자바스크립트 문법을 옛날 브라우저에서도 동작하도록 변환해주는 도구(트랜스파일러)

---

💡 왜 필요한가?

브라우저들은 최신 문법을 100% 지원하지 않을 수 있다. 예를 들어:

const sayHello = () => {
  console.log("Hello!");
};

이런 ES6(ES2015) 화살표 함수는 구형 브라우저에서는 에러가 날 수도 있다.

➡ Babel은 이 코드를 아래처럼 바꿔준다:

var sayHello = function () {
  console.log("Hello!");
};

이렇게 변환해주면 옛날 브라우저에서도 잘 동작한다! 👍

---

🧩 Polyfill(폴리필)이란?

브라우저가 지원하지 않는 기능을 흉내 내서 사용할 수 있게 해주는 코드

---

💡 예시

브라우저가 Array.prototype.includes()를 지원하지 않으면, 아래와 같은 폴리필이 필요함:

if (!Array.prototype.includes) {
  Array.prototype.includes = function (value) {
    return this.indexOf(value) !== -1;
  };
}

이런 폴리필을 추가하면 옛날 브라우저에서도 includes()를 사용할 수 있게 된다.

---

🧑‍💻 Babel과 Polyfill 차이 요약

구분	Babel	Polyfill
역할	문법 변환 (예: const, =>)	기능 추가 (예: includes(), fetch())
예시	let, async/await, 클래스	Promise, Array.includes(), fetch()
대상	문법(Syntax)	API와 기능(Functionality)
동작	코드 자체를 바꿈	필요한 기능을 흉내내는 코드 추가

---

🔧 실제 개발에서

• Babel은 코드를 자동으로 변환해주고
• 필요하면 @babel/preset-env + core-js로 Polyfill도 같이 적용 가능

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

그리고 .babelrc 설정:

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

이렇게 하면 필요한 폴리필만 자동으로 추가해준다.