Babel 과 Babel 이 필요한 이유

📌 Babel 이란 ?

Babel is a JavaScript Compiler ...?
Babel is a JavaScript Transpiler ...!

같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다.

 

 

📍 Babel 등장 이유

Cross Browsing 을 돕기 위해 등장하였다.

🤔 Cross Browsing (크로스 브라우징) ?
브라우저나 기기의 종류에 관계없이 사이트가 의도대로 보여지고 작동되게 하는 작업. (호환성)
브라우저마다 렌더링 엔진이 다르기 때문에 개발자의 의도대로 작동하지 않는 경우가 발생한다.
그래서 크로스 브라우징 작업이 추가로 필요함. 😂

 

 

📎 Babel 이 빌드하는 과정

1. Parsing (파싱) : 코드 → AST 변환 과정
2. Transforming (변환) : AST → 원하는 형태로 변환 [Babel Plugin 설정 중요 ⭐]
3. Printing (출력) : 변환된 결과물 출력

 

•  Plugin : 문법 변환 규칙을 하나하나 세세하게 적용할 때 사용

•  Preset : 자주 쓰는 규칙들을 묶어 놓은 세트로, 한번에 적용할 때 사용

 

 

📌 Babel-polyfill 이란 ?

최신 ECMAScript 환경을 제공하기 위해
코드가 실행되는 환경에 존재하지 않는 메서드들을 추가하는 역할을 한다.

ex. 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서

      각 Object.prototype 에 붙여주는 작업 진행.

 

 

📍 Babel vs Babel-polyfill

Babel 은 Compile-time 에 실행되고, Babel-polyfill 은 Run-time 에 실행된다.

 

 

•  현재 이 기술을 써도 되는지 안되는지 검수 사이트

https://caniuse.com/