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

Firefox 33.0 릴리즈

Chrome나 Opera는 이미 지원하고 있는 <picture> 요소가 추가됐습니다. 플래그를 조정(dom.image.picture.enabled)해야 사용할 수 있습니다. 자세한 내용은 릴리즈 노트를 참고해주세요. 또 개발자 도구에 CSS에 대한 기능이나 새로운 명령어 등 여러가지 기능이 추가됐습니다. 개발자 도구에 대한 자세한 내용은 아래 문서를 참고해주세요.

• Event listeners popup, @media sidebar, Cubic bezier editor + more – Firefox Developer Tools Episode 33Older ArticleNewer Article

파이어폭스의 개발자 도구를 개발하는 것에 흥미가 있는 분은 아래 글을 참고해주세요.

• Five Stages of Development(유투브 영상)

ReactJS For Stupid People

위 아티클은 최근 자주 언급되는 React의 특징과 장/단점에 대해서 정리하고 있습니다. React 자체는 View 만을 컨트롤 하는 라이브러리이며, Flux를 조합하는 아키텍처에 대해서도 언급합니다. 최근에 React v0.12 RC가 릴리즈 됐습니다.
 

FormatJS

Yahoo에서 FormatJS라고 하는 국제화를 위한 자바스크립트 라이브러리를 릴리즈했습니다. 각 지역별의 수치, 날짜, 상대적 시간, 복수형 표현 등 국제화를 위한 시스템을 제공하는 모듈과 Handlebars와 React, Dust등의 템플릿 엔진을 함께 사용하여 지역화한 화면을 출력하는 방법도 함께 제공합니다.
이 라이브러리는 ECMAScript Internationalization API Specification를 기반으로 하고 있습니다. 하지만 모든 브라우저가 ECMA i18n API를 지원 하고 있지 않으므로, Polyfill로 init.js를 함께 사용하도록 구현돼 있습니다. 또 ECMA i18n API는, 상대 시간이나 복수형에 대한 지역화 API가 준비돼 있지 않습니다. 따라서 FormatJS는 Unicode CLDR의 데이터와 ICU MessageFormat를 사용하여 지역화하도록 구현돼 있으며 해당 Formater는 각각 모듈로 제공합니다.
또한 ECMA i18n API 1st edition에서는 ICU MessageFormat 서식에 대한 사양이 없습니다만, 차기 버전에는 Message Formatting을 검토하고 있습니다. 때문에, ECMA 표준 사양을 무조건 따르는 건은 아니고 ICU MessageFormat을 AST로 구문 분석하는 parser도 구현하고 있습니다. 따라서 차기 사양에 대한 대응도 쉬울것 같습니다.
코드 자체는 ES6 module을 사용해 작성돼 있고, 그것을 grunt-bundle-jsnext-lib로 bundle화 한 것을 배포하고 있습니다. 아래 자바스크립트를 사용한 국제화에 대한 재미있는 문서와 영상이 있습니다. 참고해주세요.

• Localize your frontend(유투브 영상)
• webdb-press-javascript-i18n(일본어[구글번역])

릴리즈 소식

• Release Dragon Master · sass/libsass : Sass컴파일러의 C++ 구현체인 libsass의 버전 3.0이 릴리즈 됐습니다. Sass 3.4의 동작에 가깝도록 개선됐으며, @extends, Map, call()을 지원하고, Windows에서의 동작을 개선했습니다.
• jQuery UI 1.11.2 : jQuery UI 1.11.2가 릴리즈됐습니다.
• React v0.12 RC :  React v0.12 RC가 릴리즈됐습니다. JSX에 대한 기능이 많이 변경 됐습니다. @jsx pragma는 제거됐으며, 소문자로 시작하거나 -(대쉬)를 포함하는 JSX 태그는 HTML로 다루도록 변경됐습니다. 또한 Spread attributes를 지원하는 대신 transferPropsTo는 권장하지 않습니다.
• A new ES6 draft, Rev28 : ECMAScript 6 Draft Rev 28이 릴리즈 됐습니다.
  • harmony:specification_drafts [ES Wiki]
• Android Lollipop : Android 5.0 이후의 Chromium WebView는 Google Play에서 업데이트 할 수 있도록 됐습니다.

블로그 & 아티클

