폴리필(Polyfill)과 바벨(Babel) 비교하며 개념 체크!

🐣 바벨(babel)? 폴리필(polyfill)?

---

바벨에 대해서 공부를 하다보면 폴리필이란 개념에 대해서 자연스레 접하게 되는데, 얼핏 들어서는 둘이 비슷해보이지만 차이점이 명확히 존재하기 때문에 한번 정리해보고자 한다. 꼬우꼬우! 

 

https://img.freepik.com/free-photo/top-view-arrangement-with-white-cotton_23-2148446610.jpg?w=996&t=st=1718612496~exp=1718613096~hmac=0909707d593deb68c0c9dbb5c3d70fec8d3d1487d0efc5610e86689caf518f0b

 

참고로 bebel 에 대한 개념은 아래 게시물에 정리해뒀으니 참고

바벨(Babel)에 대해서 알아보자!

 

🐣 폴리필(polyfill)

---

1. 개념

Polyfill은 최신 자바스크립트 기능을 구현하여 호환성을 확보하며, 새로운 기능이나 속성을 사용할 경우 구 버전 브라우저에서도 정상적으로 작동하도록 도와줌. 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미 함. polyfill은 충전솜이란 의미를 가지고 있는데, 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는다고 해서 polyfill 이라고 함.

 

2. 잉? 바벨이 구버전에서도 동작하도록 변환해준다며? polyfill은?

babel 을 사용한다고 최신 함수를 사용할 수 있는 건 아님. babel 은 문법을 변환하여 javascript 로 변환하는 transpiler 역할만 할 뿐임. 앞에서 설명한대로 polyfill 은 프로그램이 처음에 시작될 때 지원하지 않는 기능들을 추가하는 것. 즉, babel 은 컴파일시에 실행되고 babel-polyfill 은 런타임에 실행되는 것.

 

• 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없음.
• 그래서 저걸 매꾸기 위해 polyfill 을 사용. (Map, Promise, Set 등을 사용가능한 객체로 만들어줌)
• babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안.

 

---

궁금증은 해결됐따!

 

 

출처

https://despiteallthat.tistory.com/187

https://velog.io/@katanazero86/polyfill%ED%8F%B4%EB%A6%AC%ED%95%84-%EC%9D%B4%EB%9E%80

https://velog.io/@suyeon9456/Babel