Babel이란 무엇일까?

 

0. 바벨이란?

 

바벨은 입출력이 모두 자바스크립트인 컴파일러다. ( 소스 대 소스 컴파일러 ) 

ECMAScript2015+ 코드를 모든 모든 브라우저에서 동작하도록 호환성을 지켜준다.

JSX 문법, 타입스크립트(정적 타입 언어), 코드 압축 등도 포함한다

 

📌 알고 넘어가기

컴파일러

한 언어로 작성된 소스 코드를 다른 언어로 변환한다

 

트랜스파일러

한 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것

추상화 수준을 유지한 상태로 코드를 변환한다.

트랜스파일 후에도 여전히 코드를 읽을 수 있다

 

 

1. 사용 이유

• 브라우저마다 사용 언어가 약간씩 달라서 코드를 이해하지 못하는 브라우저가 있을 수도 있다
• 컴파일러인 바벨은 ES2015+ 이상의 코드들을 모든 브라우저에 맞게 동작하게 도와준다. 따라서 크로스 브라우징 문제 해결이 가능하다

 

2. 바벨의 동작

바벨은 세 단계를 거쳐 코드를 빌드한다

1. 파싱 (Parsing)

코드를 읽고 추상 구문 트리(AST)로 변화하는 단계

2. 변환 (Transforming)

추상 구문 트리(AST)를 변경하는 단계.

이 단계에서 실제로 코드를 변경한다

3. 출력 (Printing)

변경된 결과물을 출력한다

 

여기서 바벨은 파싱과 출력만 담당하고 변환 작업은 다른 '플러그인'이 처리한다

하지만 코딩할 때 필요한 플러그인을 계속 설치할 수는 없다

따라서 플러그인들을 세트로 묶은 '프리셋'을 이용한다

 

 

 

 

 

🙇‍♀️

https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html

https://github.com/vi2920va/FE_interview/blob/main/FrontEnd/Babel.md