[JS] 바벨(Babel)과 폴리필(Polyfill)

이의섭·2021년 12월 27일
1
post-thumbnail

자바스크립트는 끊임없이 진화하는 언어입니다. ES5, ES6, ...등등 새로운 버전이 등장하면서 새로운 메서드가 등장하거나 기존의 메서드를 수정되기도 한다고 엄격 모드에서 확인했었습니다.

😊바벨

바벨은 트랜스파일러로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다. 바벨의 주요 역할은 다음과 같습니다.

1. 트랜스파일러

바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달되어 버전 차이로 인한 호환성 문제를 해결 해 줍니다. 웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줍니다. 이런 과정을 통해 커밋을 할 때 마다 자동으로 빌드 - 런 을 시켜주나 봅니다.

2. 폴리필

자바스크립트의 새로운 버전의 새 기능이은 명세서라는 곳에 등록된다고 합니다. 때문에 명세서에는 기존에 없던 내장 함수에 대한 정의가 추가되곤 하는데 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준울 준수하는 코드로 변경해줍니다.

반면, 새롭게 표준에 추가된 함수는 아직은 트랜스파일러를 통해 자동으로 변환이 불가능하기때문에 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다. 자바스크립트는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있다고 합니다. 또한 기존 함수를 수정하는것도 가능한데 이렇게 새로운 기능을 추가하거나, 기존 함수를 수정한 스크립트를 폴리필(Polyfill)이라고 부릅니다.

💬요약

트랜스파일러와 함께 폴리필을 사용하면 호환성에 대한 문제를 완벽하게 해결할 수 있을것 같습니다.

profile
사용자 중심 생각하는 프론트엔드 개발자가 되고 싶은..

0개의 댓글