Fork me on GitHub

2020-05-07: Firefox 76, Jest 26, Web Vitals

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #486 - Firefox 76이 릴리스됐습니다.

Firefox 76에서는 개발자 도구가 많이 개선됐습니다.
특정 디렉터리를 디버거 대상에서 제외할 수 있으며 "Copy stack trace"가 추가됐고 WebSocket Inspection에서 Action Cable을 지원합니다.

추가된 기능으로는 Audio worklets, CSS System Colors를 지원합니다.
그 외로 알 수 없는 프로토콜로의 Navigation 이동이 차단되도록 변경 됐습니다.


JavaScript 테스트 프레임워크 Jest 26이 릴리스됐습니다.

@sinonjs/fake-timers 기반의 새로Fake Timer와 it이나 describe 등을 export 하는 @jest/globals가 추가됐고 Native ESM을 지원합니다.
비호환 변경 사항으로는 Node.js 8 미만을 지원 종료 했으며 몇 개의 코어 모듈에서 ES5 빌드를 제공하지 않도록 변경됐습니다.

향후 예정된 변경 사항으로 Jest 27에서 기본 testRunner가 "jest-circus"으로 변경되며 environment도 "node"로 변경됩니다.
또, Jest 28에서는 "jest-jasmine2"와 "jest-environment-jsdom"이 코어에서 별도의 패키지로 분리될 예정입니다.

위 내용을 간단하게 정리하자면 다음과 변경될 예정입니다.


Web Vitals에서는 웹사이트 성능과 관련한 중요한 지표를 Core Web Vitals라는 개념으로 정리하고 Google/Chrome 계열 제품에서 어떻게 측정할 수 있는지 소개합니다.

현재 Core Web Vitals은 다음 세 가지 지표로 구성돼 있습니다.

관련 지표를 측정할 수 있는 web-vitals이라는 자바스크립트 라이브러리(Performance Observer를 사용하기 때문에 Chrome에서만 얻을 수 있는 지표도 있음)와 브라우저 확장 기능을 소개합니다.

향후에는 Chrome User Experience Report(이미 지원함), PageSpeed Insights, Search Console 등의 도구에서도 이 지표를 이용할 수 있도록 개선한다고 합니다.


헤드라인


Firefox 76: Audio worklets and other tricks - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/05/firefox-76-audio-worklets-and-other-tricks/

Firefox ReleaseNote

Firefox 76이 릴리스됐습니다.
개발자 도구가 개선됐고 Audio worklets과 CSS System Colors 지원하며 알 수 없는 프로토콜로의 Navigation 이동이 차단됩니다.


Node v12.16.3 (LTS) | Node.js

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

node.js ReleaseNote

Node.js 12.16.3이 릴리스 됐습니다.
Experimental로 구현돼 있는 conditional exports와 관련된 경고 메시지가 삭제됐습니다.


Announcing TypeScript 3.9 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-9-rc/

TypeScript ReleaseNote

TypeScript 3.9 RC가 릴리스됐습니다.
Promise.all 타입이 개선됐고 빌드 성능이 개선됐으며 Type Error가 보고되지 않도록 하는 // @ts-expect-error 코멘트가 추가됐습니다. 또, ECMAScript 사양에 맞춰 Getter/Setter가 변환되도록 수정됐으며 이번 릴리스에 예정됐던 awaited type 추가가 연기됐습니다.


jQuery 3.5.1 Released: Fixing a Regression | Official jQuery Blog

blog.jquery.com/2020/05/04/jquery-3-5-1-released-fixing-a-regression/

jQuery ReleaseNote

jQuery 3.5.1이 릴리스 됐습니다.
jQuery 3.5.0에 발생한 회귀 문제를 수정했습니다. 3.5에는 XSS 보안 문제를 해결하기 위해 하위 호환성 없는 부분이 포함됐습니다.


Jest 26: Tick Tock · Jest

jestjs.io/blog/2020/05/05/jest-26

JavaScript testing library ReleaseNote

