JSer.info #316 - Safari 10.1이 릴리즈됐습니다.
Fetch API, IndexedDB 2.0, Custom Elements, Pointer Lock/Gamepad API, ES2016/2017 등을 지원합니다.
또, <a> 요소의 download 속성과 CSS Grid 등도 이번 버전부터 지원합니다.
Firefox 51.0이 릴리즈됐습니다.
WebGL 2, IndexedDB 2, FLAC 형식 등을 지원하며 XHR이 사양에 맞춰 수정됐습니다.
또, DOMImplementation.hasFeature()가 항상 true를 반환하도록, 비표준인 for each in을 사용 시 경고가 출력돼도록 변경됐습니다.
자세한 내용은 아래 문서를 참고해주세요.
- Firefox 51 for developers - Mozilla | MDN
- Firefox 51 Site Compatibility | Firefox Site Compatibility
Refactoring 30000 lines of JS with types - Reaktor.com에는 3만 줄의 JavaScript를 어떻게 리팩터링 했는지에 관해 작성돼 있습니다.
일종의 리팩터링 접근법으로써 형을 붙여나가면서 코드를 수정하는 할 때 FlowType이나 TypeScript를 사용한 경우의 문제점을 소개하고 각 도구의 어떤 기능을 활용할 수 있는지 이야기합니다.
Flow의 경우엔 weak mode를 사용하고 TypeScript의 경우엔 .js를 .ts로 변경해 나가는 방법으로 점진적으로 타입을 추가해 나가는데 취할 수 있는 전략을 소개합니다.
최종적으로 TypeScript를 사용하기로 결정하고 이를 사용하면서 만나게 되는 에러에 관해서도 작성돼 있습니다.
헤드라인
Safari 10.1
Safari 10.1이 릴리즈됐습니다.
Fetch API, IndexedDB 2.0, Custom Elements, Pointer Lock/Gamepad API, ES2016, 2017 등을 지원합니다.
또,
<a> 요소의 download 속성과 CSS Grid도 이번 버전부터 지원합니다.
Firefox — Notes (51.0) — Mozilla
www.mozilla.org/en-US/firefox/51.0/releasenotes/
Firefox 51.0이 릴리즈됐습니다.
WebGL 2, IndexedDB 2, FLAC 형식을 지원하며 XHR가 사양을 따르도록 변경됐고
DOMImplementation.hasFeature()는 항상 true를 반환하도록 변경됐습니다. 또, 비표준 API를 삭제하는 등 다양한 변경 사항이 있습니다.
- Firefox 51 for developers - Mozilla | MDN
- Firefox 51 Site Compatibility | Firefox Site Compatibility
node-browserify/changelog.markdown at master · substack/node-browserify
github.com/substack/node-browserify/blob/master/changelog.markdown
Browserify 14.0.0이 릴리즈됐습니다.
buffer polyfill이 업데이트 됐습니다. 업데이트 된 buffer 패키지에서 TypedArray를 사용하고 있기 때문에 그 영향으로 IE10 이하의 지원이 종료됐습니다.
Release Notes for Safari Technology Preview 22 | WebKit
webkit.org/blog/7354/release-notes-for-safari-technology-preview-22/
Safari Technology Preview Release 22가 릴리즈됐습니다.
scroll-snap-type:proximity 지원를 지원하며 innerText가 사양을 따르도록 변경됐습니다. 또, URLSearchParams가 iterable이 되는 등 여러가지 변경 사항이 있습니다.
Video.js 6.0.0-RC.0: The first Release Candidate | Video.js Blog
blog.videojs.com/Video-js-6-0-0-RC-0-The-first-RC/
video.js v6.0 RC가 릴리즈됐습니다.
Flash를 Core에서 제거됐으며 React에서 영감받아 디자인된 플러그인 아키텍처 추가됐습니다. 또, 접근성을 개성하는 등 다양한 변경 사항이 있습니다.
- The End of "HTML-First" | Video.js Blog
아티클
Refactoring 30000 lines of JS with types - Reaktor.com
www.reaktor.com/blog/refactoring-30000-lines-js-types/
3만 줄의 JavaScript를 점진적으로 타입을 붙여나가며 리팩토링하는 접근법에 관해 소개돼 있습니다.
Flow의 week mode와 코멘트로 타입을 선언하는 방법과 문제점, TypeScript를 사용 시 네임스페이스 오브젝트를 이용한 접근법과 장/단점 등을 이야기합니다.
또, 최종적으로 TypeScript를 사용하고 그 때 만나게 된 문제에 관해서도 작성돼 있습니다.
Making touch scrolling fast by default | Web | Google Developers
developers.google.com/web/updates/2017/01/scrolling-intervention
Chrome 56부터는 doucment, documentElement, window 등에서
touchevent를 구독할 때 {passive: true}가 기본적으로 설정됩니다. 이때, touchstart 리스너 안에서 event.preventDefault()를 호출하면 무시되고 경고가 콘솔에 출력됩니다.- Event.defaultPrevented - Web APIs | MDN
- Chrome Platform Status
Testing React Applications with Jest
auth0.com/blog/testing-react-applications-with-jest/
Jest를 사용한 React 테스트 방법에 관해 소개돼 있습니다.
설치부터 테스트 작성법, 목(Mock)하는 방법에 대해 작성돼 있습니다.
ES proposal: Shared memory and atomics
www.2ality.com/2017/01/shared-array-buffer.html
ES2017에 들어가게된 Shared memory and stomics에 대한 소개 글입니다.
Shared Array Buffers로 Worker(agent)와 데이터를 공유하는 것이 가능합니다.
Implement a JavaScript reactive programming library — part 1 – Medium
medium.com/@bohou/implement-a-javascript-reactive-programming-library-part-1-f564ac6ad789
Reactive한 JavaScript 라이브러리를 구현하는 과정을 연재하는 글입니다.
- bhou/bouton.js: A framework to build your asynchronous reactive library.
Watch Out for Undefined State
daveceddia.com/watch-out-for-undefined-state/
React 컴포넌트에서 컴포넌트 내의 state로 의존 하고 있는 것을 props로 이동시키는 일종의 리팩터링 기법을 소개합니다.
컴포넌트의 state는 기본적으로 undefined인 상태로 시작되기 때문에
render() 작성 시 고려해야하는 점과 효율적으로 작성하는 방법을 다루고 있습니다.
The Promise of a Burger Party - Mariko Kosaka
kosamari.com/notes/the-promise-of-a-burger-party
Promise를 햄버거 가게를 예로 들어 소개하고 있는 글입니다.
각 절마다 다이어그램 또는 그림을 인용해가면서 Promise의 resolve와 reject의 동작 방식에 대해 알기 쉽게 설명돼 있습니다.
Detecting text in an image on the web in real-time - Tales of a Developer Advocate by Paul Kinlan
paul.kinlan.me/detecting-text-in-an-image/
이미지 인식, 얼굴 인식, 바코드 인식, 이미지에서 텍스트를 인식하는 브라우저 API에 관해 소개돼 있습니다.
- Accelerated Shape Detection in Images
Understanding the Critical Rendering Path
bitsofco.de/understanding-the-critical-rendering-path/
크리티컬 렌더링 패스란 무엇인지 설명돼 있는 글입니다.
브라우저가 어떤 흐름으로 렌더링까지 이뤄지는지 소개하고 개발자 도구를 사용해 렌더링 흐름과 관련된 이벤트를 살펴보는 방법도 소개합니다.
ECMAScript proposal updates @ 2017-01 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2017/01/30/ecmascript-proposals-status
2017년 1월 지점에서의 ECMAScript Proposal의 Stage가 정리돼 있습니다. 2017년 1월의 미팅에서 5개의 Proposal이 추가됐고 Shared memory and atomics는 ES2017에 들어갔습니다.
Optimizing the Performance of Your React Application
auth0.com/blog/optimizing-react/
react-addons-perf를 사용해 React 컴포넌트의 성능을 측정하는 방법을 소개하는 글입니다.또,
React.PureComponent를 사용해 shouldComponentUpdate의 판정이 제대로 이뤄지도록 하여 성능 개선하는 방법도 작성돼 있습니다.
사이트, 서비스, 문서
knq/chromedp: Package chromedp is a faster, simpler way to drive browsers (Chrome, Edge, Safari, Android, etc) without external dependencies (ie, Selenium, PhantomJS, etc).
ChromeDebugging Protocol을 사용해 구현한 브라우저를 조작할 수 있는 도구입니다.
도서
Manning | Isomorphic Development with JavaScript
www.manning.com/books/isomorphic-development-with-javascript
Isomorphic JavaScript에 대해 설명하는 도서입니다.
브라우저와 Node.js에서 공유하면서 웹 애플리케이션을 만드는 방법을 소개합니다.
React + Redux와 Angular2 그리고 Ember를 다루고 있습니다.
