Babel은 하위 호완성을 위한 자바스크립트 컴파일러이다.
개발을 하다보면 babel이 적용되어 있는 개발환경을 본 적이 자주 있을 것이다. 나 또한 더러 목격했으나 개발에 치여 외면하고 살다가 지금이라도 기록하고자 한다.
컴파일러와 인터프리터
바벨의 정의를 이해하자면 우선 컴파일러와 인터프리터에 대해 알고있어야 한다.
- 컴파일러
- 스크립트를 한번에 실행하여 기계어로 변경한다.
- 속도가 빠르나 한번에 실행하기에 용량이 크다.
- 전체를 파악하여 에러를 출력하기에 실행전 에러를 확인할 수 있다.
- C, C++, JAVA는 컴파일러 언어에 해당한다.
- 인터프리터
- 스크립트를 차례로 실행하여 기계어로 변경한다.
- 속도가 느리나 차례로 실행하기에 용량이 작다.
- 실행 중 에러를 발견하면 실행을 중단하고 이후 스크립트는 실행하지 않는다.
- Python, JavaScript는 인터프리터 언어에 해당한다.
잠시만, 그럼 자바스크립트는 인터프리터 언어인데 왜 컴파일러인 Babel이 필요할까?
그 이유는 바벨이 고레벨 언어를 기계어로 번역하는 게 아닌, 자바스크립트로 결과물을 만들어주는 컴파일러이기 때문이다.
이는 소스 대 소스 컴파일러(transpiler)라고 부른다.
필요성
결론부터 말하자면 크로스 브라우징(cross browsing) 때문이다.
크로스 브라우징은 다양한 브라우저에서 서비스를 제공하려는 움직임이라고 표현할 수 있는데, 프론트엔드 개발과 기술은 끊임없이 변화하고 발전하는 것에 비해 아직까지 브라우저는 하위 브라우저 점유율이 높다.
이와같이 하위 브라우저와의 호환성과 효율성을 높히기 위함이다.
바벨은 새로운 문법이나 타입스크리트 혹은 JSX 같이 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 즉 위와 같은 기술들이 모든 브라우저에서 작동되는 하위버전의 자바스크립트 언어로 변환된다는 것이다.
동작
- 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계
- 출력 (Printing) : 변경된 결과물을 출력하는 단계
여기서 *추상 구문 트리는 프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조이다. 이는 고수준의 언어를 기계어로 변환하는 과정에서 꼭 필요한 것이다. 코드를 트리 구조의 데이터 스트럭쳐로 만든다. 이렇게 구조화시키면 프로그래머도, 컴퓨터도, 훨씬 파악하기 쉬워지게 된다.
바벨은 실상 파싱과 출력을 담당한다. 여기서 변환은 바벨 플러그인(plugin)이 담당하는 것이다.
플러그인(plugin)은 어떤 코드를 어떻게 변환할지에 대한 규칙을 정의한다. 이러한 플러그인은 필요하다면 직접 만들어 쓸 수 있다. 그리고 플러그인들을 목적에 따라 묶어놓은 세트를 프리셋(preset)이라고 한다.
