Fork me on GitHub

2019-08-06: Chrome 76, React 16.9, Slack Desktop 리팩터링

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #447 - Chrome 76이 릴리스됐습니다.

Stage 4가 된 Promise.allSettled()가 구현됐고 Blob#text() / Blob#arrayBuffer() / Blob#stream()을 지원합니다.
또, Async Clipboard API에서 이미지 관련 기능을 지원합니다. 아래 문서를 참고하세요.

Fetch Metadata 요청 헤더(Sec-Fetch-*) 구현, Cookie가 기본적으로 SameSite=Lax로 설정되는 변경이 포함됐습니다. 관련해서 추가된 플래그(same-site-by-default-cookies)를 활성화해야 동작합니다.
Chrome 80에서 SameSite Cookie가 기본이 될 예정입니다. 다음 문서에 자세히 설명돼 있으니 관심있는 분은 참고하시길 바랍니다.


React 16.9 RC 버전이 릴리스됐습니다.

실험적으로 구현돼 있던 <React.Profiler>가 Stable로 지원됩니다.
프로파일에 대해서는 아래 글을 함께 살펴보시면 좋을 것 같습니다.

비권장하는 UNSAFE_componentWillMountUNSAFE_*가 붙은 라이프 사이클 메서드를 사용할 시 경고를 출력하도록 변경됐습니다.

또 XSS에 사용되는 <a href="javascript:">javascript: 스킴에 대해서도 경고를 출력합니다.
이와 비슷한 기능은 Ember나 Angular도 구현돼 있습니다.

이 외로 DevTools에서 useState 편집 기능과 Suspense 토글 기능을 지원하는 등 개발자 도구가 개선됐고 테스트 용 act 함수에서 비동기 함수를 지원하는 등 다양한 변경 사항이 포함됐습니다.


헤드라인


New in Chrome 76  |  Web  |  Google Developers

developers.google.com/web/updates/2019/07/nic76

Chrome ReleaseNote

Chrome 76이 릴리스됐습니다.
Stage 4가 된 Promise.allSettled()가 구현됐고 Blob#text() / Blob#arrayBuffer() / Blob#stream()를 지원합니다
또, Fetch Metadata 요청 헤더(Sec-Fetch-*)가 구현됐고 관련 플래그를 추가해 Cookie가 기본적으로 SameSite=Lax로 설정되는 변경히 포함됐습니다.


Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0

ServiceWorker ReleaseNote JavaScript

Service Worker 프레임워크 Workbox 5α가 릴리스됐습니다.
Service Worker의 코드를 CDN이 아니라 사용할 코드만 로컬 번들해서 사용할 수 있도록 하는 generateSW 모드가 추가됐습니다.
injectManifest에서 치환되는 플레이스 홀더가 []에서 self.__WB_MANIFEST로 변경됐습니다.


Release 10.0.0-rc.1 Biggus Fixus · preactjs/preact

github.com/preactjs/preact/releases/tag/10.0.0-rc.1

React JavaScript library ReleaseNote

Preact 10.0.0 RC1이 릴리스됐습니다.
Preact 8.x에서 10으로의 마이그레이션 가이드가 공개됐습니다.
또, 메인터넌스 버전 8.5.0도 함께 릴리스됐습니다.


Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react

github.com/facebook/react/pull/16254

React ReleaseNote issue

React 16.9 RC.0이 릴리스됐습니다.
<React.Profiler>가 추가됐고 비권장하는 UNSAFE_*가 붙은 라이프 사이클 메서드를 사용하거나 XSS에 사용되는 <a href="javascript:">를 사용할 시 경고가 출력되도록 변경됐습니다.
또, DevTools에 useState 편집, Suspense 토글 관련 기능이 추가됐고 테스트 용act 함수에서 비동기를 지원합니다.


아티클


When a rewrite isn’t: rebuilding Slack on the desktop

slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4

slack JavaScript refacoring article

Slack Desktop 아키텍처를 어떻게 리팩터링 했는지 설명합니다.
jQuery + Signal 구조에서 React + Redux 구조로 이전했습니다.
기존 코드 베이스를 유지하면서 점진적으로 모던한 환경으로 이전하는 전략에 대해서 이야기합니다.
이름 공간 객체와 모듈 방식이 혼재할 때의 상호 운용성을 고려해 낡은 코드는 새로운 코드를 직접 import할 수 없고 새로운 코드는 낡은 코드를 직접 import 할 수 없다는 legacy-interop 개념을 도입하여 진행했습니다.
Multi workspace를 고려해 재작성했으며 그로인해 메모리 사용량 절약 효과가 있었다고 말합니다.


프로덕트 간 공통의 React 컴포넌트 라이브러리를 운용하기 - SmartHR Tech Blog(일본어)

tech.smarthr.jp/entry/2019/08/01/151100

React UI library TypeScript article

애플리케이션 간 공통 UI를 라이브러리화 하는 방안에 대해 이야기합니다.
React + TypeScript + Styled Components로 구현하고 Storybook를 이용해 프리뷰를 제공, reg-suit로 회귀 테스트를 운영하는 방법이 소개돼 있습니다.


사이트, 서비스, 문서


WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.

github.com/WebMemex/freeze-dry

JavaScript library DOM

웹 사이트의 DOM과 리소스를 스냅샷 찍을 수 있는 라이브러리입니다.


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


harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.

github.com/harttle/liquidjs

JavaScript library template TypeScript

Liquid 호환 템플릿 엔진의 자바스크립트 구현체입니다.


unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.

github.com/unshiftio/url-parse

JavaScript library browser node.js

Browser, Node.js, Worker에서 동작하는 URL 파서 라이브러리입니다.


Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.

github.com/Arkweid/lefthook

git node.js ruby Tools

Git Hooks를 yml으로 관리할 수 있는 도구입니다.
Node.js나 Ruby 등의 패키지 매니저로 설치 및 사용할 수 있습니다.


daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!

github.com/daybrush/moveable

JavaScript library DOM

요소 끌기(drag), 리사이즈 등의 이벤트 핸들링을 다루는 라이브러리입니다.


@Databases · Database libraries for Node.js that protect you from SQL Injection

www.atdatabases.org/

JavaScript TypeScript SQL library security

Tagged Template Literal 기반의 SQL 쿼리 이스케이프 라이브러리입니다.
Tagged Template Literal로 작성한 SQL 문에서 쿼리와 파라미터를 분해 및 추출하고 그 결과를 데이터베이스 엔진에 전달하여 안전하게 SQL 이스케이프를 수행하는데 목적을 두고 있습니다.
Postgres, MySQL, SQLite 등을 지원합니다.


kerimdzhanov/dotenv-flow: Loads environment variables from .env.[development|test|production][.local] files for Node.js® projects.

github.com/kerimdzhanov/dotenv-flow

node.js library

.env.env.development 파일 등을 환경에 따라 적절히 읽어들이는 라이브러리입니다.


도서


JavaScript for impatient programmers

exploringjs.com/impatient-js/index.html

JavaScript book

Dr.Axel의 자바스크립트 입문 서적입니다.


Pull Request to this article
記事を紹介する