JSer.info #486 - Firefox 76이 릴리스됐습니다.
- Firefox 76: Audio worklets and other tricks - Mozilla Hacks - the Web developer blog
- Firefox 76 for developers - Mozilla | MDN
- Firefox 76 Site Compatibility | Firefox Site Compatibility
- Firefox 76.0, See All New Features, Updates and Fixes
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은 다음 세 가지 지표로 구성돼 있습니다.
- Largest Contentful Paint (LCP): 로드 관련 지표
- First Input Delay (FID): 인터랙션 관련 지표
- Cumulative Layout Shift (CLS): 렌더링 관련 지표
관련 지표를 측정할 수 있는 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 76이 릴리스됐습니다.
개발자 도구가 개선됐고 Audio worklets과 CSS System Colors 지원하며 알 수 없는 프로토콜로의 Navigation 이동이 차단됩니다.
- Firefox 76 for developers - Mozilla | MDN
- Firefox 76 Site Compatibility | Firefox Site Compatibility
- Firefox 76.0, See All New Features, Updates and Fixes
Node v12.16.3 (LTS) | Node.js
nodejs.org/en/blog/release/v12.16.3/
Node.js 12.16.3이 릴리스 됐습니다.
Experimental로 구현돼 있는 conditional exports와 관련된 경고 메시지가 삭제됐습니다.
Announcing TypeScript 3.9 RC | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-3-9-rc/
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 3.5.1이 릴리스 됐습니다.
jQuery 3.5.0에 발생한 회귀 문제를 수정했습니다. 3.5에는 XSS 보안 문제를 해결하기 위해 하위 호환성 없는 부분이 포함됐습니다.
Jest 26: Tick Tock · Jest
jestjs.io/blog/2020/05/05/jest-26
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
Markdown에 JSX를 확장하는 MDX 1.6.0이 릴리스 됐습니다.
Vue를 베타로 지원합니다.
아티클
What’s in that .wasm? Introducing: wasm-decompile · V8
wasm-decompile의 WebAssembly 디컴파일 원리를 소개합니다.
window.location Cheatsheet - DEV Community 👩💻👨💻
dev.to/samanthaming/window-location-cheatsheet-4edl
window.location 객체의 속성이나 메서드 동작이 알기 쉽게 정리돼 있습니다.
Improved Next.js and Gatsby page load performance with granular chunking
web.dev/granular-chunking-nextjs/
webpack의 SplitChunksPlugin을 이용해 Next.js 9.2나 Gatsby의 페이지 간 Common chunk를 분리하는 방법을 소개합니다.
HTTP/2 환경에서 maxInitialRequests 설정으로 요청 수가 증가하면 어떠한 영향이 있고, 라우팅에 분리한 청크를 적용하는 방법은 무엇인지 설명합니다.
Web Vitals
웹사이트 성능과 관련한 중요한 지표를 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 등도 각각 대응할 예정이라고 합니다.
- GoogleChrome/web-vitals: Essential metrics for a healthy site.
- GoogleChrome/web-vitals-extension: A Chrome extension to measure essential metrics for a healthy site
슬라이드, 영상
rinsuki/play-flv-in-browser: Play FLV in Browser!
github.com/rinsuki/play-flv-in-browser
ffmepg를 WebAssembly로 컴파일 한 버전을 이용해 flv/mp4를 브라우저에서 재생하는 데모입니다.
사이트, 서비스, 문서
antfu/i18n-ally: 🌍 All in one i18n extension for VS Code
i18n 편집 시스템을 제공하는 VS Code 확장 플러그인입니다.
에디터 상에서 번역키 대신에 번역 텍스트를 표시하는 등 지역화를 위한 기능을 제공합니다.
Vue, React 등 다양한 프레임워크 환경을 지원합니다.
소프트웨어, 도구, 라이브러리
addaleax/gen-esm-wrapper: Generate ESM wrapper files for CommonJS modules
github.com/addaleax/gen-esm-wrapper
CommonJS에서 ESM Wrapper를 생성하는 도구입니다.
jesseduffield/lazynpm: terminal UI for npm
github.com/jesseduffield/lazynpm
lazygit, lazydocker와 비슷한 npm 터미널 UI 도구입니다.
패키지 정보 표시, 패키지 관리, 스크립트를 실행 등의 기능을 제공합니다.
Quantum JavaScript (Q.js)
양자 회로 시뮬레이터 라이브러리입니다.
도서
Tackling TypeScript: Upgrading from JavaScript
Dr. Axel가 집필한 TypeScript 입문서입니다.
