JavaScript/Basics

[JavaScript] 폴리필 - Polyfills and transpilers

Sonny Cucumber 2022. 3. 10. 23:28

바벨

바벨은 트랜스파일러로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줌

주요 역할은 다음과 같다

  1. 트랜스파일러 - 바벨은 코드를 재작성해주는 트랜스파일러 프로그램. 바벨은 개발자의
    컴퓨터에서 돌아가는데 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경시켜줌.
    변경된 코드는 웹사이트 형태로 사용자에게 전달. 웹팩과 같은 모던 프로젝트 빌드 시스템은
    코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌. 이런게 없으면 개발이 끝난
    코드를 한데 통합하는데 어려움이 있을 수 있음.
  2. 폴리필 - 명세서엔(specification)엔 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가
    추가되곤 합니다. 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는
    코드로 변경해줌. 반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를
    구현해야 사용할 수 있다. JS는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에
    추가할 수 있다. 물론 기존 함수를 수정하는 것도 가능. 개발자는 스크립트에 새로운 함수를 추가하거나
    수정해서 스크립트가 최신 표준을 준수할 수 있게 작업 가능

    이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의
    스크립트를 "폴리필(Polyfill)"이라 부릅니다. 폴리필은 말 그대로 구현이 누락된 새로운 기능을
    메꿔주는(fill in)역할을 합니다.
    주목할 만한 폴리필 두가지는 core js 와 polyfill.io가 있다.

    모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수입니다.

 

'JavaScript > Basics' 카테고리의 다른 글

[JavaScript] 가비지 컬렉션  (0) 2022.03.11
[JavaScript] 참조에 의한 객체 복사  (0) 2022.03.11
[JavaScript] 테스트 자동화  (0) 2022.03.10
[JavaScript] 화살표 함수 기본  (0) 2022.03.10
[JavaScript] 함수 표현식  (0) 2022.03.10