• Exploring Angular 1.3 – One-time bindings : AngularJS 1.3에 도입된 one-time binding을 설명합니다.
• platform.js ⇒ webcomponents.js : platform.js는 webcomponents.js라고하는 이름으로 변경 됐습니다. bower를 이용해 사용하고 있는 경우, 영향이 있을 수 있으므로 참조하는 파일을 변경할 필요가 있다.
• 자동 검증과 변환으로 CSS 유지보수(일본어[구글번역]) : scss-lint와 csscomb를 사용하여 Sass를 검증하고 수정해 CSS를 유용하게 관리하는 방법에 대해서 이야기합니다.
• status.modern.IE의 견해(일본어[구글번역]) : status.modern.IE에서 공개한 IE의 개발 상태와 변경 사항을 보는 방법에 대해서 이야기 합니다.
• Announcing key advances to JavaScript performance in Windows 10 Technical Preview : IE의 자바스크립트 엔진인 Chakra의 최적화에 대해서 작성돼 있습니다. Baseline 컴파일러적인 AST를 중심으로 JIT 컴파일하는 구조 등에 대해서 이야기합니다. 최적화에 대한, 객체의 비교 연산시 인라인 캐쉬나 코드의 인라인화 그리고 Array 접근시 최적화와 mark&sweep GC 개선 등에 대해서 언급합니다.
  • The Baseline Compiler Has Landed
• NPM 2.0 and how it helps avoiding global dependencies : npm 2.0에 새롭게 추가 개선된 npm runt script에 인수를 전달할 수 있는 것과 npm run script에서 자동적으로 ./node_modules/.bin 경로 문제를 해결해 주는 것에 대해 이야기합니다.
• mattdesl/module-best-practices : Node.js 모듈의 베스트 프렉티스에 대해 이야기 합니다. 모듈의 파일 이름, npm 모듈 작성법, 생성자 패턴, 테스트, 버전 관리, package.json 정보, npmignore, npm run-script 등에 대해서 작성돼 있습니다.’
• Browser Platform Status Tracker : IE나 Chromium의 상태가 어떻게 변경됐는지 정리해 제공하는 사이트입니다. 어느 기능이 어떤 버전에서 구현되며, 어떤 prefix가 제거 됐는지 등을 알려줍니다.
• Functional Programming in Javascript : Array의 map이나 filter 등에 대해서 배울 수 있는 사이트입니다. 챕터를 exercises이라고 하며 하나의 exercises 완료하면 다음 exercises를 진행할 수 있습니다. 총 40 여개의 exercises가 있습니다.

라이브러리

• Lapple/ErrorBoard : Node.js로 동작하는 자바스크립트의 오류를 수집 하여 보기 위한 대쉬보드 애플리케이션입니다.
• kriasoft/react-starter-kit : React/Flux 패턴으로 스케폴딩된 Starter Kit 입니다. SPA같은 웹 애플리케이션을 위한 구성으로 보입니다.
• medikoo/memoize : memorize를 위한 라이브러리입니다. 다양한 캐쉬 기법과 특별한 인수를 중요하게 처리하거나, 비동기 대응 그리고 Weak한 memorize 등도 구현돼 있습니다.
• No9/localstorage-down : leveldown의 db로 구현한 localStorage의 백엔드 구현입니다.
• uber/potter : uber사의 Node.js 프로덕션 프로젝트를 위한 스케폴딩, 플러그인 시스템으로 확장 가능한 커멘드 라인 도구입니다.
• box/leche : Mock 하기 위한 객체 작성이나 Parameterized 테스트를 하는 Data Provider의 기능 등을 구현하고 있는 테스트 보조 라이러리입니다. Mocha와 Sinon.js를 함께 사용하는 상황을 감안하여 만들어졌습니다.
• dgs700/angular-custom-element : AngularJS 2.0부터 Web Components 대응이 예정돼 있지만, 1.x에서도 Custom Elements를 사용해 Directive를 정의할 수 있도록 하는 라이브러리입니다.
• Knockout Secure Binding : Knockout의 CSP를 대응한 바인딩이 가능하도록 하는 라이브러리입니다. new Function을 사용하지 않으면서 CSP에 대응합니다.
• othiym23/async-listener : Node.js 0.11의 asyncListener API의 Polyfill 라이브러리입니다.
• captainbrosset/pagerecorder : Firefox의 개발자 도구로 페이지 변경 내역을 기록하는 애드온입니다. 어떤 이벤트가 일어났고 어떤 요소가 변경 됐는지 등을 훑어 볼 수 있습니다.
• react-hot-loader · Pure JS live-editing for React : React를 사용한 코드를 Live Reload 하기 위해 Webpack의 loader로 지정하는 플러그인 입니다.

도서

• Learning Ember.js by Blake Erickson : Ember.js와 Ember CLI의 기본적인 사용법부터 학습할 수 있는 도서입니다.

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