JSer.info #621 - Electron 22.0.0 출시되었다.
Chromium 108, Node.js 16.17.1, V8 10.8로 업데이트, UtilityProcess 모듈 추가, new-window 이벤트 비권장화 등의 변경이 포함되었다.
또한 Chromium 109에서는 Windows 7/8/8.1 지원이 종료됨에 따라 Electron도 이에 대응했다.
Windows 7/8/8.1 지원하는 최후의 Electron 버전이다.
이번주는 웹 퍼포먼스와 JavaScript 퍼포먼스에 대한 글이 많습니다.
Image Formats for the Web | DebugBear은 GIF부터 AVIF까지 여러 이미지 퍼포먼스에 대해 정리했습니다.
또한, Prerender pages in Chrome for instant page navigations - Chrome Developers은, Chrome 108에 새로 구현된 prerender 구조에 대해 설명합니다.
Speeding up the JavaScript ecosystem - one library at a time에서는, 유명한 라이브러리의 어떤 부분이 느려지는 처리를 하는가 알려줍니다.
이 외에도 Web Performance Calendar » 2022가 올해도 개최됨에 웹 관련 퍼포먼스 글이 많습니다.
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Electron 22.0.0 | Electron
www.electronjs.org/blog/electron-22-0
Electron 22.0.0 출시.
Chromium 108, Node.js 16.17.1, V8 10.8 로 업데이트, UtilityProcess 모듈 추가, new-window 이벤트 비권장화.
Windows 7/8/8.1 지원하는 마지막 버전 Electron.
Release 5.0.0 · primus/eventemitter3
github.com/primus/eventemitter3/releases/tag/5.0.0
eventemitter3 5.0.0 출시.
Node.js ESM 지원 등
ECMAScript proposal updates @ 2022-11 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2022/12/05/ecmascript-proposal-update
2022년 11월에 행해진 TC39 Meeting에 의해 Status가 변경된 ECMAScript Proposal 정리.
New in Chrome 108 - Chrome Developers
developer.chrome.com/blog/new-in-chrome-108/
Chrome 108 변경점에 대해.
viewport의 unit dvh/lvh/svh 추가, Variable fonts의 COLRv1를 지원.
FileSystemSyncAccessHandle API를 동기 메서드로 변경, Permissions Policy Origin 지정에 *(wildcard)를 이용할 수 있도록 등
읽을거리
How TypeScript 4.9 `satisfies` Your Prisma Workflows
www.prisma.io/blog/satisfies-operator-ur8ys8ccq7zb
TypeScript 4.9 satisfies operator 사용방법에 대한 글.
Prisma이나 Zod와 함께 사용하는 방법에 대해.
Sass로 만든 SVG 초빠르게 읽어주는 라이브러리 소개 - dwango on GitHub
dwango.github.io/articles/2022-12_nicolive_svg/
CSS를 사용해 SVG를 갈아끼우는 방법과 그것을 구현한 라이브러리에 대해.
CSS의 mask-image를 사용하는 방법과 animationstart로 갈아끼우는 방법과 비교.
Image Formats for the Web | DebugBear
www.debugbear.com/blog/image-formats
웹에 적절한 이미지 포맷과 어떤 것을 사용해야 하는가 에대해.
GIF/PNG/JPG/WebP/AVIF/SVG 각각의 특성과 추천사항. AVIF은 비가역 압축과 가역 압축 모두 지원하며, 가역 압축의 결과는 그다지 좋지 않다는 점에 대해 등
비가역: 어떤 상태로 되돌릴 수 없는, 가역: 어떤 상태로 되돌릴 수 있는.
Migrating from Vue 2 to Svelte
escape.tech/blog/from-vue2-to-svelte/
Vue 2에서 SvelteKit으로 이행하는 글.
Working with Zustand | TkDodo's blog
tkdodo.eu/blog/working-with-zustand
React 상태관리 라이브러리 Zustand에 대한 Tips.
퍼포먼스 관련한 Tips, 액션과 상태의 분리, 액션을 setter가 아니라 event로 다룸, Store 스코프를 자잘하게 보존 등
Prerender pages in Chrome for instant page navigations - Chrome Developers
developer.chrome.com/en/blog/prerender-pages/
Chrome의 새로운 prerender에 대해.
주소창에 URL 입력하는 경우에도 신뢰도에 기반해 Prerender를 우선적으로 행함.
또한 Speculation Rules API에 prerender 규칙 정의, prerender를 서버 측에서 무효화하는 방법, prerender 되었는가 어떤가를 확인하는 방법 등 .
Speeding up the JavaScript ecosystem - one library at a time
marvinh.dev/blog/speeding-up-javascript-ecosystem/
불필요한 자료형 변환이나 함수 안에 함수를 만들지 않음으로 다수의 라이브러리는 성능이 개선되었다는 글.
실제 PostCSS 플러그인이나 SVGO 등 코드를 예시로 어떤 것이 성능에 영향을 주는가에 대해
New npm features for secure publishing and safe consumption | The GitHub Blog
github.blog/2022-12-06-new-npm-features-for-secure-publishing-and-safe-consumption/
npm에 접근가능한 범위 설정할 수 있는 fine-grained access token 추가, npm 웹사이트 상의 Code explorer에서 코드를 볼 수 있도록 등
슬라이드, 영상
An introduction to the LibJS JavaScript engine - Google 슬라이드
docs.google.com/presentation/d/1-chE3GTNFnNRwZqk4Bf3GCPV_nINfKG-NUTM4IeEnVc/edit#slide=id.p
SerenityOS 대상 스크래치에서 JavaScript 엔진을 작성했다는 슬라이드.
ECMA-262 사양을 만족하는 JIT 없이 AST/Bytecode 인터프리터를 어떻게 구현했는가에 대해
소프트웨어, 도구, 라이브러리
shuding/nextra: Simple, powerful and flexible site generation framework with everything you love from Next.js.
Next.js와 MDX 기반 정적 사이트 제네레이터 도구.