Jest 26이 릴리스 됐습니다.
@sinonjs/fake-timers 기반의 새로운 Fake Timer와 it이나 describe 등을 などをexport하는 @jest/globals가 추가됐고 Native ESM을 지원합니다.
몇 가지 코어 모듈에서 ES5 빌드를 제공하지 않으며 Node.js 8 미만 지원이 종료됐습니다.
향후 예정된 변경 사항으로 Jest 27에서 기본 testRunner가 "jest-circus"으로 변경되며 environment도 "node"로 변경됩니다.
또, Jest 28에서는 "jest-jasmine2"와 "jest-environment-jsdom"이 코어에서 별도의 패키지로 분리될 예정입니다.


Release v1.6.0 · mdx-js/mdx

github.com/mdx-js/mdx/releases/tag/v1.6.0

JavaScript Markdown ReleaseNote

Markdown에 JSX를 확장하는 MDX 1.6.0이 릴리스 됐습니다.
Vue를 베타로 지원합니다.


아티클


What’s in that .wasm? Introducing: wasm-decompile · V8

v8.dev/blog/wasm-decompile

WebAssembly article

wasm-decompile의 WebAssembly 디컴파일 원리를 소개합니다.


window.location Cheatsheet - DEV Community 👩‍💻👨‍💻

dev.to/samanthaming/window-location-cheatsheet-4edl

JavaScript チートシート article

window.location 객체의 속성이나 메서드 동작이 알기 쉽게 정리돼 있습니다.


Improved Next.js and Gatsby page load performance with granular chunking

web.dev/granular-chunking-nextjs/

webpack article

webpack의 SplitChunksPlugin을 이용해 Next.js 9.2나 Gatsby의 페이지 간 Common chunk를 분리하는 방법을 소개합니다.
HTTP/2 환경에서 maxInitialRequests 설정으로 요청 수가 증가하면 어떠한 영향이 있고, 라우팅에 분리한 청크를 적용하는 방법은 무엇인지 설명합니다.


Web Vitals

web.dev/vitals/

Chrome performance article JavaScript

웹사이트 성능과 관련한 중요한 지표를 Core Web Vitals라는 개념으로 정리하고 Google/Chrome 계열 제품에서 어떻게 측정할 수 있는지 소개합니다.

Core Web Vitals로는 Largest Contentful Paint(LCP), First Input Delay(FID), Cumulative Layout Shift(CLS)가 있고, 이를 측정할 수 있는 도구 web-vitals를 함께 소개합니다. 또, 추후 PageSpeed Insights나 Search Console 등도 각각 대응할 예정이라고 합니다.


슬라이드, 영상


rinsuki/play-flv-in-browser: Play FLV in Browser!

github.com/rinsuki/play-flv-in-browser

flash video WebAssembly JavaScript browser

ffmepg를 WebAssembly로 컴파일 한 버전을 이용해 flv/mp4를 브라우저에서 재생하는 데모입니다.


사이트, 서비스, 문서


antfu/i18n-ally: 🌍 All in one i18n extension for VS Code

github.com/antfu/i18n-ally

VSCode i18n Extension EmEditor

i18n 편집 시스템을 제공하는 VS Code 확장 플러그인입니다.
에디터 상에서 번역키 대신에 번역 텍스트를 표시하는 등 지역화를 위한 기능을 제공합니다.
Vue, React 등 다양한 프레임워크 환경을 지원합니다.


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


addaleax/gen-esm-wrapper: Generate ESM wrapper files for CommonJS modules

github.com/addaleax/gen-esm-wrapper

node.js CommonJS ECMAScript module

CommonJS에서 ESM Wrapper를 생성하는 도구입니다.


jesseduffield/lazynpm: terminal UI for npm

github.com/jesseduffield/lazynpm

npm console UI

lazygit, lazydocker와 비슷한 npm 터미널 UI 도구입니다.
패키지 정보 표시, 패키지 관리, 스크립트를 실행 등의 기능을 제공합니다.


Quantum JavaScript (Q.js)

quantumjavascript.app/

JavaScript library

양자 회로 시뮬레이터 라이브러리입니다.


도서


Tackling TypeScript: Upgrading from JavaScript

exploringjs.com/tackling-ts/

TypeScript book

Dr. Axel가 집필한 TypeScript 입문서입니다.


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