JSer.info #447 - Chrome 76이 릴리스됐습니다.
- New in Chrome 76 | Web | Google Developers
- Deprecations and removals in Chrome 76 | Web | Google Developers
- Chrome Platform Status
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_componentWillMount 등 UNSAFE_*가 붙은 라이프 사이클 메서드를 사용할 시 경고를 출력하도록 변경됐습니다.
또 XSS에 사용되는 <a href="javascript:"> 등 javascript: 스킴에 대해서도 경고를 출력합니다.
이와 비슷한 기능은 Ember나 Angular도 구현돼 있습니다.
- Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react
- Ember.js - Ember.js 1.9.1 Released
- Angular - Security
이 외로 DevTools에서 useState 편집 기능과 Suspense 토글 기능을 지원하는 등 개발자 도구가 개선됐고 테스트 용 act 함수에서 비동기 함수를 지원하는 등 다양한 변경 사항이 포함됐습니다.
헤드라인
New in Chrome 76 | Web | Google Developers
developers.google.com/web/updates/2019/07/nic76
Chrome 76이 릴리스됐습니다.
Stage 4가 된 Promise.allSettled()가 구현됐고 Blob#text() / Blob#arrayBuffer() / Blob#stream()를 지원합니다
또, Fetch Metadata 요청 헤더(Sec-Fetch-*)가 구현됐고 관련 플래그를 추가해 Cookie가 기본적으로 SameSite=Lax로 설정되는 변경히 포함됐습니다.
- Chrome Platform Status
- Deprecations and removals in Chrome 76 | Web | Google Developers
- w3c/webappsec-fetch-metadata: WebAppSec has adopted sec-metadata as fetch-metadata
Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox
github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0
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
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 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 Desktop 아키텍처를 어떻게 리팩터링 했는지 설명합니다.
jQuery + Signal 구조에서 React + Redux 구조로 이전했습니다.
기존 코드 베이스를 유지하면서 점진적으로 모던한 환경으로 이전하는 전략에 대해서 이야기합니다.
이름 공간 객체와 모듈 방식이 혼재할 때의 상호 운용성을 고려해 낡은 코드는 새로운 코드를 직접 import할 수 없고 새로운 코드는 낡은 코드를 직접 import 할 수 없다는 legacy-interop 개념을 도입하여 진행했습니다.
Multi workspace를 고려해 재작성했으며 그로인해 메모리 사용량 절약 효과가 있었다고 말합니다.
프로덕트 간 공통의 React 컴포넌트 라이브러리를 운용하기 - SmartHR Tech Blog(일본어)
tech.smarthr.jp/entry/2019/08/01/151100
애플리케이션 간 공통 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
웹 사이트의 DOM과 리소스를 스냅샷 찍을 수 있는 라이브러리입니다.
소프트웨어, 도구, 라이브러리
harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.
Liquid 호환 템플릿 엔진의 자바스크립트 구현체입니다.
unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.
github.com/unshiftio/url-parse
Browser, Node.js, Worker에서 동작하는 URL 파서 라이브러리입니다.
Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.
Git Hooks를 yml으로 관리할 수 있는 도구입니다.
Node.js나 Ruby 등의 패키지 매니저로 설치 및 사용할 수 있습니다.
daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!
요소 끌기(drag), 리사이즈 등의 이벤트 핸들링을 다루는 라이브러리입니다.
@Databases · Database libraries for Node.js that protect you from SQL Injection
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
.env나 .env.development 파일 등을 환경에 따라 적절히 읽어들이는 라이브러리입니다.
도서
JavaScript for impatient programmers
exploringjs.com/impatient-js/index.html
Dr.Axel의 자바스크립트 입문 서적입니다.
