Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translate: 20231215 article #1147

Merged
merged 1 commit into from
Dec 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Deno 1.39がリリースされました。
- [Deno 1.39: The Return of WebGPU](https://deno.com/blog/v1.39)

WebGPU APIを再導入、`deno coverage --html`でHTMLのカバレッジレポートを表示できるように、`deno compile`の改善が含まれています。
`deno taak`で`node_modules/.bin/`へのPATHを通すように、`Object.prototype.__proto__`を有効化する`--unstable-unsafe-proto`フラグが追加されています。
`deno task`で`node_modules/.bin/`へのPATHを通すように、`Object.prototype.__proto__`を有効化する`--unstable-unsafe-proto`フラグが追加されています。
その他には、Jestのexpect互換の`std/expect`を追加、コマンドライン引数のパースをする`std/cli`を追加などの変更も含まれています。

----
Expand Down Expand Up @@ -107,7 +107,7 @@ ESLintと同じようにJavaScriptやTypeScriptのLintをするツール。

Deno v1.39リリース。
WebGPU APIを再導入、`deno coverage --html`でHTMLのカバレッジレポートを表示できるように、`deno compile`の改善。
`deno taak`で`node_modules/.bin/`へのPATHを通すように。
`deno task`で`node_modules/.bin/`へのPATHを通すように。
`Object.prototype.__proto__`を有効化する`--unstable-unsafe-proto`フラグを追加。
Jestのexpect互換の`std/expect`を追加、コマンドライン引数のパースをする`std/cli`を追加など

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
---
title: "2023-12-15: Safari 17.2, Deno 1.39(WebGPU), SvelteKit 2"
author: "azu"
translator: rewrite0w0
layout: post
date: 2023-12-15T04:59:54.932Z
category: JSer
tags:
- Next.js
- React
- debug
- python
- book

---

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

- [WebKit Features in Safari 17.2 | WebKit](https://www.webkit.org/blog/14787/webkit-features-in-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가 출시되었어요.

- [Deno 1.39: The Return of WebGPU](https://deno.com/blog/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` 추가.

----

SvelteKit 2가 출시되었어요.

- [Announcing SvelteKit 2](https://svelte.dev/blog/sveltekit-2)

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

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

```
$ npx svelte-migrate sveltekit-2
```

- [Migrating to SvelteKit v2 • Docs • SvelteKit](https://kit.svelte.dev/docs/migrating-to-sveltekit-2)



----

{% include inline-support.html %}

----

<h1 class="site-genre">헤드라인</h1>

----

## ECMAScript proposal updates @ 2023-11 | ECMAScript Daily
[ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update "ECMAScript proposal updates @ 2023-11 | ECMAScript Daily")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span> <span class="jser-tag">news</span></p>

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/](https://www.webkit.org/blog/14787/webkit-features-in-safari-17-2/ "WebKit Features in Safari 17.2 | WebKit")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>

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](https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html "Oxlint General Availability | The JavaScript Oxidation Compiler")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Rust</span> <span class="jser-tag">ReleaseNote</span></p>

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


----

## Deno 1.39: The Return of WebGPU
[deno.com/blog/v1.39](https://deno.com/blog/v1.39 "Deno 1.39: The Return of WebGPU")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>

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](https://svelte.dev/blog/sveltekit-2 "Announcing SvelteKit 2")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">ReleaseNote</span></p>

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

- [Migrating to SvelteKit v2 • Docs • SvelteKit](https://kit.svelte.dev/docs/migrating-to-sveltekit-2 "Migrating to SvelteKit v2 • Docs • SvelteKit")
- [Release @sveltejs/[email protected] · sveltejs/kit](https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%402.0.0 "Release @sveltejs/[email protected] · sveltejs/kit")

----
<h1 class="site-genre">읽을거리</h1>

----

## npm install --production 같은게 너무 많은 문제
[zenn.dev/zawa\_kyo/articles/d671e0935ae0c0](https://zenn.dev/zawa_kyo/articles/d671e0935ae0c0 "npm install --production 같은게 너무 많은 문제")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">article</span></p>

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


----

## Vite는 사용하지 않았지만 Jest를 Vitest로 이행하기
[zenn.dev/sa2knight/articles/migrating\_vitest\_from\_jest](https://zenn.dev/sa2knight/articles/migrating_vitest_from_jest "Vite는 사용하지 않았지만 Jest를 Vitest로 이행하기")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">article</span></p>

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


----

## Baseline&#039;s evolution on MDN | MDN Blog
[developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/](https://developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/ "Baseline&#039;s evolution on MDN | MDN Blog")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">article</span> <span class="jser-tag">browser</span></p>

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

- [Baseline 2023  |  web.dev](https://web.dev/blog/baseline2023?hl=en "Baseline 2023  |  web.dev")

----

## Storybook for React Server Components
[storybook.js.org/blog/storybook-react-server-components/](https://storybook.js.org/blog/storybook-react-server-components/ "Storybook for React Server Components")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p>

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/](https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/ "【월간 9000만 PV의 PR TIMES】프레스 페이지를 Next.js 이행하며 한 것들 | PR TIMES 개발자 블로그")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p>

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

----

## 1년에 걸쳐 Next.js의 app router으로 완전 이행한 이야기
[zenn.dev/urotea/articles/3fbaa77d77b788](https://zenn.dev/urotea/articles/3fbaa77d77b788 "1년에 걸쳐 Next.js의 app router으로 완전 이행한 이야기")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">GraphQL</span> <span class="jser-tag">article</span></p>

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](https://user-first.ikyu.co.jp/entry/2023/12/15/093427 "잇큐 레스토랑을 Next.js App Router에서 Remix로 환승한 이야기 - 一休.com Developers Blog")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">Remix</span> <span class="jser-tag">article</span></p>

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


----
<h1 class="site-genre">웹사이트, 서비스, 문서</h1>

----

## BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.
[github.com/BuilderIO/hydration-overlay](https://github.com/BuilderIO/hydration-overlay "BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">debug</span> <span class="jser-tag">library</span></p>

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

- [Announcing React Hydration Overlay - Easily Squash Hydration Errors](https://www.builder.io/blog/announcing-react-hydration-overlay "Announcing React Hydration Overlay - Easily Squash Hydration Errors")

----
<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>

----

## Onyx Programming Language
[onyxlang.io/](https://onyxlang.io/ "Onyx Programming Language")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">program</span></p>

WebAssembly으로 컴파일 가능한 언어

- [Onyx, a new programming language powered by WebAssembly](https://wasmer.io/posts/onyxlang-powered-by-wasmer "Onyx, a new programming language powered by WebAssembly")

----
<h1 class="site-genre">도서</h1>

----

## 구현으로 한큐에 풀스택 Web 개발 엔지니어 시야와 지식을 넓히는 핸즈온 | 주식회사 오픈톤
[www.amazon.co.jp/dp/4798179337/](https://www.amazon.co.jp/dp/4798179337/ "구현으로 한큐에 풀스택 Web 개발 엔지니어 시야와 지식을 넓히는 핸즈온 | 주식회사 오픈톤")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">React</span> <span class="jser-tag">python</span> <span class="jser-tag">book</span></p>

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


----
Loading