바벨(Babel)이란,
입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러로 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다.
바벨은 ES6+ 버전 이상의 JavaScript, JSX, TypeScript 코드를 하위 버전의 JavaScript코드로 변환 시켜 브라우저에서 동작할 수 있도록 하는 역할을 한다. 공식 홈페이지에서는 이러한 바벨을 컴파일러라고 소개하지만, 엄밀히 말하면 컴파일러는 아니다. 컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 프로그램을 의미하기 때문. 바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다.
그래서 바벨은 트랜스 파일러라고 불립니다.
인터프리터와 컴파일러의 차이
둘 다 고레벨 언어를 기계어로 변환하는 번역기인건 맞지만 그 과정에 따라 따로 분류된다.
컴파일러는 전체 소스를 파악하여 번역을 진행한다면 인터프리터는 소스코드의 각 행을 연속적으로 번역하여 실행한다.
그럼 이게 어떤 차이를 보이게 되는지는 인터프리터의 특성은 4가지로 정의할 수 있다.
- 컴파일러는 전체를 한번 훑고 컴퓨터가 이해할 수 있는 기계어로 번역하는 반면, 인터프리터는 각행을 고레벨에서 중간 코드(intermediate code)로 즉각 변환&실행한다. 중간 코드는 별도의 프로그램에 의해 읽혀서 실행되어진다.
- 일반적으로는 컴파일러가 인터프리터보다는 실행이 빠르다.
- 컴파일러는 전체를 파악하여 에러를 출력하지만 인터프리터는 오류가 발생한 시점에서 그 뒤는 번역하지 않는다.
- 인터프리터 언어는 컴파일 언어보다 기계 종속성으로부터 자유롭다
자바스크립트에 어째서 컴파일러 바벨이 필요한가?
그 이유는 바벨이 고레벨 언어를 기계어로 번역하는 게 아닌, 자바스크립트로 결과물을 만들어주는 컴파일러이기 때문이다. 이런걸 소스 대 소스 컴파일러(transpiler)라고 부릅니다.
그럼 왜 자바스크립트를 자바스크립트로 변환하는 과정이 필요한걸까?
= 바벨(Babel)을 왜 사용할까?
바벨을 사용하는 이유를 알기 위해서는 먼저 크로스 브라우징(Cross Browsing)에 대한 이해가 필요합니다. 크로스 브라우징이란 플랫폼이나 각 브라우저의 렌더링 엔진의 차이로 보이는 모습이 다른 경우가 있는데, 최적화 작업을 통해 기존에 의도한 대로 보이도록 하는 작업을 말합니다. 개발을 진행하면서 간혹 최신 브라우저에서 동작하는 기능을 다른 브라우저나 이전 버전의 브라우저에서 구현해야 하는 경우, 기능 자체를 생략하거나 단순화해야 하는 상황이 발생합니다. 이런 이슈는 코드의 일관성을 해칠 수 있으며, 협업 과정에서 또 다른 문제를 야기할 수 있습니다. 바벨은 이런 문제점들을 보완하고 해결하기 위해 등장했습니다.
그렇다면 바벨은 어떻게 동작할까?
바벨의 동작 3단계
- 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계
- 출력 (Printing) : 변경된 결과물을 출력하는 단계
추상 구문 트리란 프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조이다. 이는 고수준의 언어를 기계어로 변환하는 과정에서 꼭 필요하다. 코드를 트리 구조의 데이터 스트럭쳐로 만들어낸다. 이렇게 구조화시키면 프로그래머도, 컴퓨터도, 훨씬 파악하기 쉬워지겠죠.
쉽게 말하자면 인간의 타이핑이 아닌 구조화된 트리로 코드를 변환시키는 겁니다. 바벨은 자바스크립트 코드를 받아서 AST를 만듭니다. 그리고 그걸 활용하여 새로운 자바스크립트 코드를 출력한다.
그렇다면 중간의 변환은 누가 담당할까? 바로 바벨 플러그인(plugin)이다. 플러그인은 어떤 코드를 어떻게 변환할지에 대한 규칙을 정의한다. 이러한 플러그인은 필요하다면 직접 만들어 쓸 수 있다. (플러그인들을 목적에 따라 묶어놓은 세트를 프리셋(preset)이라고 합니다.)
plus +
바벨 폴리필(polyfill)
아무리 하위 자바스크립트로 변환한다고해도 한계는 있다. 바벨을 사용한다고해서 최신 함수를 사용할 수 있는 건 아니다. 다만 문법을 변환하여 자바스크립트로 변환할 뿐.
문법이 아니라 함수의 경우는 바벨로는 해결할 수가 없다. 브라우저 엔진이 구현하지 않는 새로운 함수라면 이를 브라우저에서 돌릴 수 있는 다른 방법이 필요한데 그게 바로 폴리필이다.
위 같은 상황에서 폴리필은 스크립트에 사용자가 원하는 최신 함수를 추가한다. 자바스크립트는 매우 동적인 언어이기 때문에 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있기 때문에 폴리필이 이 역할을 대신한다.
폴리필은 특정 기능이 지원되지 않는 브라우저를 위해 사용한다. 바벨은 컴파일시에 실행되지만 폴리필은 런타임에 실행된다는 게 차이점이다. 말그대로 구현이 누락된 새로운 기능을 메꿔주는 fill 역할을 수행한다.
