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

🐣 이번 시간에는 !

---

지난 시간에는 웹팩(Webpack)에 대해서 살펴봤다. 지난 게시물 순서대로 살펴보면,

'번들링 · 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel)'의 순서대로 정리를 하고 있다. 뒤돌아서면 까먹는 나를 위해 해당 개념들은 순서에 따라 천천히 함께 따라 갈 수 있으니 언제든 다시 보기!

 

 

 

 

🐣 바벨(Babel)에 대해서 살펴보자!

---

1. 개념

자바스크립트 컴파일러

Babel은 자바스크립트 컴파일러로, 최신 자바스크립트를 구 버전으로 변환하여 호환성을 확보하는 역할. 자바스크립트는 인터프리터 언어인데 컴파일러가 필요한 이유는? babel을 정확히 설명하면 JavaScrpt로 결과물을 만들어주는 컴파일러이기 때문.

 

만약 자바스크립트의 특징인 인터프리터에 대해서 잘 모른다면, 이전에 정리한 게시물 참고하기!

JavaScript 자바스크립트란?

 

2. 사용하는 이유?

바벨을 사용하는 이유를 간단히 설명하면 예전 버전을 사용하는 유저가 많기 때문에 최신 자바스크립트를 구 버전으로 변환하여 호환성을 확보하는 것! 

모든 브라우저가 최신 문법, 기술(ES6) 을 지원하지 않기 때문에 구 기능(ES5)으로 변환하는 작업이 필요

 

3. babel 은 그럼 무엇을 ?

  3-1. Transform syntax (구문 변환)

트랜스파일링은 최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환

  3-2. babel-polyfill을 통해서 폴리필 기능을 지원

폴리필은 오래된 브라우저에 네이티브로 지원하지 않는 사용자가 사용하는 메서드, 속성, API가 존재하지 않을 때 추가. 바벨은 최신 문법을 오래된 문법으로 변환해 주는 트랜스파일러 역할만 할 뿐 최신 함수를 사용할 수 있는 건 아님. 폴리필은 프로그램이 처음 시작할 때, 지원하지 않는 기능들을 지원해. 바벨은 컴파일 때 실행되고 폴리필은 런타임에 실행

  3-3. JSX and React

바벨은 JSX 문법을 변환

 

---

다음은 바벨과 폴리필에 대해서!

출처 :

https://bravenamme.github.io/2020/02/12/what-is-babel/

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