ES6을 쉽게 익혀보자 - tower of babel
일본 Node.js 유저 그룹 대표인 후루카와 요스케(Yosuke Furukawa)님이 만든 ES6 학습 도구입니다.
Babel Setup부터 시작해서 ES6의 핵심기능들을 배우고 연습할 수 있습니다.
ReadMe 문서를 보시면 아시겠지만 아래와같이 설치 및 실행할 수 있습니다.
$ npm install tower-of-babel -g$ tower-of-babel
위 명령어를 실행하면 위 스크린샷과 같은 화면이 보이며, 처음에는 영어로 보이니 필요에 따라 언어 설정을 바꿔주시면 됩니다.
사용법은 직접 설치해보면 매우 이해하기 쉽기 때문에 이 이상 자세한 설명은 생략하도록 하겠습니다. 바로 시작하세요!
최근 import에 대해 질문을 한 회사 동료에게 tower-of-babel을 소개해줬는데 당황스럽게도 이미 알고 있을 줄 알았던 ES6과 바벨에 대한 질문을 받았습니다.
그래서 ES6와 Babel에 대한 간단한 설명을 추가해봅니다.
1. ES6란?
ES6는 ECMAScript6 또는 ECMA2015 라고도 부릅니다.
이를 모를경우 검색해서 알아볼 때 용어로인해 혼란스러울 수 있으니 체크하고 넘어갑시다!
위 링크에서 ES6에서 추가된 기능들을 확인할 수 있습니다.
ES6을 왜 쓰나요?
복잡해진 웹 애플리케이션 개발에 적합한 스펙들을 지원합니다.
Class, Inheritance, Module, Promise Generator 등 새로운 스펙들을 더욱 편하게 쓸 수 있습니다.
그럼 ES6을 안쓰면 저런 스펙들을 쓸수 없을까요?
아닙니다. 사용할 수 있습니다. 다만 사용하기 훨씬 복잡할 뿐..!
자바스크립트 패턴을 공부하셨다면 자바스크립트로 저런 개념을 구현할 수 있다는 걸 알 수 있습니다.
강력한 지원군
ES6는 강력한 지원군을 가지고 있습니다. 바로 React와 Angular 2입니다.
이들은 모두 ES6을 지원하고 있으며 React나 Angular 2를 시작하기 전 미리 ES6의 기능과 문법을 익혀 둔다면 이해함에 있어서 훨씬 도움이 될 것입니다.
결론은 ES6를 쓴다면 개발의 편의성과 가독성이 훨씬 높아질 것 입니다.
2. Babel이란?
ES6가 자바스크립트의 추가된 기능을 명세한 것이라고 우리는 알게 되었습니다.
그렇다면 Babel이라는 건 무엇이고 왜 존재하는 걸까요?
아쉽게도 아직 모든 브라우저가 ES6를 지원하지 않습니다.
하지만! 제가 위에서 말했나요? ES6 기능은 사실 ES5에서도 구현할 수 있으며 다만 사용하기 어렵다고..
그렇기 때문에 tranpiler(transcompiler)를 이용해줘야 합니다.
tranpiler(transcompiler)
ES6의 사양이 확정되지 않았기 때문에 Babel 같은 트랜스파일러로 미리 사용해 볼수가 있습니다.
우리는 ES6의 기능을 자연스럽게 코드로 작성하고, 그 코드를 Babel을 이용해서 컴파일 해주면 ES5로 변환시켜 줍니다.
지원기능
주의할 사항은 바벨을 통해서 ES6 문법을 사용할 수 있지만 바벨이 완벽하게 모든 걸 지원하지는 않습니다.
아래 링크에서 지원하는 기능을 확인할 수 있습니다.
마치며
tower-of-babel 소개에서 시작했는데 의도에 없었던 설명이 추가되어 글이 약간 길어졌네요.
뭐 사실 이제는 ES6을 많이 사용하기 때문에 자연스럽게 익혀지겠지만 tower-of-babel [완료] 추가하는 게 나름 재밌으니 한번 해보는걸 추천드립니다.