JSer.info #317 - 테스팅 프레임워크 AVA 0.18.0이 릴리즈됐습니다.

Release 0.18.0 · avajs/ava

Node.js 0.10와 0.12의 지원을 종료하고 Snapshot testing(JSX)용 t.snapshot이 추가됐습니다.

지금까지는 power-assert를 사용(동봉)하여 테스트가 실패했을때의 출력을 비쥬얼라이즈를 했습니다만, 0.18.0부터는 Magic assert를 추가하여 Mocha나 Jest 처럼 같지 않은 부분을 actual과 expect로 나눠 diff 출력이 가능 하도록 변경 됐습니다(Jest의 pretty-format을 fork한 것을 이용하고 있습니다).

Magic assert

JavaScript 프레임워크 Mithril 1.0이 릴리즈됐습니다.

mithril.js/change-log.md at rewrite · lhorie/mithril.js

위 마이그레이션 가이드 겸 릴리트 노트를 통해 다양한 변경이 이뤄졌음을 확인할 수 있습니다.

라이프 사이클 메서드 추가, 컴포넌트를 인자로 전달 시 필수적으로 m()으로 wrap 하도록, m.sync 삭제, 동기적 redraw 삭제 등이 이뤄졌습니다.

mithril.js/lifecycle-methods.md at rewrite · lhorie/mithril.js

시그니처가 변경된 부분도 많기 때문에 위 마이그레이션 가이드를 살펴보는게 좋을 것 같습니다.
또, 마이그레이션 도구도 공개돼 있기 때문에 함께 이용하면 될 것 같습니다.

tivac/mithril-codemods: jscodeshift-powered [email protected] to [email protected] transformations

Native ECMAScript modules: the new features and differences from Webpack modules에는 ECMAScript modules와 webpack이 지원하는 모듈 시스템의 차이점에 관해 작성돼 있습니다.

MSEdge나 WebKit 등 실제 ECMAScript modules가 동작하는 환경도 슬슬 나오고 있고, 모듈에 의한 <script> 요소의 속성과 관련된 부분도 정리돼 있기 때문에 한번 읽어보기 좋은 글인 것 같습니다.

공지사항

JSer.info 6주년 기념 이벤트(일본어)에서도 이야기했던 jser/report의 1회 째를 공개했습니다.

JSer 레포트 #1 Bundler의 미래, 테스팅 프레임워크의 현상 - JSer.info(일본어)

JSer 레포트는 방향성이나 테마 그리고 비용을 줄이는 방법 등 해결해야할 과제가 많습니다.
이와 관련된 의견이 있다면 자유롭게 해쉬태그 #jserinfo 혹은 @jser_info에 멘션을 주시거나 jser/report에 이슈를 작성해주세요.

헤드라인

Node v7.5.0 (Current) | Node.js

nodejs.org/en/blog/release/v7.5.0/

node.js ReleaseNote

Node v7.5.0이 릴리즈됐습니다.
npm 업데이트, NODE_NO_WARNINGS의 환경변수 (--no-warnings과 같은)를 추가하는 등 다양한 변경 사항이 있습니다.

Release 0.18.0 · avajs/ava

github.com/avajs/ava/releases/tag/v0.18.0

JavaScript testing

AVA 0.18.0이 릴리즈됐습니다.
Node.js 0.10과 0.12의 지원 종류하고 Snapshot testing(JSX)과 Magic assert를 추가하는 등 다양한 변경 사항이 있습니다.

Announcing TypeScript 2.2 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2017/02/02/announcing-typescript-2-2-rc/

TypeScript ReleaseNote

TypeScript 2.2 RC가 릴리즈됐습니다.
기본형(primitive) 이 외의 타입을 표현하는 object type 추가, class expresson을 사용한 mixin 지원, JSX의 react-native 지원하는 등 다양한 변경 사항이 있습니다.

Roadmap · Microsoft/TypeScript Wiki

