JSer.info #323 - jQuery 3.2.0이 릴리즈됐습니다.

jQuery 3.2.0 Is Out! | Official jQuery Blog

이제 $.css에서 CSS Custom Property를 지원하며 transform된 요소에서 .width(), .height() 반환 값이 이상했던 문제가 대응됐습니다. 그리고 <template> 요소를 지원합니다.
또, jQuery.holdReady, jQuery.nodeName, jQuery.isArray가 비권장 됐습니다.

몇 개의 회귀(resression) 버그가 발견되고 있습니다만 3.2.1에서 수정될 예정입니다.

덧붙임: jQuery 3.2.1이 릴리즈됐습니다!

테스트 및 테스트 더블 라이브러리인 Sinon.JS 2.0.0이 릴리즈됐습니다.

sinon.log와 sinon.logError가 삭제됐고 sinon.test와 sinon.testCase가 코어에서 sinon-test로 분리됐습니다.

또, sinon.calledInOrder 같은 내부(Internal)격 메서드가 비권장 되는 등 다양한 변경 사항이 있습니다.

sinon.js logo

로고나 사이트도 개편됐으며 Open Collective에서 스폰서 모집도 시작됐습니다.

sinon is on Open Collective

testdouble.js 2.0이 릴리즈됐습니다. testdouble.js는 Sinon.js와 비슷한 테스트 더블 라이브러리로써 Sinon.js와 경쟁 구도에 있습니다.

td.object에서 ES2015 Proxy를 사용해 존재하지 않는 속성(Property)에 접근하는 경우도 체크할 수 있게 됐으며 thenCallback 등으로 비동기 stub을 지원합니다. 또, td.verify의 개선이 이뤄지는 등 다양한 변경 사항이 있습니다.

Sinon.js와의 기능 및 문법적인 차이점은 아래 문서에 정리돼 있으니 참고하시길 바랍니다.

Test Double | Our Thinking | testdouble.js vs. sinon.js

React+Redux+Express+MongoDB으로 아주 심플한 CRUD 애플리케이션 만들기 - Qiita(일본어)에는 프론트엔드를 React와 Redux로 구성하고 백엔드를 Express와 MongoDB로 구성하여 간단한 애플리케이션을 만들어가며 학습할 수 있는 튜토리얼이 작성돼 있습니다.

서버와의 통신 방법(보다 일반적으로 비동기 처리 방법)
Redux에서의 폼 다루기
Express에 의한 API
Node.js에서의 MongoDB 조작
Heroku로 배포(Deploy)

create-react-app을 사용해 생략 가능한 부분은 생략하며 프론트 사이드와 서버 사이드를 잇는 부분에 관해서도 설명돼 있는 등 스텝 바이 스텝으로 친절하게 작성돼 있습니다.

헤드라인

Migrating to v2.0

sinonjs.org/releases/v2.0.0/migrating-to-2.0/

JavaScript testing library ReleaseNote

Sinon.js 2.0이 릴리즈됐습니다.
sinon.log나 sinon.logError가 삭제됐고 sinon.test와 sinon.testCase는 별도의 모듈로 분리됐습니다.
내부(Internal)격 메서드가 비권장 되는 등 다양한 변경 사항이 있습니다.

sinon/Changelog.txt at v2.0.0 · sinonjs/sinon

jQuery 3.2.0 Is Out! | Official jQuery Blog

blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/

jQuery ReleaseNote

jQuery 3.2.0이 릴리즈됐습니다.
$.css에서 CSS Custom Property를 지원하고 transform된 요소에서 .width(), .height()의 반환값이 이상했던 문제가 수정됐습니다. 또, <template> 요소를 지원하는 등 다양한 변경 사항이 있습니다.

Release [email protected]: Publish · ReactTraining/react-router

github.com/ReactTraining/react-router/releases/tag/react-router%404.0.0

React ReleaseNote library

