Firefo 34.0 릴리즈

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

• WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34

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

• Firefox 34 for developers

QUnit 1.16.0 릴리즈

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

• QUnit API Document – async()
• Async: Make tests Promise-aware(Pull Request #634)

The Evolution of JavaScript

Netflix JavaScript Talks에서 ES7의 Asynchronous Generators대한 사양을 책정한 jafar Husain가 The 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를(일본어)를 참고한다.

릴리즈 소식

• Intern 2.2 released : Intern 2.2가 릴리즈됐습니다. console reporter 기능이 개선됐습니다. 테스트가 실패했을때 객체의 Diff가 출력됩니다.
• Powerful Offline and Lightspeed Loading with Service Workers : Chrome 40 베타가 릴리즈 됐습니다. Service Worker와 CSP Lv2 기능 일부분과 elelement.closest()를 지원합니다.
• Opera 26 released : Opera 26(based on Chromium 39)이 릴리즈 됐습니다.

읽을거리

• Introduction to Service Worker : Service Worker의 라이프 사이클과 스크립트를 등록하는 방법 그리고 기본적이 사용법을 소개합니다. 또한, 캐쉬를 갱신(update)하는 방법과 주의점에 대해서도 작성돼 있습니다.
• Top 10 Mistakes Node.js Developers Make : Node.js로 개발 시 쉽게 저지르는 실수와 개선하는 방법 그리고 참고할 수 있는 리소스를 소개합니다. 많은 부분이 자바스크립트에서도 통용됩니다.
• jQuery Foundation 2014 roundup : 2014년 jQuery Foundation의 활동에 관해 정리돼 있습니다.
  • jQuery Core 3.0의 방침(Roadmap), Promise를 표준에 맞춰 변경
  • jQuery UI의 UI 레이어의 표준화(css-chassis), 성능 테스트 실시
  • QUnit을 비롯한 테스트 프레임워크의 reporter 표준화(js-reporters)
  • 국제화 시 사용하는 CLDR의 JSON 버전을 관리(globalize)
• Moving from PhantomJS to node-webkit : node-webkit을 사용하여 스크린샷을 찍고, diff하여 regression 테스트를 하는 방법에 대해 소개합니다.
• 미숙한 WebGL 입문, 하츠네 미쿠의 미려한 3D 모델 출력 – 전편(일본어[구글번역]) : WebGL을 사용하여 MMD의 3D 모델을 출력하는 과정을 친절하게 설명하고 있습니다. WebGL에서의 폴리곤 표시, 3D에서 필수 요소인 행렬이나 좌표, 모델 데이터를 로딩하는 방법에 대해서 이야기합니다. tkihira/webgl-miku-sample에 샘플 코드가 공개돼 있습니다.
• Direct Proxies를 Ruby의 method_missing 처럼 사용(일본어[구글번역]) : Direct Proxies를 사용한 Ruby의 method missing과 같은 기능을 구현하는 방법에 대해서 소개합니다.
• webpack 사용 굳히기(일본어[구글번역]) : webpack의 loader, plugins, Webpack Dev Server, resolve로 require의 패스를 지정하는 방법, 비동기적으로 로딩하는 방법 등을 소개합니다.
• Getting Started with npm : npm 사이트의 Getting Started에 튜토리얼 영상이 추가됐습니다.
• rejs – Vanilla JS Module Builder 소개(일본어[구글번역]) : rejs 라이브러리를 소개합니다.

사이트

• 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를 참고, 자바스크립트의 주요 소식을 공유하는 사이트입니다.
감사합니다.