JSer.info #484 - Headless Chrome를 다루는 라이브러리 puppeteer 3.0.0이 릴리스됐습니다.

Release v3.0.0 · puppeteer/puppeteer

Chromium 81.0.4044.0으로 갱신됐습니다.
또, v2.1.0에서 파이어폭스를 지원하고 있었으며 이번에는 설치 시에 PUPPETEER_PRODUCT=firefox npm install와 같이 설정하여 파이어폭스 나이틀리 바이너리를 다운로드 할 수 있도록 변경됐습니다.

이 외로 Node.js 8을 지원 종료했으고, 코드 기반을 타입스크립트로 전환하는 중입니다.

Chrome 83 Beta가 릴리스됐습니다.

Chromium Blog: Chrome 83 Beta: Cross-site Scripting Protection, Improved Form Controls, and Safe Cross-origin Resource Sharing

이전 소식에서 전해드린 것과 같이 Chrom 82는 건너뛰고 Chrome 83이 본래 계획보다 3주 일찍 릴리스됩니다.

CSP로써 Trusted Type을 지정할 수 있으며, Form UI / Accessibility가 개선됐습니다. 또, Cross-Origin-Embedder-Policy(COEP)과 Cross-Origin-Opener-Policy(COOP)가 구현되고 있습니다. 이와 관련된 자세한 내용은 다음 문서를 참고하세요.

Making your website "cross-origin isolated" using COOP and COEP

Origin Trial로 새로운 Native File System、Performance.measureMemory()、Scheduler.postTask()가 추가됐습니다.

이 외로, ARIA Annotations 1.3 draft에 대응했고 Barcode Detection API, CSS의 @supports selector()를 지원합니다.

State of Vue Apr 16 2020 슬라이드 자료에는 현재 개발중인 Vue 3의 Beta 버전에 대해서 정리돼 있습니다.

vue-next/CHANGELOG.md at master · vuejs/vue-next

위 슬라이드에는 Vue 3의 주요한 변경에 대해서 작성돼 있으며 Composition API, Fragment, Teleport, Suspense, Custom Renderer API를 소개합니다.
또, 트리쉐이킹에 대응해 파일 크기를 줄였고 타입스크립트 지원에 대해서도 작성돼 있습니다.

Vue 3의 로드맵에 대해서는 아래 Project Board를 참고해주세요.

Roadmap

헤드라인

Node v13.13.0 (Current) | Node.js

nodejs.org/en/blog/release/v13.13.0/

node.js ReleaseNote

Node.js 13.13.0이 릴리스됐습니다.
fs.readv가 추가됐으며 fs.readSync에 offset과 length 옵션이 추가됐습니다. 또, dns.ALL 플래그가 추가됐습니다.
이어 HTTP 헤더 크기 기본 값이 8KB에서 16KB로 변경됐습니다.

Release v3.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v3.0.0

Chrome Firefox library ReleaseNote

Puppeteer 3.0.0이 릴리스됐습니다.
Chromium 81로 갱신됐으며 파이어폭스 나이틀리 바이너리를 설치할 수 있도록 변경됐습니다. 또, Node.js 8의 지원이 종료됐습니다.

blog.chromium.org/2020/04/chrome-83-beta-cross-site-scripting.html

Chrome ReleaseNote

Chrome 83 Beta이 릴리스됐습니다.
CSP로써 Trusted Type를 지정할 수 있도록 됐으며 Form UI / Accessibility가 개선됐고 COOP와 COEP가 구현됐습니다.
Origin Trial로 새로운 Native File System, Performance.measureMemory(), Scheduler.postTask()가 추가됐습니다.
이 외로 ARIA Annotations 1.3 draft에 대응했고 Barcode Detection API, CSS의 @supports selector()를 지원합니다.

Release v1.7.0 · pikapkg/snowpack

github.com/pikapkg/snowpack/releases/tag/v1.7.0

npm browser Tools ReleaseNote bundler

Snowpack 1.7.0이 릴리스됐습니다.
--env 지원, Babel 플러그인 갱신, JSX와 타입스크립트를 지원합니다.
또, Snowpack 2.0의 변경에 대해서도 작성돼 있습니다.

아티클

AddyOsmani.com - Profiling React.js Performance

addyosmani.com/blog/profiling-react-js/

React performance article

React 애플리케이션의 렌더링 성능을 측정하는 방법을 소개합니다.
Experimental한 React Profiler API, Interaction tracing을 사용하는 방법과 Puppeteer나 User Timing API, Lighthouse를 사용한 React에 의존하지 않는 측정 방법도 소개합니다.

A Tour of Inline Caching with Delete | WebKit

webkit.org/blog/10298/inline-caching-delete/

webkit performance article JavaScript

delete 연산자로 속성을 삭제할 시 객체의 구조가 달라져 구조 ID가 바뀌게 됩니다. 이때 구조 ID를 key로 하여 캐시하는 Inline Caching이 무효화돼 성능이 저하되는 문제에 대해서 작성돼 있습니다.
JSC에서는 delete에 의한 삭제 전이에 대해 최적화 하여 Ember의 디버깅 빌드와 같이 delete를 많이 사용하는 애플리케이션의 성능을 개선했다는 내용입니다.

Making your website "cross-origin isolated" using COOP and COEP

web.dev/coop-coep/

Chrome security article

SharedArrayBuffer 등의 고수준 기능은 self.crossOriginIsolated가 true인 경우에 사용할 수 있습니다.
crossOriginIsolated를 활성화 하기 위해서는 Cross-Origin-Embedder-Policy과 Cross-Origin-Opener-Policy를 다뤄야하는 부분과 Cross-Origin-* HTTP 헤더와 관련한 동향에 대해서 설명돼 있습니다.

Speed Up Your Angular App - 14 Angular Optimization Tips | GrapeCity

www.grapecity.com/blogs/14-ways-to-speed-up-your-angular-app

Angular article performance

Angular 9을 사용한 애플리케이션의 최적화 팁이 정리돼 있습니다.

What's new in ECMAScript 2020 | Strict Mode

www.strictmode.io/articles/whats-new-es2020/

ECMAScript JavaScript article

ES2020에 추가된 구문이나 메서드 등을 소개하는 글입니다.

슬라이드, 영상

vime-js/vime: All your media player needs in one place - a modern alternative to Videojs and Plyr. Supports Html5, Hls, Dash, YouTube, Vimeo, Dailymotion and more to come.

github.com/vime-js/vime

JavaScript plugin video library

플러그인으로 확장할 수 있는 비디오 플레이어 라이브러리입니다.
기능별로 모듈화 돼 있기 때문에 필요한 모듈만 사용하여 플레이어를 설정할 수 있습니다.

State of Vue Apr 16 2020 - Google 슬라이드

docs.google.com/presentation/d/1LHp-8hEtXEMSE1fd6YLAhYmtndQelQKbWlGggZKe4y8/edit#slide=id.p

Vue slide

Vue.js 3β 릴리스를 주제로 한 슬라이드 자료입니다.
Vue 3의 주요한 변경에 대해서 정리돼 있습니다.
Composition API, Fragment, Teleport, Suspense, Custom Renderer API를 지원하며 트리쉐이킹에 대응해 파일 크기를 줄였고 타입스크립트를 지원합니다.