초보자도 쉽게하는 바벨 Babel 설치, 사용법 (자바스크립트 ES6 문법 ES5로 자동변환)
자바스크립트는 ES6라는 문법이 존재합니다. 자바스크립트를 조금 더 편리하게 작성하고, 그리고 조금 더 프로그래밍 언어답게 작성하자는 취지에서 생겨난 새로운 문법입니다. 시간이 지나며 ES6가 보편적으로 사용되기 시작했고, 그래서 자바스크립트 가르칠 땐 필히 ES5문법을 먼저 가르치고 ES6문법을 추가로 가르치곤 했죠.
하지만 요즘 자바스크립트 교육 추세를 보아하니..
얼마전 까지는 전통적인 ES5문법을 배운 후 ES6문법을 따로 교육했지만
지금은 아예 처음부터 ES6문법으로 가르치는 곳들이 많아졌습니다. 가장 유명한 곳이 Codecademy죠. 웹에디터 기반으로 프로그래밍을 가르치는 곳인데 얼마전 자바스크립트 교육과정을 개편하며 ES5문법을 치워버렸습니다. 한국도 점차 ES6기반으로 문법레슨을 제공하는 곳이 많아지리라 예상합니다.
아무튼 let, const 등을 사용하는 ES6 문법으로 자바스크립트를 작성하면 옛날 브라우저와의 호환성이 좋지않기 때문에 반드시 ES5문법으로의 변환과정을 거쳐야합니다. 수동으로 해도 되지만.. ES6문법을 ES5문법으로 자동으로 변환해주는 babel이라는 고마운 패키지가 있는데 이걸 이용해 자동으로 ES5 문법으로 변환된 .js 파일을 생성하는 작업을 해보겠습니다.
babel은 일단.. node.js를 설치한 후 터미널을 사용해야합니다.
이런 작업에 거부감이 든다면 당연히 수동으로.. 해도.. 되긴됩니다.
Babel 사이트로 들어가셔서 직접 Javascript ES6문법으로 작성된 코드를 집어넣으면 ES5 문법으로 변환해줍니다.
(간단하죠?)
하지만 본격적으로 개발을 시작하게되면 이런 번거로운 수동작업을 자동화해놔야 밥먹을 시간도 많아지고 집에서 넷플릭스볼 시간도 생깁니다. 터미널에서 npm run babel을 입력하는 것 만으로 자동으로 ES5 문법 .js 파일이 생성되는 마법을 보여드리겠습니다.
얼른 babel을 설치해봅시다.
1. babel은 보통 npm으로 쉽게 설치합니다. 그리고 npm을 이용하려면 당연히 node.js가 필요합니다.
"babel을 설치하려면 선행 프로그램을 깔아야한다니 시부랄것" 이라고 생각하진 마시고 babel뿐만 아니라 나중에 편리한 자바스크립트 플러그인들을 이용하기위해 node.js는 거의 필수니 웹개발자라면 node.js 얼른 하나 장만합시다.
사이트로 들어가 자신의 OS에 맞는 Node.js를 다운받아 설치까지합니다.
버튼이 두개 나올텐데 최신버전보다는 왼쪽의 'Recommended for most users' 버전을 설치하는 것이 정신건강에 이롭습니다.
2. 설치하셨으면 윈도우는 명령 프롬프트 혹은 cmd, 맥은 런치패드에서 '터미널'을 검색해서 실행합니다. (윈도우의 경우 시작메뉴에 검색란이 있죠? 거기서 'cmd' 라고 검색하시면 됩니다.)
node -v
npm -v
이런 식으로 명령어를 입력해서 node와 npm이 잘 깔렸는지 확인해봅니다. 앞으로 이 까만창은 터미널이라고 부를겁니다. (맥북은 이쁜 하얀창입니다.)
3. 방금 열었던 터미널은 지금 필요없으니 닫고, 탐색기에서 우리의 자바스크립트 작업용 폴더를 하나 만들어줍니다.
흔한 프론트엔드 프로젝트처럼 index.html 파일, 그리고 js 폴더내에 main.js 자바스크립트 파일 하나를 만들어줍시다.
그리고 이번엔 터미널을 그 작업 폴더 경로에서 열어줘야하는데.. 이렇게 하시면됩니다.
윈도우 :
아까 만든 작업용 폴더로 들어간 뒤에 폴더 내부의 흰바탕에서 shift + 우클릭을 합니다.
여기서 명령창 열기(혹은 powershell열기)를 누르면 됩니다.
맥 :
아까 처럼 하얀 터미널을 열고
cd 폴더경로
를 입력하면 그 폴더까지 경로가 이동됩니다.
폴더 경로는 어디서 찾냐면.. finder에서 그 폴더를 우클릭한 뒤 '정보가져오기'를 누르면 파일 경로가 뜰거에요.
그걸 터미널 창으로 그대로 드래그앤 드롭하면 '폴더경로'가 복사됩니다.
각각 OS에 맞는 방법으로 터미널을 띄우셨으면
npm init
을 입력합니다.
입력 후에 나오는 확인란은 그냥 전부 엔터치시면 됩니다. 참고로 방금 입력한건 노드 패키지 관리를 위한 package.json 파일을 만들기 위해서였습니다. 아직 터미널창 끄지마세요.
4. Node.js가 설치된 컴퓨터라면 npm을 이용해 babel 등 여러가지 패키지들을 손쉽게 설치할 수 있습니다.
터미널 창에 입력합시다.
npm install babel-cli babel-core --save-dev
방금 만든 폴더에서 바벨을 사용하기위해 위와같이 설치합니다. 옛날버전인 babel5를 다루고있는 튜토리얼들은 babel 하나만 설치하면 됐는데, 2016년 이후 신버전 babel6에선 위처럼 필요한 모듈들을 골라서 각각 설치해줍니다.
(babel-cli는 터미널 명령어를 이용해 바벨을 실행시키는 플러그인이며 babel을 가장 쉽게 써볼 수 있기 때문에 설치한겁니다요.)
5. 또 터미널창에 입력합니다.
npm install babel-preset-es2015 --save-dev
바벨은 전통 ES5문법말고도 여러가지 문법형식으로 자바스크립트 코드를 변환시켜줄 수 있는데 이 중 ES2015 문법으로 변환해주는 babel 플러그인만 설치해보았습니다.
터미널에서 설치되는 과정을 보고있으면 뭔가 대단한 해커가 된 기분이 듭니다.
6. 작업폴더에 들어있는 package.json 파일이 하나 뿅하고 생성되어있을텐데 이 파일을 코드 에디터로 열어서 수정합니다.
"scripts" 라는 부분의 내용에 "test" 뭐시기라고 들어있을텐데 "test" 부분을 그냥 다 지워버리고
"scripts" : {"babel" : "babel --presets es2015 js/main.js -o build/main.es5.js"}
이렇게 바꾸면 됩니다.
이렇게 바꾸고나면 터미널에서
npm run babel
이라는 짧은 명령어(script)를 입력하면
js/main.js 경로에 있는 파일을 build/main.es5.js 경로의 파일로 깔끔하게 변환해줍니다.
"scripts" : {"babel" : "babel --presets es2015 js/main.js -o build/main.es5.js"}
(그러니 여기에 원하는 경로와 파일명을 입력해주시면 됩니다. 저는 build 폴더 내에 따로 생성되도록 만들었는데, 이럴 경우엔 build 폴더를 먼저 만들어 놓으셔야 에러가 안납니다)
7. 같이 테스트해보죠. js 폴더 내의 main.js 파일에 ES6 문법을 작성하고 터미널로 babel을 실행시켜봅시다.
//main.js
const word = 'babel';
let test = () => { console.log(`I know ${word}`)}
(코드 작성하고 나면 저장을 잊지맙시다.)
그리고 아까 그 작업폴더에서 열린 터미널창에서
npm run babel
을 입력합니다. 그럼 0.5초만에 ES5문법으로 작성된 자바스크립트 파일이 아까 설정한 폴더 내에 생성됩니다.
자동화는 넘나 편리한것
8. 번외로 Atom, Sublimetext, Brackets 같은 코드에디터나 Webstorm IDE툴을 이용한다면 저장시 ES5로 변환해주는 부가기능들이 있을겁니다.
Brackets의 경우 부가기능을 검색해보니 Autobabel, AutoCompile 이라는 부가기능 두개 정도가 나오는데
설치하면 .es6.js 파일을 저장시 자동으로 ES5버전 파일을 하나 더 만들어줍니다.
아무도 안쓰는 변방 에디터인 Brackets도 이런 부가기능이 있는데 다른 에디터나 IDE에도 당연히 babel류의 부가기능이 있을겁니다.
npm이니뭐니 어려워서 못하겠다는 분들은 일단 이런 식으로라도 ES6문법을 사용해보는게 어떨까요.
9. 수고하셨습니다. 이제 귀찮은 작업은 자동화해놓고 코드짜는데만 집중합시다.
하지만 서버를 배포할 때 자바스크립트 파일 하나만 변환해주면 되는게 아닙니다. CSS minifiy도 해야하고.. HTML 템플릿엔진도 HTML로 변환해주고.. 할게 많죠?
이런 작업은 gulp라는 태스크러너를 이용해 js, css, html 파일을 동시에 babelify, minify, htmlfy(?) 해주는 태스크를 설정해놓는게 일반적입니다. 하루 날잡아 설정만 잘해놓으면 코드 에디터에서 저장시, 혹은 배포시에 자동으로 배포용 html, css, js 파일을 손쉽게 생성해줄 수 있습니다. 웹개발자라면 필히 알아야할 gulp 사용법에 관한 내용은 다음에 작성해볼게요!