JSer.info #649 - Svelte 4가 출시되었습니다.

Node.js 14 지원 종료, CJS 출력은 사라지고 ESM만 지원, Custom Elements 대응을 tag 옵션에서 customElement 옵션으로 변경이 포함되어있다.
또한, 생성한 파일 크기 경감, 웹사이트 문서 갱신 등도 있습니다.

마이그레이션 가이드와 npx svelte-migrate@latest svelte-4 마이그레이션 도구가 공개되어 있습니다.

Svelte 4 migration guide • Docs • Svelte

Ember 5.0 출시되었습니다.

Ember 5.0 Released

메이저 업데이트로 기능추가없이, 파괴적변경만이 있습니다.
비권장이 된 AutoLocation 삭제, @ember/error 패키지 삭제, Ember.String 삭제 등도 있습니다.

The Cost Of JavaScript 2023년판 영상과 슬라이드가 공개되었습니다.

JavaScript 다운로드, 실행 코스트에 대한 이야기로, Code Splitting나 Dynamic Import 등 최적화에 대해서도 소개중입니다.
또한, 최근 발전하고 있는 Islands Architecture의 Partial Hydration, Qwik의 Resumalable Hydration, React의 Selective Hydation에 대해서도 다루고 있습니다.

과거 The Cost Of JavaScript는 다음 페이지를 참조해주시길 바랍니다.

또한, 실제 웹사이트 데이터는 Web Almanac의 JavaScript를 참조하시면 좋을 듯 합니다.

To support JSer.info

😘 Recommend JSer.info to your friends!
❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
🐦 Follow @jser_info on X(Twitter)

헤드라인

Announcing Svelte 4

svelte.dev/blog/svelte-4

Svelte ReleaseNote

Svelte 4 출시.
Node.js 14 지원 종료, CJS 출력은 사라지고 ESM만 지원, Custom Elements를 tag 옵션에서 customElement 옵션으로 변경.
생성하는 파일 크기 삭감, 웹사이트 문서 갱신

Ember 5.0 Released

blog.emberjs.com/ember-5-0-released/

Ember ReleaseNote

Ember 5.0 출시.
메이저 업데이트이며 기능 추가 없이, 파괴적 변경만 있음.
AutoLocation 삭제, @ember/error 패키지 삭제, Ember.String 삭제

Release v6.14.0 · remix-run/react-router

github.com/remix-run/react-router/releases/tag/react-router%406.14.0

React library ReleaseNote

React Router 6.14.0 출시.
useSubmit가 JSON와 Text를 지원.

Release v0.18.9 · evanw/esbuild

github.com/evanw/esbuild/releases/tag/v0.18.9

JavaScript CSS Tools ReleaseNote

esbuild v0.18.9 출시.
await using 수정, autoprefixer 같이 CSS의 prefix 자동으로 추가되도록

Bun v0.6.10 | Bun Blog

bun.sh/blog/bun-v0.6.10

Bun ReleaseNote

Bun v0.6.10 출시.
CommonJS 호환성 개선 webpack 동작되도록, require.main 지원, __esModule 플래그를 해석하도록.
fs.watch 구현, V8 Error.captureStackTrace 구현.
bun install할 때에 라이프사이클 스크립트 실행허가하는 패키지를 정의하는 trustedDependencies 필드 지원

Release Notes for Safari Technology Preview 173 | WebKit

webkit.org/blog/14378/release-notes-for-safari-technology-preview-173/

safari ReleaseNote

Safari Technology Preview 173 출시.
Safari 17에서 도입 예정 기능 이용 가능한 Technology Preview.
Web Inspector 재설계, 웹애플리케이션을 Dock 추가, JPEG XL 지원, HEIC 지원

Release v3.0.0 · cloudflare/miniflare

github.com/cloudflare/miniflare/releases/tag/v3.0.0

cloudflare ReleaseNote JavaScript

miniflare v3.0.0 출시.
workerd 이용하도록 되었다.
CLI가 동봉되어 있지 않게되어 wrangler 경유해 CLI로 이용.
또한 몇몇 API가 삭제나 변경이 있다.

⬆️ Migrating from Version 2 · Miniflare

읽을거리

Cyclic Dependency Space Toggles

kizu.dev/cyclic-toggles/

CSS article

CSS Variables를 사용해서 로직게이트를 구현하는 방법에 대해서.
Cyclic Dependency하는 Variables는 무효로하는 사양을 이용해서, Variables에 if문스러운 표현 구현하는 방법에 대해서.
또한 왜 이런 사양과 구현이 되었는가에 대해서

Next.js App Router Update | Next.js

nextjs.org/blog/june-2023-update

Next.js article

Next.js 최신 동작에 대해.
App Router의 Stable화, 거대한 애프리케이션 성능 개선, 문서 개선.
React의 Server Side Component 대응과 Server Actions에 대해

슬라이드, 영상

2023-06-24 DOM 테스트를 점점 작성하고 싶어지는 Testing Library 세계로 초대 (#phpconfuk) - Google 슬라이드

docs.google.com/presentation/d/1j6sEAs0LF5jPXs_mHxvPreqK-lxEL3OxvQAFyXmxbZc/view#slide=id.g24bcedd6665_0_0

JavaScript testing slide

DOM 테스트 라이브러리 Testing Library 철학에 대해
DOM를 생성, 테스트 대상을 쿼리로 검색, assertion로 테스트한다.
쿼리에는 WAI-ARIA Role이나 라벨, Test Id등 지정하는 메서드가 있는가 우선도에 대해.

About Queries | Testing Library

The Cost Of JavaScript - 2023 - YouTube

www.youtube.com/watch?v=ZKH3DLT4BKw

JavaScript video performance

JavaScript 코스트에 대한 영상과 슬라이드.
JavaScript 다운로드, 실행 비용.
Code Splitting이나 Dynamic Import등 최적화.
Islands Architecture의 Partial Hydration, Qwik의 Resumalable Hydration, React의 Selective Hydation에 대해.