Fork me on GitHub

2017-07-31 JS: React 16.0β, WebCrypto API, The JavaScript Way book

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #342 - React 16 β1가 공개됐습니다.

@next 태그를 지정하여 설치할 수 있습니다.

# Yarn
yarn add react@next react-dom@next

# Npm
npm install --save react@next react-dom@next

ES2015의 Map/Set을 의존하고 있기 때문에 polyfill이 필요합니다.
또한 Fiber라 불리는 코어의 수정 사항도 포함돼 있지만 기본적으로 v15와 호환 모드로 동작합니다.

ReactDOMNodeStream으로 Stream 기반의 서버 사이드 렌더링을 지원하고 componentDidCatch로 자식 컴포넌트의 에러를 잡을(catch) 수 있도록 기능이 추가됐습니다.

비호환적인 변경으로써 React를 npm을 이용해 설치한 경우에도 bundle 파일이 배포되기 때문에 react/lib/*로 참조할 수 없게 되며 react-addons-perf는 v16에서 동작하지 않고 직접적인 대체재를 아직 제공하고 있지 않습니다. 이러한 상황에 관심 있는 분은 아래 이슈를 참고해주세요.


Update on Web Cryptography | WebKit에는 WebCrypto API에 관해 소개돼 있습니다.

라이브러리와 브라우저 네이티브의 실행 속도 차이와 WebCrypto API의 기본적인 형태와 사용 방법에 대해 소개있습니다. 또, Safari의 구구현(webkit-)에서 최신 API로 마이그레이션 하는 방법에 관해서도 작성돼 있습니다.


bpesquet/thejsway: The JavaScript Way book에는 Leanpub에서 판매되고 있는 The JavaScript Way의 원고가 공개돼 있습니다.

JavaScript와 DOM의 기본, 그리고 이를 이용한 웹 애플리케이션 개발 방법 등에 관해 작성돼 있는 서적입니다.


헤드라인


Release Notes for Safari Technology Preview 36 | WebKit

webkit.org/blog/7833/release-notes-for-safari-technology-preview-36/

safari ReleaseNote

Safari Technology Preview Release 36이 릴리즈됐습니다.
Object spread를 지원합니다.


jasmine/2.7.0.md at master · jasmine/jasmine

github.com/jasmine/jasmine/blob/master/release_notes/2.7.0.md

JavaScript testing library ReleaseNote

jasmine 2.7.0이 릴리즈됐습니다.


esdoc/CHANGELOG.md at master · esdoc/esdoc

github.com/esdoc/esdoc/blob/master/CHANGELOG.md#101-2017-07-30

JavaScript document ReleaseNote

JavaScript 용 문서화 도구인 ESDoc 1.0.1이 릴리즈됐습니다.
코어 부분도 플러그인화 하여 esdoc-standard-plugin으로 분리됐습니다.


React 16 beta · Issue #10294 · facebook/react

github.com/facebook/react/issues/10294

React ReleaseNote issue

React 16β가 릴리즈됐습니다.
Map/Set를 의존하며 사용 시 polyfill이 필요합니다. 그리고 Fiber를 시험적으로 지원합니다.
Stream SSR 을 지원하고 componentDidCatch로 자식 컴포넌트의 에러를 잡을(catch) 수 있습니다. bundle 파일이 배포되도록 변경돼 react/lib/*로 참조할 수 없습니다.


아티클


This is what Node.js is used for in 2017 - Survey Results

blog.risingstack.com/what-is-node-js-used-for-2017-survey/

node.js 앙케이트

Node.js 이용자를 대상으로한 앙케이트 결과가 공개됐습니다. 총 1,405 명이 응답했습니다. Node.js의 사용 용도, 배포 방법, 사용 버전, 만족도 등에 대해 설문이 이뤄졌습니다.


Unit testing Angular applications with Jest

izifortune.com/unit-testing-angular-applications-with-jest/

Angular testing

Jest를 사용해 Angular를 테스트하는 방법에 관해 소개돼 있습니다.


Media Updates in Chrome 61  |  Web  |  Google Developers

developers.google.com/web/updates/2017/07/chrome-61-media-updates

Chrome video article

Chrome 61의 Media 요소와 관련된 변경 사항에 대해 정리돼 있습니다.
MSE를 사용한 동영상은 백그라운드에서 Video Track을 사용하지 않도록 변경됐고 디바이스가 rotate한 경우에 일정 조건 하에 동영상이 풀스크린이 되도록 변경됐습니다.


ECMAScript proposal updates @ 2017-07 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2017/07/28/ecmascript-proposals-status

ECMAScript proposal

2017년 5월 시점의 ECMAScript 사양 Proposal의 변경 사항이 정리돼 있습니다.


PWA를 구현해 봤다 - 기술을 찾아

abouthiroppy.hatenablog.jp/entry/2017/07/28/101318(일본어)

ProgressiveWebApp React article

React + React Router + webpack으로 PWA의 App Shell 패턴을 구현한 이야기입니다.
라우팅으로 Code Splitting을 하고 Service Worker로 캐쉬하는 방법에 대해 작성돼 있습니다.


편안한 ECMAScritp2015 초입문

www.geocities.jp/m_hiroi/light/js2015.html(일본어)

ECMAScript JavaScript tutorial

ES2015에 추가된 기능과 구문에 대한 입문 사이트입니다.
각각의 기능이나 사용 방법에 대해 작성돼 있습니다.


[es6]research on ES6 `Proxy`

gist.github.com/bellbind/8f33d81458dd454b430d4cd949076b30(일본어)

ECMAScript JavaScript

ES Proxy에 대해 설명돼 있는 글입니다.
target과 trap이 맞지 않으면 TypeError가 발생한 다는 점과 Proxy 관련 사양을 읽는 방법 그리고 trap의 종류와 역할에 대해 작성돼 있습니다.
Proxy.revocable이나 사용 케이스에 대해서도 이야기합니다.


Writing a Node.js module in TypeScript

www.twilio.com/blog/2017/06/writing-a-node-module-in-typescript.html

TypeScript npm JavaScript

TypeScript로 작성한 모듈을 npm에 공개하는 과정을 담은 튜토리얼입니다.


Error Handling in React 16 - React Blog

facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html

React article

React 16에 들어간 Error Boundaries에 대해 소개합니다. 자식 컴포넌트에서 발생한 에러를 부모가 잡을(catch) 수 있는 componentDidCatch 라이프 사이클 메서드가 추가됐습니다.


Update on Web Cryptography | WebKit

webkit.org/blog/7790/update-on-web-cryptography/

JavaScript security article

WebCrypto API에 대해 소개돼 있습니다. 네이티브 구현과 라이브러리의 속도 비교, 기본적인 사용 방법, 비동기 처리, 사용할 수 있는 알고리즘, prefix가 붙은 Webkit SubtleCrypto에서 SubtleCrypto로 수정하는 방법에 대해서 작성돼 있습니다.


사이트, 서비스, 문서


Chrome Platform Status

www.chromestatus.com/features/schedule

Chrome browser

Chrome의 릴리즈 일정과 추가되거나 변경될 기능이 정리돼 있는 페이지입니다.


소프트웨어, 도구, 라이브러리


bpesquet/thejsway: The JavaScript Way book

github.com/bpesquet/thejsway

JavaScript book DOM

JavaScript에 대해 학습할 수 있는 입문 서적입니다.
JavaScript/ES2015+의 기본적인 문법 소개, DOM/DOM API 소개, Node.js 등을 사용해 실제로 웹 애플리케이션을 만들어보는 내용으로 구성돼 있습니다.


도서


Amazon | TypeScript High Performance [Kindle edition] by Ajinkya Kher | Languages & Tools | Kindleストア

www.amazon.co.jp/TypeScript-High-Performance-Ajinkya-Kher-ebook/dp/B071VVFD4D

TypeScript book

2017년 9월 6일 출간 예정인 TypeScript를 이용해 프로젝트를 진행하면서 성능이나 배포 방법에 관해 설명하는 도서입니다.


Learning React - O'Reilly Media

shop.oreilly.com/product/0636920049579.do

React book redux

Functional한 접근법으로 React/Redux를 학습해 보는 도서입니다.


Pull Request to this article
JSer.info Slackに参加する