시작하며
Node.js 일본 유저 그룹 대표인 후루카와(@yosuke_furukawa)입니다. 루비마에는 처음
글을 써보네요. 잘 부탁드립니다.
오늘은 JavaScript의 기본적인 이야기와, 앞으로의 JavaScript인 ECMAScript2015(구
ECMAScript6)의 이야기를 중심으로 할까 합니다.
ECMAScript2015(이하 ES2015)는 올해 6월에 다음 공식 ECMAScript 사양으로
발표되었습니다. 이 ECMAScript의 사양을 준수한 언어 구현이 JavaScript이며, 간단히
설명하면 앞으로의 브라우저에는 이 ES2015의 사양을 준수하는 새로운 JavaScript를
사용할 수 있게 됩니다.
하지만 이것은 이후의 브라우저이며, 현재 배포 중인 브라우저에서는 사용할 수
없습니다. ES2015의 기능을 지원하는 브라우저를 기다리지 않고, ES2015로 구현해,
이것을 지금 배포 중인 브라우저에서도 동작하게 하는 트랜스파일러 babel(구 6to5)에
대해서 이번에 설명할까 합니다.
또, Ruby를 쓰시는 분들 중에 웹 애플리케이션을 만드시는 분들도 많다고
생각합니다만, 이 babel은 다음 Sprockets의 v4.x에 도입을 검토하고 있고, 새로운
Sprockets에서는 ES6로 작성 가능해질 수도 있습니다.
트랜스파일러의 장점
트랜스파일러란, ES2015 이후의 문법으로 적힌 JavaScript를 지금 사용 중인
브라우저에서도 사용할 수 있게 변환하는 도구입니다.
ES2015는 6월에 사양 공개가 예정되어 있으며, 활발하게 토론 중입니다. Chrome의 개발
빌드(Canary)나 Firefox의 개발판(Aurora)에도 많은 ES2015의 기능이 구현되어
있으며, 일부 기능은 이미 지금 브라우저에서도 사용할 수 있게 되었습니다. 하지만
모든 기능을 사용할 수 있는 브라우저는 아직 없습니다.
더욱이, JavaScript에는 다른 언어에서는 반드시 있을 법한 일반적인 기능이 없을
때가 많고, 그것을 보완하기 위한 Underscore라는 라이브러리나 CoffeeScript,
TypeScript, JSX 같은 altJS가 나오게 되었습니다.
ES2015에 대응하는 JavaScript를 사용함으로써, 라이브러리가 필요 없게 되어, 기존
라이브러리를 줄일 수 있게 된다든가, altJS에 기대지 않고도 풍부한 언어 기능을
사용할 가능성이 커졌습니다.
또 수 년 후에는 ES2015가 널리 퍼져있을 거라 생각하면, 그때가 되기 전에 ES2015의
새로운 문법, 신기능을 배워두는 편이 부드럽게 이전할 수 있습니다.
ECMAScript 2015에 대하여
ECMAScript 2015에는, 밑에 있는 사양이 기능으로 추가됩니다.
- let/const에 의한 블록 스코프
- Map/Set/WeakMap/WeakSet에 의한 컬렉션
- 형을 정의하는 클래스
- 제너레이터/for…of
- Promises
- Template String Literals
- 화살표 함수
- 모듈
babel에 관하여
지금 가장 업데이트가 자주되는 트랜스파일러 중 하나입니다. 다른 트랜스파일러도
몇 가지 있지만, 새로운 문법을 가장 많이 지원하고 있는 게 babel입니다. 덤으로 읽는
법은 정해저 있지 않습니다. 여러 읽는 법이 허용되므로, "바벨"이 아니라 "바브"로
읽어도 된다고 합니다.[1]
babel에서 지원하는 문법 목록
http://kangax.github.io/compat-table/es6/
ECMAScript 2015에서 변하는 JavaScript의 문법
ES2015에는 여기에 전부 다 소개하기 힘들 정도로 많은 기능이 들어있습니다.
개인적으로 중요하다고 생각하는 것은 소개하겠지만, 전부 확인하고 싶으신 경우엔
ES2015의 드래프트를
일독하시길 권합니다.
ES2015의 목표는 아까 말한 드래프트에 적혀 있고, 다음과 같은 내용입니다.
ECMAScript 제6판의 목표에는 다음과 같은 내용이 포함되어 있습니다.
- 대규모 앱의 개발 지원
- 라이브러리 구축지원
- 다른 언어에서 컴파일 대상으로 사용될 것
구체적인 개선안으로,
- 모듈화
- 클래스 정의
- 블록 스코프
- iterator, generator
- 비동기 프로그램을 위한 Promise
- 디스트럭처링
- 꼬리 재귀 최적화
라는 내용이 포함되어 있습니다.
또, ECMAScript의 라이브러리로 map, set, binary 배열, 유니코드 보조 문자, 정규표현
확장이 빌트인으로 추가 됩니다. 이런 빌트인 기능을 서브 클래스로 확장하는 것도
가능합니다. 즉, 대규모 개발을 견딜 수 있도록, 적절히 모듈화하고, 적절한 단위로
클래스를 설계해 블록 스코프로 변수를 한정적으로 취급하는 것도 가능합니다.
또 비동기 프로그래밍에 관해서는 Promise로 비동기 처리를 추상화할 수 있게
되었습니다. 더욱이 iterator나 generator를 사용해 지연 반복 처리도 할 수 있게
되었습니다. 이런 기능은 관계형 언어의 흐름에 따르는 거라 필자는 생각하고 있고, 또
꼬리 재귀의 최적화도 이런 유행을 따르는 기능 추가라고 생각합니다.
그러면, 이런 기능에 대해 하나하나 소개해보도록 하겠습니다. 사실 그 밖에도
Template String Literals라던가, 화살표 함수가 정의되어 있지만, 이 글에서는
설명하지 않겠습니다.
모듈화
모듈을 나눌 수 있게 되었습니다. 여태까지 JavaScript에서는 언어 레벨의 모듈
분할이 불가능 했습니다. 그래서 JavaScript를 모듈화해 프론트에서 읽을 때에는
require.js를 사용하거나, browserify를 사용하거나 해서, 라이브러리로 해결하거나,
전역 공간에 커스텀 이름 공간을 만들어 거기에서 만드는 등의 처리를 했습니다.
ES2015부터는 이런 모듈화를 하기 위한 전용 구문 export와 import를 사용할 수
있게 되었습니다.
기본적으로는 commonjs와 비슷합니다. 즉, export로 객체를 import할 수 있게 하고,
require 대신 import 구문으로 객체를 사용할 수 있게 합니다.
그 밖에…
그 밖에 =>로 함수를 정의하는 Arrow Functions나 문자열 중간에 변수를 넣거나
히어독을 사용할 수 있는 Template String Literals, Symbols이나 Proxy등 전부 다
언급하기 힘들 정도로 많은 기능이 있습니다.
이후의 ECMAScript2015의 전망
위의 언급에서도 알 수 있듯이, JavaScript에 클래스나 모듈이 도입되어, 최적의
단위로 모듈과 클래스를 분해해 설계하는 것이 가능해졌습니다. 또 let이나 const로
변수의 스코프를 제한할 수도 있게 되었습니다. 이런 기능은 대규모 앱 개발을 할
때나 라이브러리를 만들 때 도움이 될 것입니다.
또, generator/iterator/Promise 등의 함수형 프로그래밍 개념이 도입되고, 꼬리
재귀의 최적화로 부작용을 줄이는 작성법도 할 수 있게 되었습니다. ES6에는
ES5까지의 방법보다 현대적인 기능이 들어 있습니다.
이미 ECMAScript의 사양을 정한 TC39는 다음 ES7에 대한 준비도 하고 있습니다.
현시점에서는 아직 검토 중입니다만, async-await라는 비동기 호출을 동기처럼 호출할
수 있는 C#에 있는 기능이라든가, Optional Typing 기능으로 인한 types나 Object의
감시를 하는 Object.observe라는 기능이 검토되고 있습니다.
이런 기능 전부 브라우저에서 사용 가능하게 되는 건 아직 훗날의 일입니다만,
babel에는 몇 가지 실험적으로 먼저 구현해본 ES7의
기능도 있습니다.
또 babel에는 구현되어 있지 않더라도, flow와 함께 사용해 타입 검사를 하거나,
jsx와 함께 사용해 전에 있었던 E4X 같은 XML 리터럴을 사용할 수도 있게
되었습니다.[2]
여기에서는 전부 소개할 수 없었지만, babel에는 이 밖에도 미정의의 변수/함수를
체크하는
기능이라든가
실행되지 않는 코드를 지우는 데드 코드 삭제
기능,
인라인 전개
기능 등의
최적화가 들어있어, 굉장히 많은 기능이 있습니다.
babel을 사용해 새로운 JavaScript를 배우고 싶으신 분들을 위해
tower-of-babel이라는 ES6
튜토리얼 학습 도구를 만들었습니다.
한국어로 번역되어 있으니 이것도 한번 해보세요.
정리
앞으로의 JavaScript인 ES6의 이야기를 트랜스파일러인 babel과 함께 설명했습니다.
ES6의 사양은 확정되지 않았고, 지금 사양에 관한 피드백을 받는 중입니다. 이
단계에서 적극적으로 ES6를 사용해 커뮤니티를 활발하게 하고 싶습니다. 버그나
문제가 있으면 피드백하면 개선될 가능성도 있습니다.
또, 이번 기능을 정리한
tower-of-babel을
만들었습니다.
꼭 사용해 보세요.
참고문헌
저자에 관하여
후루카와 요스케(古川陽介 / Yosuke Furukawa / @yosuke_furukawa). 일본 Node.js
유저 그룹 대표, io.js 에반젤리스트, io.js 컨트리뷰터. 글 작성 시점에는 회사에서
서버사이드로 Perl을 프론트로 JavaScript를 사용하는 풀스택 엔지니어