(프론트엔드의 첫걸음) 바벨(Babel) 이란?

 

바벨 (Babel)

최신 자바스크립트 문법을 공부하면서 많이 들었던 단어가 바로 바벨(Babel) 이다.  그렇다면 바벨은 무엇일까?

 

바벨(Babel)이란, 입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러이다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다.  JavaScriptES6 에서 JavaScriptES5 로 변환해준다는 얘기다. 현재는 바벨을 사용하여 JSX 문법, 타입스크립트(TypeScript) 와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있다. 

 

 

바벨(Babel) 실행하기

// npm init
> npm init -y

// 필요한 패키지 설치
> npm install @babel/core @babel/cli  
> npm install @babel/plugin-transform-arrow-functions 
> npm install @babel/plugin-transform-template-literals @babel/preset-react

바벨을 사용하기 위해서는 @babel/core 를 필수로 설치해야 한다.