코드 품질 - 바벨( Babel )

자바스크립트는 끊임없이 진화하는 언어이기 때문에

새로운 제안이 정기적으로 등록, 분석되고 가치가 있다고 판단되는 제안은

여러 단계를 거쳐 명세서에 등록됩니다!

 

명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면

특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있습니다.

명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문입니다!

 

이럴 때 바벨을 사용할 수 있습니다.

 

Babel (바벨)

바벨의 주요역할은 2가지 입니다.

 

1. 트랜스파일러

 

   바벨은 자바스크립트 트랜스파일러 이며,

   이를 실행하면 코드가 구 표준을 준수하는 코드로 변경됩니다.

   ex) ES6 코드가 동작하지 않는 환경에서 해당 코드를 ES5 코드로 변환하여 사용자에게 전달

 

 

2. 폴리필 ( poly fill )

 

  폴리필(polyfill)은 브라우저가 지원하지 않는 js코드를 지원 가능하도록 변환한 코드를 뜻합니다.

 

  새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다. 

  스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수 할 수 있게 작업할 수 있습니다.

 

  이렇게 변경된 표준을 준수할 수 있게

  기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 poly fill 이라 부릅니다.

 

 

 

공통점, 차이점

 

 

공통점

코드가 구버전 브라우저에서 아직 지원되지 않거나 동작하지 않는 환경일 때
원활한 동작을 위해 사용한다.

 

차이점

트랜스 파일러는

 

구 문법에서 업그레이드 된 신 문법을  

구형 브라우저에서 사용 했을 때 브라우저가 이해할 수 있게

구 문법으로 통 변환 시켜주는 개념

 

 

폴리필은

 

새롭게 추가된 최신 문법을

구형 브라우저에서 사용 했을 때 브라우저가 이해할 수 있게

파일, 기능단위로 구 문법에 추가 및 수정하는 개념

 

 

바벨의 한계

ES6에서 새롭게 추가된 Promise, Map, Set 같은 개념들은 바벨로 변환 불가능 

--> 구 버전의 업그레이드가 아닌 새로운 개념의 추가이기 때문

--> 폴리필로 따로 추가해 줘야함

 

 

 

기본이 중요하다.