React Router 4.0.0이 릴리즈됐습니다.
완전히 새로 작성된 버전으로 기존 버전과 호환성이 없기 때문에 마이그레이션 가이드 역시 공개돼 있지 않습니다.

Release v0.42.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.42.0

flowtype ReleaseNote

Flow 0.42.0이 릴리즈됐습니다.
Object type spread type TypeB = { ...TypeA } 문법과 flow ide 커멘드가 추가 됐습니다.

ESLint v3.18.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/03/eslint-v3.18.0-released

ESLint ReleaseNote

ESLint 3.18.0이 릴리즈됐습니다.
esquery 기반의 AST 셀렉터를 지원합니다. CSS 셀렉터와 비슷한 문법으로 rules 내에 셀렉터를 추가하여 사용할 수 있습니다.

아티클

Testing Service Workers – Dev Channel – Medium

medium.com/dev-channel/testing-service-workers-318d7b016b19

ServiceWorker testing

ServiceWorker를 대응한 유닛 테스트 방법에 관해 소개합니다.
Tests in SW, 이벤트의 에뮬레이트, Push Event 테스트 등 ServiceWorker와 관련된 여러 기능을 테스트하는 데 있어 알아야 할 다양한 기법이 작성돼 있습니다.

ES6 Proxy를 사용해 견고한 오브젝트를 만드는 Tips(일본어)

aloerina01.github.io/javascript/2017/03/14/1.html

JavaScript

Immutable 및 Singleton 등을 ES2015 Proxy를 사용해 구현하면서 오브젝트를 확장하는 방법에 관해 소개돼 있습니다.
Proxy의 trap이나 Reflect API에 관해 이해할 수 있는 글입니다.

Enzyme으로 React 컴포넌트 테스트를 작성하다 - DMM.com 랩 엔지니어 블로그(일본어)

labotech.dmm.com/entry/2017/03/07/180449

React testing tutorial article

Enzyme를 사용한 React 컴포넌트 테스트 방법에 관해 작성돼 있습니다.

Background Tabs in Chrome 57 | Web | Google Developers

developers.google.com/web/updates/2017/03/background_tabs

Chrome

Chrome의 백그라운드 탭과 관련된 특정 제한에 관해 작성돼 있습니다.
Chrome 57부터는 timer나 requestAnimationFrame 포함, budget-based 제한이 추가됩니다.
현재 탭이 백그라운드 인지 여부는 Page visibility API로 확인할 수 있습니다. 테스트 시 등의 경우엔 --disable-background-timer-throtting의 플러그로 이러한 제한을 무효화 할 수 있습니다.

Almin으로 Flux 아키텍처를 시도해 봤다 | Web Scratch(일본어)

efcl.info/2017/03/17/almin-introduction/

JavaScript redux Flux library tutorial

Almin을 사용해 카운터 애플리케이션을 만들면서 어떻게 Flux와 같은 단방향 데이터 플로우를 구현할 수 있는지 소개합니다.
개발용 로그나 브라우저 확장 플로그인을 이용한 디버깅에 관해서도 작성돼 있습니다.

Preact internals #1: the easy parts – Medium

medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205

JavaScript React article

Preact의 내부 구현에 관해 설명하는 연재 글입니다.

Progressive Web App Libraries in Production – Dev Channel – Medium

medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34

ProgressiveWebApp article ServiceWorker

ServiceWorker와 관련된 작업을 담당하는 도구인 sw-precache, sw-toolbox, offline-analytics를 소개하는 글입니다. sw-precache는 특정 리소스를 미리 캐시하여 오프라인을 지원하는 모듈이며 sw-toolbox는 런타임 요청을 오프라인에서 지원하는 모듈입니다. 그리고 offline-analytics는 오프라인 상태일때 분석 데이터를 저장하고 있다가 나중에 연결 상태로 전환되면 데이터를 Google Analytics로 전송하는 모듈입니다.