Fork me on GitHub

2020-04-20: puppeteer 3.0.0, Chrome 83 Beta, Vue.js 3.0 Beta

Translator: U-Yeong Ju Edit on GitHub See Revisions

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

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

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


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

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

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

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

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


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

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

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


헤드라인


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.readSyncoffsetlength 옵션이 추가됐습니다. 또, 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의 지원이 종료됐습니다.


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

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.crossOriginIsolatedtrue인 경우에 사용할 수 있습니다.
crossOriginIsolated를 활성화 하기 위해서는 Cross-Origin-Embedder-PolicyCross-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를 지원하며 트리쉐이킹에 대응해 파일 크기를 줄였고 타입스크립트를 지원합니다.


사이트, 서비스, 문서


Vuln Cost - security scanner for VS Code | Snyk

snyk.io/security-scanner-vuln-cost/

VSCode security Tools

VSCode에서 require 혹은 import하는 모듈의 취약점을 보여주는 확장 기능입니다.


CSS via inline variables

codepen.io/WebReflection/pen/gOawwew

CSS HTML example

엘리먼트의 style 속성에 CSS Custom Properties를 정의하여 CSS에서 CSS Custom Properties의 변수를 가져오거나 초기값을 지정할 수 있는 패턴입니다.
사용자 측에서 CSS 값을 주입할 수 있는 구조입니다.


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


aeroheim/midori: library for animated image backgrounds

github.com/aeroheim/midori

JavaScript WebGL library

Canvas / WebGL를 사용해 배경 이미지의 애니메이션을 보여주는 라이브러리입니다.
불러온 이미지에 transitions나 effects를 설정할 수 있습니다.


yusufnb/verify-json: verify-json

github.com/yusufnb/verify-json

JSON library

JSON을 검사하는 라이브러리입니다.
스키마를 지정해 JSON 객체가 올바른지 검사할 수 있습니다.


도서


JavaScript Primer 헤매지 않기 위한 입문서 | azu, Suguru Inatomi | 책 | 통신판매 | Amazon(일본어)

www.amazon.co.jp/dp/4048930737/

JavaScript book

2020년 4월 27일 출간 예정인 자바스크립트 입문서입니다.
https://jsprimer.net/의 서적 버전입니다.


속성 TypeScript 제 2 판 속성 시리즈 | 야마다 요시히로 | 엔지니어링 | Kindle 스토어 | Amazon(일본어)

www.amazon.co.jp/dp/B086JKVGPB/

TypeScript book

TypeScript을 주제로 한 전자 도서입니다.


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