⁉️ 바벨이란 무엇인가

바벨 ???????????????????????????????????????????????????????????????????

바벨 공식 페이지 들어가보면 다음과 같이 바벨을 정의하고 있다.

바벨은 자바스크립트 컴파일러다.

이 문장만 본다면 인터프리터 언어인 자바스크립트를 컴파일러 언어처럼 사용할 수 있다는 말처럼 보인다.

이 생각이 맞는지 계속 살펴보겠다.

공식 문서에 따르면, 바벨은 다음과 같은 기능을 제공한다.

• Transform syntax
• Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
• Source code transformations (codemods)
• And more! (check out these videos for inspiration)

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

공식 문서의 예를 통해서 살펴본다면, 바벨은 우리가 map 메서드에 콜백함수를 화살표 함수로 매개변수로써 준다면 그걸 익명 함수로 바꾸어서 해독한다라고 볼 수 있겠다.

쉽게 말하면 신문법을 구문법으로 바꿔준다? 이게 바로 온고지신의 정신인가.

특히, 바벨은 자바스크립트에 대한 컴파일 뿐만 아니라 리액트에서의 컴파일링 영향력은 엄청나다.

리액트에서의 바벨

순수 리액트 언어만으로 코딩을 한다면 매우 빡셀것이다.

그렇기 때문에 리액트에서 바벨의 역할이 매우 중요하다. 바벨은 리액트에서 JSX 문법을 날것의 리액트 형태로 변환해준다.

const Component = () => {
  return <div>이것은 JSX 입니다.</div>
}

다음과 같은 코드가 바벨의 input으로 들어온다면

const Component = () => {
  return React.createElement("div", null, "이것은 JSX 입니다.")
}

output으로 다음과 같은 코드를 반환해주게 된다.

또한, 바벨은 타입스크립트 역시 지원해주지만 타입스크립트의 지식이 부족한 관계로 다음에 다시 다뤄보도록 하겠다.

앞서 던졌던 바벨을 이용해 컴파일러 언어처럼 사용할 수 있는가에 대해서는 컴파일러 언어가 동작하는 방식과 결이 다르기 때문에 컴파일러 언어로서의 기능은 할 수 없다고 판단했다.