Chromium Blog: Chrome 57 Beta: CSS Grid Layout, Improved Add to Home screen, Media Session API

blog.chromium.org/2017/02/chrome-57-beta-css-grid-layout-improved.html

Chrome ReleaseNote

Chrome 57 Beta가 릴리즈됐습니다.
CSS Grid, _Media Session API, String#padStart를 지원합니다.
반복되는 out-of-view 애니메이션에 setTimeout() 사용하면 setTimeout()이 제한(throttle)되도록 변경됐으며 XSS Auditor(필터)가 기본적으로 mode block이 되도록 변경됐습니다.

setTimeout() 제한 : 이미 크롬에서는 백그라운 탭일 경우 timer를 1Hz로 제한하고 있었는데 이를 뷰포트를 벗어나 있는(outside visible viewport) iframe 같은 경우에도 제한을 확장함.
- "Out of view" cross-origin iframes align/clamp setTimeout/setInterval to 1 second · Issue #9 · WICG/interventions

mithril.js/change-log.md at rewrite · lhorie/mithril.js

github.com/lhorie/mithril.js/blob/rewrite/docs/change-log.md

JavaScript DOM ReleaseNote library

Mithril 1.0이 릴리즈됐습니다.
라이플 사이클 메서드 추가됐고 컴포넌트를 인자로 전달 시 필수적으로 m()으로 wrap 하도록 변경됐습니다. 또, m.sync와 동기적 redraw를 삭제하는 등 많은 부분이 크게 변경 됐습니다.

아티클

Native ECMAScript modules: the new features and differences from Webpack modules

blog.hospodarets.com/native-ecmascript-modules-new-features

ECMAScript module webpack

webpack 등의 모듈과 네이티브 ES module의 차이점에 관해 정리 돼 있는 글입니다. 모듈 패스, CORS, script 요소의 속성, 에러 판정, ES module의 동작, feature detection 방법, fallback, script 요소의 type을 취하는 방법 등 다양하고 자세히 해당 주제를 다루고 있습니다.

A Beginners Guide to Webpack 2 and Module Bundling

www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/

webpack tutorial

webpack의 기본적인 사용 방법에 관해 소개 돼 있습니다.
module의 취급 방법, loader, plugin, 코드 분할, dev server, Hot reloading에 관해 정리 돼 있습니다.

Next on Next.js

jsmantra.com/next-on-next-js-1a134505f346

JavaScript React 서버

React를 사용한 프레임워크인 Next.js 2β에 관해 작성돼 있습니다.
라우팅, 코드 분할, webpack 2 지원, webpack이나 babel의 설정을 커스텀하는 방법 등 Next.js 2β의 변경점에 관해 정리돼 있습니다.

CSS Grid – Table layout is back. Be there and be square. | Web | Google Developers

developers.google.com/web/updates/2017/01/css-grid

CSS

CSS Grid의 개요가 소개 돼 있습니다.

How to set up E2E browser testing for your GitHub project

hackernoon.com/how-to-set-up-e2e-browser-testing-for-your-github-project-89c24e15a84

E2E testing tutorial article

TestCafe를 사용한 E2E 테스트 설정 및 활용 방법에 관해 소개 돼 있습니다.
PageObject 패턴, Travis CI나 Sauce Labs와의 연동 방법이 작성돼 있습니다.

API Deprecations and Removals in Chrome 57 | Web | Google Developers

developers.google.com/web/updates/2017/02/chrome-57-deprecations

Chrome article

Chrome 57에서 비권장되거나 삭제되는 API에 관해 작성돼 있습니다. webkitCancleAnimationFrame 처럼 Vendor-prefix가 붙은 cancelAnimationFrame, IndexedDB, AudioContext 관련 API가 삭제되며 BluetoothDevice.uuids, <keygen>, OfflineAudioContext 등도 함께 삭제 됩니다.