Fork me on GitHub

2019-09-30: React 16.10.0, Node.js 12.11.0(worker_thread), 네트워크 요청과 UI 갱신의 경합(race)

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #455 - React 16.10.0이 릴리스됐습니다.

useSubscription에 관련된 버그Hooks API에서 메모화가 잘 동작하지 않는 엣지케이스가 수정되는 등 자잘한 버그 수정이 중점으로 이뤄졌습니다.

또, 현재 실험적으로 구현돼 있는 scheduler의 메모리 효율이 개선됐고 메시지 루프에 requestAnimationFrame이 아닌 postMessage를 사용하는 구현 등도 추가됐습니다.


Node.js 12.11.0이 릴리스됐습니다.

Node.js 12.11.0에서는 Chrome 77에 해당하는 V8 7.7.299.11으로 갱신 됐습니다.

또, Node.js에서 병렬 처리가 가능한 worker_thread 모듈이 안정(stable) 단계로 전환됐습니다.


Handling API request race conditions in React에는 네트워크 요청 후 UI를 갱신할 경우 발생할 수 있는 경합 조건(race conditions)에 관해 작성돼 있습니다.

요청이 성공했을 때 단순히 UI를 갱신하는 것과 같이 작성하면 네트워크 지연 등으로 여러개의 요청이 송신되고 결과적으로 요청의 성공 시점과 UI 갱신 시점이 기대하는대로 일치하지 않는 문제가 발생하는 경우가 있습니다.

이 문서에서는 React를 예로, 요청에 문제가 있을 경우 어떻게 회피할 수 있는지 작성돼 있으며 불필요한 요청을 무시하거나 취소하는 등의 구현 방법도 소개돼 있습니다.


헤드라인


React Training: React Router v5.1

reacttraining.com/blog/react-router-v5-1/

React library ReleaseNote

React Router 5.1이 릴리스 됐습니다.
Hooks API를 추가적으로 지원합니다.
useParams, useLocation, useHistory 등의 API가 추가 됐습니다.


Announcing React Native 0.61 with Fast Refresh · React Native

facebook.github.io/react-native/blog/2019/09/18/version-0.61

React iOS Android ReleaseNote

React Native 0.61이 릴리스됐습니다.
Fast Refresh = live reload + hot reloading.
use_frameworks!를 사용할 경우 발생하는 Cocoapod 문제가 수정됐고 React의 버전이 16.9로 갱신됐습니다. 그리고 useWindowDimensions Hook API가 추가됐습니다.


Release 16.10.0 (September 27, 2019) · facebook/react

github.com/facebook/react/releases/tag/v16.10.0

React ReleaseNote

React 16.10.0이 릴리스 됐습니다.
실험적으로 구현한 Scheduler의 메모리 사용 효율이 개선됐으며 requestAnimationFrame이 아니라 postMessage를 사용해 보다 짧은 주기로 체크할 수 있도록 구현됐습니다. 또, useSubscription의 버그가 수정됐습니다.


V8 release v7.8 · V8

v8.dev/blog/v8-release-78

V8 ReleaseNote

V8 v7.8이 릴리스됐습니다.
Script Streaming으로 JavaScript를 가져올때의 성능과 객체 구조 분해 할당(destructuring) 성능이 개선 됐습니다.
또, V8 API에서 WebAssembly C/C++ API를 공식적으로 지원합니다.


Node v12.11.0 (Current) | Node.js

nodejs.org/en/blog/release/v12.11.0/

node.js ReleaseNote

Node v12.11.0이 릴리스 됐습니다.
V8 7.7로 갱신, worker_thread 모듈이 안정(stable) 단계로 변경됐습니다.


Release v2 Cosmic Jellyfish · gpujs/gpu.js

github.com/gpujs/gpu.js/releases/tag/2.0.0

JavaScript library ReleaseNote

gpu.js 2.0.0이 릴리스됐습니다.
Video input을 지원하며 gpu.setInjectedNative()mode 옵션에 dev가 추가됐습니다.


아티클


Handling API request race conditions in React

sebastienlorber.com/handling-api-request-race-conditions-in-react

JavaScript React article

네트워크 지연 등으로 여러개의 요청이 송신되고 결과적으로 요청의 성공 시점과 UI 갱신 시점이 기대하는대로 일치하지 않는 문제에 대해서 이야기합니다.
React를 예로, 요청에 문제가 있을 경우 어떻게 회피할 수 있는지 작성돼 있으며 불필요한 요청을 무시하거나 취소하는 등의 구현 방법도 소개돼 있습니다.


TypeScript Tutorial for Beginners: The Missing Guide (2019)

www.valentinog.com/blog/typescript/

TypeScript tutorial article

초보자를 대상으로 한 TypeScript 튜토리얼입니다.


Working with GitHub Actions | Jeff Rafter

jeffrafter.com/working-with-github-actions/

node.js Github Actions article testing

Node.js + TypeScript로 GitHub Actions를 작성하는 튜토리얼입니다.
@actions/core 사용법과 Github API로의 요청, 디버깅 방법, 테스트 방법 등에 대해 소개돼 있습니다.


Why Your Angular App Is Not Working: 7 Common Mistakes - DEV Community 👩‍💻👨‍💻

dev.to/valeriopisapia/why-your-angular-app-is-not-working-7-common-mistakes-2ba1

Angular article

Angular 애플리케이션에서 흔히 겪는 오류와 수정 방법에 대해 작성돼 있습니다.


swyx Writing | Why JavaScript Tooling Sucks

www.swyx.io/writing/js-tooling/

JavaScript community Tools opinion article

JavaScript의 툴링이 왜 어려운지 이야기합니다.
JavaScript의 시작, 거대한 커뮤니티, 타겟의 변화, 바텀-업, 오너쉽과 semver, 도구를 만드는 사람과 사용하는 사람, 펀딩 문제등을 이야기하며 이 외로 좋은 점에 대해서도 거론합니다.
JavaScript 애플리케이션의 97%는 npm을 토대로 구성되기 때문에 OSS 문제는 곧 JavaScript의 문제로 보인다는 개인적인 의견도 함께 담고 있습니다.


사이트, 서비스, 문서


Webtest.app - Testing websites with and without adblocker

webtest.app

webservice Tools performance

웹 사이트를 uBlock Origin 등과 같은 Adblock을 경유(사용)할 경우 제외(block)된 요청과 Cookie, 전체 페이지 크기, 성능 지표 등을 비교 측정하여 제공하는 도구입니다.


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


chroventer/endb: Simple key-value database with multi adapter support

github.com/chroventer/endb

node.js JavaScript library

MySQL과 Redis 등을 백엔드로 두고 사용가능한 KVS 라이브러리입니다.


oframe/ogl: Minimal WebGL framework

github.com/oframe/ogl

WebGL library

WebGL 프레임워크입니다.
추상도가 낮고 Math/Core/Extras 모듈로 구성돼 있습니다.


도서


valentinogagliardi/Little-JavaScript-Book: The Little JavaScript Book

github.com/valentinogagliardi/Little-JavaScript-Book

JavaScript book

JavaScript를 주제로한 도서입니다.


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