Fork me on GitHub

2023-12-15: Safari 17.2, Deno 1.39(WebGPU), SvelteKit 2

Translator: rewrite0w0 Edit on GitHub See Revisions

JSer.info #673 - Safari 17.2가 출시되었어요.

여러 변경이 있어요.

  • HTML, <detail name> 지원, <input autocomplete="one-time-code"> 지원
  • CSS, Nesting 규칙 완화, cap unit, rem()/mod()/round() 추가, mask-border 지원, Custom Highlight API 지원
  • JavaScript, Import attributes 지원

그 외, <link rel=preload>에서 imagesizes/imagesrcset 속성으로 responsive image 지원.
SVG 이미지, <image crossorigin>로 읽을 때 CORS 고려해서 다루도록 됨,
Fetch Priority 지원, HTML Form의 form.reportValidity() API 지원도 있어요.


Deno 1.39가 출시되었어요.

WebGPU API 재도입, deno coverage --html에서 HTML 커버리지 리포트 보이도록, deno compile 개선.
deno task에서 node_modules/.bin/으로 PATH 사용하도록, Object.prototype.__proto__를 유효화하는 --unstable-unsafe-proto 플래그 추가.
그 외, Jest의 expect 호환 std/expect 추가, 커맨드라인 인수 파싱하는 std/cli 추가.


SvelteKit 2가 출시되었어요.

load 함수에서 Promises 다룰 때 일관성 갖도록, paths.relative 기본값 true, dangerZone.trackServerFetches 삭제.

다음 커맨드 라인으로 이행 가능, 이행 가이드도 공개.

$ npx svelte-migrate sveltekit-2

To support JSer.info


헤드라인


ECMAScript proposal updates @ 2023-11 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update

ECMAScript proposal news

2023-11 TC39 미팅에서 ECMAScript Proposal 상태 변경 모음.
Array Grouping와 Promise.withResolvers가 Stage 4 되어서 ES2024에 포함.


WebKit Features in Safari 17.2 | WebKit

www.webkit.org/blog/14787/webkit-features-in-safari-17-2/

safari ReleaseNote

Safari 17.2 출시.
HTML, <detail name> 지원, <input autocomplete="one-time-code"> 지원.
CSS, Nesting 규칙 완화, cap unit, rem()/mod()/round() 추가, mask-border 지원, Custom Highlight API 지원.
JavaScriptでは, Import attributes 지원.
그 외, <link rel=preload>에서 imagesizes/imagesrcset 속성으로 responsive image 지원.
SVG 이미지를 <image crossorigin>에서 읽을 때 CORS 고려해서 다룸.
Fetch Priority 지원, HTML Form의 form.reportValidity() API 지원


Oxlint General Availability | The JavaScript Oxidation Compiler

oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html

ESLint JavaScript Rust ReleaseNote

Oxlint 공개.
ESLint와 같은 JavaScript, TypeScript Lint 도구.
좋은 성능 목표로 설계했으며, 여러 ESLint 규칙을 코어에 포함.


Deno 1.39: The Return of WebGPU

deno.com/blog/v1.39

deno ReleaseNote

Deno v1.39 출시.
WebGPU API 재도입, deno coverage --html에서 HTML 커버리지 리포트 보이도록, deno compile 개선.
deno task에서 node_modules/.bin/으로 PATH 사용하도록.
Object.prototype.__proto__ 유효화하는 --unstable-unsafe-proto 플래그 추가.
Jest의 expect 호환 std/expect 추가, 커맨드라인 인수 파싱하는 std/cli 추가


Announcing SvelteKit 2

svelte.dev/blog/sveltekit-2

Svelte ReleaseNote

SvelteKit 2 출시.
load 함수에서 Promises 일관성있게 다루도록, paths.relative 기본값 true로 변경, dangerZone.trackServerFetches 삭제


읽을거리


npm install --production 같은게 너무 많은 문제

zenn.dev/zawa_kyo/articles/d671e0935ae0c0

npm article

npm install --omit=dev이나 --production, --inculde 플래그 관련하여


Vite는 사용하지 않았지만 Jest를 Vitest로 이행하기

zenn.dev/sa2knight/articles/migrating_vitest_from_jest

JavaScript testing article

Jest에서 Vitest로 이행하는 방법에 대하여


Baseline's evolution on MDN | MDN Blog

developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/

article browser

주요 브라우저에서 지원되는가 알기 쉽게 보이는 Baseline에 대해.
MDN나 caniuse에서의 API 지원 현황 게시에 이용되고 있는 Baseline 정의에 대하여


Storybook for React Server Components

storybook.js.org/blog/storybook-react-server-components/

React debug article

Storybook의 React Server Components(RSC) 지원에 대하여.
RSC을 클라이언트 사이드에서 렌더링해서 대응 예정. Storybook 8의 α버전에서 이용 가능하도록.


【월간 9000만 PV의 PR TIMES】프레스 페이지를 Next.js 이행하며 한 것들 | PR TIMES 개발자 블로그

developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/

Next.js article

Next.js의 Pages Router로 이행, 캐시 처리는 CDN(Fastly)에 의존.


1년에 걸쳐 Next.js의 app router으로 완전 이행한 이야기

zenn.dev/urotea/articles/3fbaa77d77b788

Next.js GraphQL article

Next.js의 Pages Router에서 App Router으로의 이행에 대해.
이행 순서, App Router으로 이행 후 장단점.
Intercepting Routes에서의 dialog 관리, layout이나 에러 화면 관리, 캐시 문제에 관하여


잇큐 레스토랑을 Next.js App Router에서 Remix로 환승한 이야기 - 一休.com Developers Blog

user-first.ikyu.co.jp/entry/2023/12/15/093427

Next.js Remix article

Next.js의 App Router에서 Remix Run으로 이행한 이야기.
Next.js의 App Router에는 Cache-Control를 암묵적으로 변경할 수 없는 문제, Remix에는 Response를 자유롭게 변경 가능한 차이에 대해.


웹사이트, 서비스, 문서


BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.

github.com/BuilderIO/hydration-overlay

React debug library

React의 Hydration에서 mismatch 에러를 Diff로 보이도록 하는 라이브러리.
SSR와 CSR 렌더링 결과에 차이가 있는 경우 Hydration 에러의 디버그 이용 가능.


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


Onyx Programming Language

onyxlang.io/

WebAssembly program

WebAssembly으로 컴파일 가능한 언어


도서


구현으로 한큐에 풀스택 Web 개발 엔지니어 시야와 지식을 넓히는 핸즈온 | 주식회사 오픈톤

www.amazon.co.jp/dp/4798179337/

Next.js React python book

2023년 12월 18일 발매
Next.js와 Django에서 웹 개발 대한 도서.
샘플 애플리케이션을 통해 웹시스템 개발을 배우는 도서


Pull Request to this article
JSer.info Slackに参加する