[JSer.info#번역] 2014-12-08 자바스크립트 주요 소식

Posted by in Research

Firefo 34.0 릴리즈

Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고,  profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요.

또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 등 ES6의 기능이 구현 됐습니다.

 

QUnit 1.16.0 릴리즈

자바스크립트 테스트 라이브러리 QUnit 1.16.0이 릴리즈됐습니다.  코드를 리팩토링했고 done() 스타일의 비동기 테스트와 Promise 테스트 지원하는 등 QUnit 2.x를 위한 여러 사항이 반영됐습니다. 2.0에서 바뀌는 부분은 「QUnit 2.x에서 바뀌는 것(일본어)」슬라이드에 작성해 놓았으니 참고하시길 바랍니다.

 

The Evolution of JavaScript

Netflix JavaScript Talks에서 ES7의 Asynchronous Generators대한 사양을 책정한 jafar HusainThe Evolution of Javascript라는 주제로 발표했습니다. 핵심 주제는 Async Generator지만 자바스크립트의 비동기 처리에 대해서도 포괄적으로 이야기합니다. 단순한 동기 처리부터 전통적인 콜백 패턴, Promise, Generator, ES7 async/await를 순차적으로 발표를 진행합니다. 동기적 프로그래밍에서 값을 얻는 과정을 Blocking/pulling, 콜백 스타일처럼 함수를 전달하는 것은 waiting/pushing 이라고 표현하고 있습니다. 약 1시간 정도의 긴 발표 영상이지만 이해하기 쉬운 친절한 발표 영상이므로 자바스크립트의 비동기 처리에 대해 평소 궁금해 했던 분이라면 지루하지 않게 보실 수 있습니다.

아래는 azu님이 동영상을 보면서 트위터에 작성한 타임라인을 간단히 번역한 내용입니다.

  1. 동기 프로그래밍에서 값을 얻는 과정을 blocking/pulling, 콜백 스타일처럼 함수를 전달하는 과정을 waiting/pushing이라고 한다. pushing의 경우 오류 처리가 복잡한 경우가 많기 때문에 ES6에 Promise가 도입됐다.
  2. Promise는 에러를 처리하기엔 편리하지만 결국 waiting/pushing 스타일이다. 그래서 waiting/pulling 스타일인 Generator function이 등장했다.
  3. Generator Function을 switch로 풀어서 설명(스크린샷)한다. 이른바 반복 처리(iterate)라고 한다.
  4. Generator Function은 반복 가능(iterable)한데 왜 Iterator Function이 아닐까? generator는 iterator 객체 이므로 Generator Function 역시 Iterator를 반환하는 것.
  5. Async iteration에 대해서
    1. spawn(generatorFn)은 Promise를 반환한다.
    2. var symbol = yeild promise;
    3. promise는 push, yeild는 pull로 처리된다.
  6. taskjs가 바로 위와 같은 처리를 하는 라이브러리다. 하지만 ES7의 async/await를 사용하면 라이브러리를 사용하지 않아도 된다.
  7. async는 push, await는 pull로 보인다.
  8. 이 경우에 stream 데이터를 다루고 싶다. 따라서 나온 것이 for … on, 하지만 아직도 Observable의 인터페이스 표준이 없다는 것이 문제다.
  9. Promise를 push라고 말했지만 Observation도 다음 값을 가져올땐 iteration을 이용해 pull로 처리하고 값을 내보내는건 push 처리한다?(좀 어렵네.)
  10. Observer는 push 하여 각각의 상황을 어떻게 처리할지 등록한다. 본질은 이벤트 리스너와 같은 느낌(Observable APIs로써 소개)이다.
  11. Observable 인터페이스가 도입되면 통일된 작성법이 가능하고 반복 처리(Iterate)를 하거나 흐름을 명확히 작성할 수 있다. 지금까지는 비동기 이벤트로 처리해왔기 때문에 힘들었다.
  12. Async generator function은 Observable을 반환한다.
  13. 복수의 값을 push하는 상황일때는 Stream과 Observable를 사용한다. Promise는 기본적으로 하나의 값을 push한다.
  14. Node.js와 같은 async I/O와 Sync I/O를 조금 더 간단하게 다루기 하기 위해서 Generator Function을 사용할 수 있다. Async I/O라면 Observable(Async Observation)를 사용한다.
  15. Async Generator는 jhusain/asyncgenerator에서 사양을 책정 중이다. 아직 Stage 0(zero)다. Stage에 대해서는 es6talks를(일본어)를 참고한다.

 

릴리즈 소식

 

읽을거리

 

사이트

  • js-reporters/js-reporters : 자바스크립트 테스트 프레임워크/런너의 reporter 공통 포맷에 대해 논의하는 커뮤니티입니다.
  • Understanding JSON Schema : JSON Schema draft 4에 대해 설명하고 있는 사이트입니다. JSON Schema의 작성 법, 레퍼런스 등을 소개하고 있습니다.

 

라이브러리

  • Tweene : 자바스크립트 애니메이션 프록시 라이브러리입니다. 애니메이션 기능을 구현하고 있는 GSAP, Velocity.js, Transit, jQuery 등의 라이브러리를 랩핑하여 동일한 API로 사용할 수 있도록 합니다.
  • lafikl/RWDPerf : 스크린의 사이즈나 UA 등을 시뮬레이터 하여 웹사이트에서 사용하지 않는 요소나 사진 그리고 통신량 등의 데이터를 그래프로 출력하는 성능 측정 도구입니다.
  • a11y.css : CSS를 사용한 HTML의 Visual Lint 도구입니다. HTML 코드에 존재하는 실수나 위험 등을 경고나 오류로 출력합니다.
  • rejs : 네임스페이스 패턴을 사용하는 자바스크립트 파일을 상위 네임스페이스의 프로퍼티에 접근 할 수 있도록 정렬하여 결합하는 명령 행 도구입니다.

 

도서

  • JavaScript Cookbook, 2nd Edition : 2015년 2월 발매 예정인 JavaScript Cookbook의 제 2판입니다.
  • Learn JavaScript & jQuery : HTML&CSS : Design and Build Websites의 자바스크립트 편입니다.(역자 : 전작인 HTML&CSS도 편집디자인이나 인포그래픽이 모던하고 이해하기 쉽게 작성돼 있습니다. 이 책도 역시 전작과 비슷한 컨셉이네요. 초심자에게 지루하지 않을것 같습니다.)

 

JSer.info를 번역하여 공유드리고 있습니다.

JSer.info는 JavaScript Weekly, Badass JavaScript, JsMag, A Minute With Brendan, The Changelog를 참고, 자바스크립트의 주요 소식을 공유하는 사이트입니다.

감사합니다.