JSer.info #355 - Node.js v8.8.0이 릴리즈됐습니다.
http2 모듈이가 기본적으로 활성화 됐으며 모듈의 hook 처리를 다룰 수 있는 커맨드 라인 인수 --loader가 지원됩니다.
Chrome 63 베타가 릴리즈됐습니다.
Dynamic import, Async iterator, Device Memory API, Promise#finally를 지원하며 푸쉬 허용 여부를 묻는 대화 상자 UI가 변경됐습니다.
EventTarget의 콜백에 부정확한 값을 건낼 경우에 TypeError를 발생시키는 등 사양에 맞춰 수정 됐으며 인쇄와 관련된 beforeprint와 afterprint 이벤트를 지원합니다. 또, 비권장 됐던 /deep/이 삭제 됐습니다.
Property-Based Testing for Godly Tests 슬라이드에는 testcheck-js를 사용한 Property-Based Testing에 관해 작성돼 있습니다.
Example-Based Test, Fizz Test, Property-Based Test 각각 커버할 수 있는 범위의 차이와 특징에 대해 소개돼 있습니다.
Property-Based Test에서는 테스트 할 값의 범위를 지정하고 그 범위 내에서 자동으로 생성된 값을 이용하여 테스트를 수행합니다. 이러한 방식 중 Haskell의 QuickCheck이 유명합니다.
위 슬라이드에는 특정 고정 값을 지정하는 Example-Based Test 보다도 Property-Based Test가 커버 할 수 있는 범위가 넓다고 작성돼 있습니다. 반면, 그 구조로 인해 다소 빠르지 않다는 점도 소개돼 있습니다.
또, Flow 형 정의 방식에서의 테스트 범위에 의한 자동 생성에 대해서도 소개돼 있습니다.
헤드라인
Node v8.8.0 (Current) | Node.js
nodejs.org/en/blog/release/v8.8.0/
Node.js 8.8.0이 릴리즈 됐습니다.
http2 모듈이 기본적으로 활성화 됐고 모듈의 hook 처리를 다룰 수 있는 커맨드 라인 인수 --loader가 추가 됐습니다.
V8 JavaScript Engine: V8 Release 6.3
v8project.blogspot.com/2017/10/v8-release-63.html
V8 6.3이 릴리즈 됐습니다.
성능이 개선됐으며 import(), Promise#finally, Aynsc iterator를 지원합니다.
Release 0.23.0 · avajs/ava
github.com/avajs/ava/releases/tag/v0.23.0
AVA 0.23.0이 릴리즈 됐습니다.
NODE_ENV=test를 설정하도록 변경됐고 snapshot 파일 저장 위치를pacakge.json에 snapshotLocation으로 지정할 수 있도록 변경 됐습니다.
Release 2.4.0 · fuse-box/fuse-box
github.com/fuse-box/fuse-box/releases/tag/v2.4.0
FuseBox 2.4.0이 릴리즈 됐습니다.
Quantum 상에서 Uglify-es를 지원하고 Vue와 관련된 대응 사항이 개선됐습니다. 또, CLI를 API로 사용할 수 있도록 변경됐습니다.
Chromium Blog: Chrome 63 Beta: Dynamic module imports, async iterators and generators, Device Memory API, and permissions UI changes
blog.chromium.org/2017/10/chrome-63-beta-dynamic-module-imports_27.html
Chrome 63 Beta가 릴리즈 됐습니다.
Dynamic import, Async iterator, Device Memory API, Promise#finally가 구현됐고 푸쉬 허용 여부를 묻는 대화 상자 UI가 변경됐습니다.
또, EventTarget의 동작이 사양에 맞춰 변경됐으며 인쇄 시 beforeprint와 afterprint 이벤트가 발생하도록 개선됐습니다. 그리고 /deep/이 삭제 됐습니다.
- What's New In DevTools (Chrome 63) | Web | Google Developers
- Permission UX | Web Fundamentals | Google Developers
아티클
Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/
Firebug는 Firefox57에서 개발이 종료되고 Firefox의 개발자 도구로 대체될 예정입니다. 이러한 소식을 비롯 Firebug의 역사에 대해서도 정리돼 있습니다.
그리고 Firebug에서 Firefox 개발자 도구로의 마이그레이션 가이드도 공개 됐습니다.
Microsoft의 Napa.js로 JavaScript를 멀티스레드화 하다. | PLAID engineer blog(일본어)
tech.plaid.co.jp/js_multi_threading/
멀티프로세스 Worker를 다룰 수 있는 napaja에 대해 소개하는 글입니다.
어떠한 동기(motivation)로 개발됐고 어떻게 구조가 이뤄져 있는지 작성돼 있습니다.
워커를 정리하는 역할의 Zone과 데이터 교환 방법에 대해서도 이야기합니다.
HTML Web Component using Vanilla JavaScript – Ayush Gupta – Full Stack Web Developer
ayushgp.github.io/html-web-components-using-vanilla-js/
Web Components 입문에 대해 다루는 글입니다.
<user-card />라는 요소를 예로 데이터를 취득하여 출력하는 방법과 Custom Element의 라이프사이클, template 요소, ShadowDOM에 대해 소개합니다.
State of Modules in JavaScript - Blog | SitePen
www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/
ES module에 대해 자세히 설명돼 있는 글입니다.
import/export나 dynamic import에 대해 작성돼 있으며 Node.js와 webpack 등과 같은 bundler에서 해당 사양을 다루는 방법 등에 대해 소개합니다.
Unpopular Metrics about JS Bundlers – Andrea Giammarchi – Medium
medium.com/@WebReflection/unpopular-metrics-about-js-bundlers-a3c56ea5390d
작은 사이즈의 bundle 도구인 asbundle을 소개하는 글입니다. asbundle은 ES module을 bundle 하는 기능만 가지고 있어 rollup 보다 기능적으로도 작고 심플합니다.
Can You Afford It?: Real-world Web Performance Budgets – Infrequently Noted
infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/
첫 회 로드 시 Time-to-Interactive(TTI)는 5초 이하, 이후에는 2초 이하라는 Performance Budgets을 기준으로 이를 충족하기 위한 배분 조건에 대해 이야기합니다.
이를 충족하기 위한 사고법이나 기술적인 방법 그리고 보조 도구 등에 대해 작성돼 있습니다.
슬라이드, 영상
Chrome Dev Summit 2017 - YouTube
www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m
Chrome Dev Summit 2017의 발표 영상이 공개 됐습니다.
어찌됐든 재미있게 Vue.js에서 TypeScript를 쓰고싶어
www.slideshare.net/sakura_pr/vuejstype-script-81228009
Vue 2.5의 TypeScript 지원에 대해 이야기하는 슬라이드입니다.
JavaScript로 작성된 Vue 애플리케이션을 TypeScript로 이전하는 절차에 대해 소개돼 있습니다.
Redux. From twitter hype to production by Jenya Terpil
slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
Redux의 동작 플로우에 대해 소개하는 슬라이드입니다.
애니메이션 요과를 이용하여 View -> Action -> Reducer -> State의 흐름을 시각화하여 소개합니다.
Property-Based Testing for Godly Tests
www.slideshare.net/garbles/propertybased-testing-for-godly-tests
Property-Based Testing에 대해 소개하는 슬라이드입니다.
Example-Based Test, Fizz Test, Property-Based Test 각각 커버 가능한 범위의 차이와 특징에 대해 이야기합니다.
testcheck를 사용한 테스트나 Flow 형 정의에서 속성을 자동 생성하는 방법 등에 대해 소개합니다.
- unbounce/babel-plugin-transform-flow-to-gen: Flow + Babel + TestCheck == QuickCheck in JavaScript
- leebyron/testcheck-js: Generative testing for JavaScript
사이트, 서비스, 문서
webpackmonitor/webpackmonitor: A tool for monitoring webpack optimization metrics through the development process
github.com/webpackmonitor/webpackmonitor
webpack의 stats.json 결과를 시각화 해주는 도구입니다.
State of Vue.js Report · Monterail
www.monterail.com/state-of-vuejs-report
Vue에 관한 80 페이지 분량의 리포트 문서 입니다. Vue의 현재 상황, 설문 결과, 이용하고 있는 기업의 사례 연구 등에 대해 작성돼 있습니다.
Apollo Client 2.0 – Apollo GraphQL
dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7
Apollo Client 2.0을 소개하는 글입니다.
소프트웨어, 도구, 라이브러리
vitalets/websocket-as-promised: Promise-based API for WebSockets
github.com/vitalets/websocket-as-promised
Promise 기반의 WebSocket 라이브러리입니다.
nicojs/node-install-local: Installs npm/yarn packages locally without symlink. Exactly the same as your production installation, no compromises.
github.com/nicojs/node-install-local
npm5과 yarn은 로컬 패키지를 symlink로 설치해버리기 대문에 symlink를 지원하지 않는 도구 등은 동작하지 않습니다.
node-install-local은 일반 패키지와 동일하게 디렉터리에 설치할 수 있도록 해주는 도구입니다.
softvar/awesome-web-storage: Everything you need to know about Client-side Storage.
github.com/softvar/awesome-web-storage
Web Storage에 대한 내용이 정리돼 있는 문서입니다.
cookie, localStorage, sessionStorage에 대한 비교, 관련 라이브러리, 도구 등에 대해 작성돼 있습니다.
feimosi/frameworks-code-comparison: Code comparison of modern frameworks, based on React, Angular and Vue.js
github.com/feimosi/frameworks-code-comparison
Angular, React, Vue 각각 컴포넌트에서 공통적으로 다루는 처리 방식을 비교 소개한 저장소입니다.
각 라이브러리 마다 짧은 노트와 코드스니펫을 소개합니다.
도서
Angular Development with Typescript: Yakov Fain, Anton Moiseev: 9781617295348: Amazon.com: Books
www.amazon.com/Angular-Development-Typescript-Yakov-Fain/dp/1617295345
2018년 5월 30일 출간 예정인 Angular와 TypeScript에 관해 다루는 도서입니다.
Amazon.com: TypeScript 2.0 Cookbook eBook: Shiv Shankar Kushwaha: Kindle Store
www.amazon.com/TypeScript-Cookbook-Shiv-Shankar-Kushwaha-ebook/dp/B01CR5GCXY
2018년 8월 출간 예정인 TypeScript 쿡북입니다.
