Javascript Babel이란?

Babel이란

https://en.wikipedia.org/wiki/Babel_(transcompiler)
Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language.

위키에서 babel의 정의입니다.
babel은 ECMAScript 2015+(ES6+)코드를 오래된 Javascript엔진에서도 돌아가게 하는데 사용하는 transcompiler입니다. 또한 이것은 웹 개발자들에게 새로운 기능을 사용할 수 있게 해줍니다.

ECMAScript

그럼 ECMAScript란 뭘까요?

https://en.wikipedia.org/wiki/ECMAScript
ECMAScript (/ˈɛkməskrɪpt/; ES) is a JavaScript standard intended to ensure the interoperability of web pages across different browsers. It is standardized by Ecma International in the document ECMA-262.
ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server-side applications and services using Node.js and other runtime environments.

ECMAScript(이크마스크립트)는 여러 브라우저에서 웹 페이지의 상호 운용성을 보장하기 위한 JavaScript 표준입니다. 라고 하는데 이게 무슨뜻일까요?

https://www.youtube.com/watch?v=wcsVjmHrUQg
ECMAScript로 표준이 생성되기 이전에 netscape는 Javascript를 사용하고 explorer는 Jscript를 사용하는등 서로 다른 브라우저는 서로 호환이 안되는 언어를 사용하고 있었습니다. 이에 따라 개발자들은 모든 브라우저에서 작동하는 웹페이지를 만들기 위해 많은 시간을 사용하고 있었고 표준이 필요했습니다. 이때 등장한게 ECMAScript 표준입니다. 2009년 ECMAScript5, 2015년 ECMAScript6가 등장했고, 그 이후로도 계속 새로운 버전이 등장하고 있지만 큰 틀은 ES5, ES6에서 정의되었습니다.

하지만 현재 브라우저 위에서 웹 페이지를 조작하기 위해 사용되는 언어들 중 Javascript만 살아남았기 때문에 초기에 상호 운용성을 내세웠던 ECMAScript표준은 현재는 Javacript의 문법적 표준이라고 할 수 있습니다.
또한 Javascript 사용자들은 새로운 기능들과 개발 편의성을 위해 ES6+ 표준에 정의된 문법으로 Javascript를 배우는게 일반적입니다.

이제 babel의 정의를 조금 더 알게 되었습니다.
사용자들은 새로운 기능과 개발편의성을 위해 ES6+문법을 사용하고 싶어합니다. 하지만 아직까지도 오래된 JS엔진을 사용하는 환경이(대표적으로 오래된 브라우저들) 많이 남아있기 때문에 낮은 버전의 문법을 사용해야 합니다. 이것을 해결해주는게 babel입니다. 사용자는 높은 버전의 기능과 편의성을 활용해 코딩을 하면서도 babel을 통해 오래된 JS엔진을 사용하는 브라우저에서도 돌아가는 웹을 배포할 수 있게 된거죠

확인

https://github.com/lubiksss/babel-test
ES6+ 문법으로 작성된 간단한 코드를 babel로 transcompiling한 결과를 확인해보겠습니다. babel을 사용하는 방법을 다루진 않겠습니다.

대표적인 문법중 저에게 익숙한건 아래와 같습니다. 특히 제가 느끼기에 가장 큰 편의성을 제공하는 문법은 async, await입니다.

https://www.w3schools.com/js/js_es6.asp
1. cosnt, let keyword
2. arrow function
3. ... operator
https://www.w3schools.com/js/js_2017.asp#mark_async
1. async, await

이 문법으로 코드를 작성하여 babel을 돌려보겠습니다.
async, awiat 코드를 작성해서 babel을 돌리면 굉장히 길고 난해한 코드가 나와서 뺐습니다. 직접한번 해보세요.

//ES6+
const foo = 'const'
let bar = 'let'

const arrowFunction = () => {
    return 'arrow function'
}

const baz = `backtick string`

//ES5로 변환 후
"use strict";

var foo = 'const';
var bar = 'let';

var arrowFunction = function arrowFunction() {
  return 'arrow function';
};

var baz = "backtick string";

ES6+의 문법이 모두 ES5로 변환된 것을 확인할 수 있습니다.