반응형
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
반응형
'✍ 공부 > JavaScript' 카테고리의 다른 글
이벤트 제어하기. 쓰로틀링(throttling)과 디바운싱(debouncing) (0) | 2022.06.12 |
---|---|
JavaScript 자바스크립트 이벤트 리스너(eventListener) (0) | 2022.06.11 |
[ JavaScript ] 배열 무작위로 섞기 (0) | 2022.02.28 |
[프론트앤드 공부기록] Javascript 기초 4 (0) | 2021.08.16 |
[프론트앤드 공부기록] Javascript 기초 3 (0) | 2021.08.14 |