translate: 2024-09-01 article (#1219)

jser · Sep 3, 2024 · b5f4f5b · b5f4f5b
1 parent d0e5d53
commit b5f4f5b
Show file tree

Hide file tree

Showing 2 changed files with 250 additions and 1 deletion.
diff --git a/...osts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md b/...osts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md
@@ -29,7 +29,7 @@ Safari Technology Preview 202がリリースされました。
 
 CSSの`background-clip: border-area`/`ruby-align`、`shape()` function/`@page`で`jis-b4`と`jis-b5`のサポートなどが追加されています。
 また、ECMAScript Proposal Stage 3のFloat16Arrayの実装、`WebAssembly.{Memory/Table}.prototype.type()`の実装も行われています。
-WebAsseblyでは、Wasm GC/Wasm Tail Callsのサポート、JITなしでWebAssemblyを実行できるようになる変更も含まれています。
+WebAssemblyでは、Wasm GC/Wasm Tail Callsのサポート、JITなしでWebAssemblyを実行できるようになる変更も含まれています。
 
 ---
 

diff --git a/...osts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md b/...osts/2024/2024-09-01-rspack-1.0-safari-technology-preview-202-material-ui-v6.md
@@ -0,0 +1,249 @@
+---
+title: "2024-09-01: Rspack 1.0, Safari Technology Preview 202, Material UI v6"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-09-01T05:25:04.712Z
+category: JSer
+tags:
+- webpack
+- css 
+- React
+- security
+- Next.js
+
+---
+
+JSer.info #705 - webpack와 호환성을 있으면서 Rust로 작성한 bundler, Rspack 1.0가 출시되었어요.
+
+- [Announcing Rspack 1.0 - Rspack](https://rspack.dev/blog/announcing-1-0)
+
+0.7에서 파괴적 변경이 몇 있어, 이행 가이드도 공개되어있어요.
+
+- [Migrating from Rspack 0.x - Rspack](https://rspack.dev/guide/migration/rspack_0.x)
+
+---
+
+Safari Technology Preview 202가 출시되었어요.
+
+- [Release Notes for Safari Technology Preview 202](https://webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/)
+
+CSS `background-clip: border-area`/`ruby-align`, `shape()` function/`@page`에서 `jis-b4`와 `jis-b5` 지원이 추가되었어요.
+또한, ECMAScript Proposal Stage 3의 Float16Array 구현, `WebAssembly.{Memory/Table}.prototype.type()` 구현도 있어요.
+WebAssembly에서, Wasm GC/Wasm Tail Calls 지원, JIT 없이 WebAssembly 실행 가능하게 한 변경도 있어요.
+
+---
+
+Material UI v6가 출시되었어요.
+
+- [Material UI v6 is out now 🎉 - MUI](https://mui.com/blog/material-ui-v6-is-out/)
+
+CSS theme variables 추가, Color schemes에서 Light/Dark mode 전환, Container queries 지원가 추가되었어요.
+[Pigment CSS](https://github.com/mui/pigment-css)로 Zero Runtime Styling 구조를 opt-in 도입, React 19 대응도 있어요.
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Chrome 129 beta  |  Blog  |  Chrome for Developers
+[developer.chrome.com/blog/chrome-129-beta?hl&#x3D;en](https://developer.chrome.com/blog/chrome-129-beta?hl=en "Chrome 129 beta  |  Blog  |  Chrome for Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Chrome 129 beta 출시.
+CSS `interpolate-size` 프로퍼티와 `calc-size()` 지원, `Intl.DurationFormat` 지원, `scheduler.yield()` 지원.
+Origin Traial로 File System Observer API 추가, `0.0.0.0` 이용한 Private Network Access를 Deprecate으로
+
+
+----
+
+## Release Version 25.0.0 · jsdom/jsdom
+[github.com/jsdom/jsdom/releases/tag/25.0.0](https://github.com/jsdom/jsdom/releases/tag/25.0.0 "Release Version 25.0.0 · jsdom/jsdom")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">ReleaseNote</span></p>
+
+jsdom 25.0.0 출시.
+`EventTarget.prototype` 참조처를 jsdom 내 `Object.prototype`에 변경.
+
+
+----
+
+## Announcing Rspack 1.0 - Rspack
+[rspack.dev/blog/announcing-1-0](https://rspack.dev/blog/announcing-1-0 "Announcing Rspack 1.0 - Rspack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">webpack</span></p>
+
+webpack와 호환성 있으면서 Rust로 작성한 bundler, Rspack 1.0 출시.
+
+- [Migrating from Rspack 0.x - Rspack](https://rspack.dev/guide/migration/rspack_0.x "Migrating from Rspack 0.x - Rspack")
+
+----
+
+## Release 5.19.0 · prisma/prisma
+[github.com/prisma/prisma/releases/tag/5.19.0](https://github.com/prisma/prisma/releases/tag/5.19.0 "Release 5.19.0 · prisma/prisma")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">prisma</span> <span class="jser-tag">MySQL</span></p>
+
+Prisma 5.19.0 출시.
+TypedSQL 도입
+
+
+----
+
+## Release v2.0.0 · pmndrs/valtio
+[github.com/pmndrs/valtio/releases/tag/v2.0.0](https://github.com/pmndrs/valtio/releases/tag/v2.0.0 "Release v2.0.0 · pmndrs/valtio")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Valito 2.0.0 출시.
+React 19에서 `use` hook이 도입됨에 따라, Promise 다루는 방법 변경
+
+- [valtio/docs/guides/migrating-to-v2.mdx at main · pmndrs/valtio](https://github.com/pmndrs/valtio/blob/main/docs/guides/migrating-to-v2.mdx "valtio/docs/guides/migrating-to-v2.mdx at main · pmndrs/valtio")
+
+----
+
+## Release Notes for Safari Technology Preview 202 | WebKit
+[webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/](https://webkit.org/blog/15798/release-notes-for-safari-technology-preview-202/ "Release Notes for Safari Technology Preview 202 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari Technology Preview 202 출시.
+CSS `background-clip: border-area`/`ruby-align`, `shape()` function/`@page`에서 `jis-b4`와 `jis-b5` 지원.
+ES Proposal Stage 3의 Float16Array 구현, `WebAssembly.{Memory/Table}.prototype.type()` 구현.
+Wasm GC/Wasm Tail Calls 지원, JIT업싱 WebAssembly 실행 가능해짐
+
+
+----
+
+## Svelte has a potential mXSS vulnerability due to improper HTML escaping · CVE-2024-45047 · GitHub Advisory Database
+[github.com/advisories/GHSA-8266-84wp-wv5c](https://github.com/advisories/GHSA-8266-84wp-wv5c "Svelte has a potential mXSS vulnerability due to improper HTML escaping · CVE-2024-45047 · GitHub Advisory Database")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">security</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">XSS</span></p>
+
+Svelte `<noscript>`안에 요소 속성치에 유저 입력이 있을 때 발생하던 XSS 수정.
+Svelte 4.2.19에서 수정.
+
+- [Release [email protected] · sveltejs/svelte](https://github.com/sveltejs/svelte/releases/tag/svelte%404.2.19 "Release [email protected] · sveltejs/svelte")
+
+----
+
+## Material UI v6 is out now 🎉 - MUI
+[mui.com/blog/material-ui-v6-is-out/](https://mui.com/blog/material-ui-v6-is-out/ "Material UI v6 is out now 🎉 - MUI")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Material UI v6 출시.
+CSS theme variables 추가, Color schemes에서 Light/Dark mode 전환, Container queries 지원.
+Pigment CSS로 Zero Runtime Styling 구조를 opt-in으로 도입, React 19 대응
+
+
+----
+
+## DOM Clobbering Gadget found in Webpack&#039;s AutoPublicPathRuntimeModule that leads to XSS · Advisory · webpack/webpack
+[github.com/webpack/webpack/security/advisories/GHSA-4vvj-4cpr-p986](https://github.com/webpack/webpack/security/advisories/GHSA-4vvj-4cpr-p986 "DOM Clobbering Gadget found in Webpack&#039;s AutoPublicPathRuntimeModule that leads to XSS · Advisory · webpack/webpack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">webpack</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">security</span></p>
+
+webpack 보안 출시.
+유저가 임의 속성 포함한 `<img>` 태그가 있을 경우, webpack의 `publicPath: 'auto'`가 유효한 bundle 읽을 때 XSS 발생하는 문제.
+webpack 5.94.0에서 수정.
+
+- [Release v5.94.0 · webpack/webpack](https://github.com/webpack/webpack/releases/tag/v5.94.0 "Release v5.94.0 · webpack/webpack")
+- [security: fix DOM clobbering in auto public path by alexander-akait · Pull Request #18700 · webpack/webpack](https://github.com/webpack/webpack/pull/18700 "security: fix DOM clobbering in auto public path by alexander-akait · Pull Request #18700 · webpack/webpack")
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## State of CSS 2024
+[survey.devographics.com/en-US/survey/state-of-css/2024](https://survey.devographics.com/en-US/survey/state-of-css/2024 "State of CSS 2024")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">Survey</span></p>
+
+State of CSS 2024 개발자 앙케이트 접수 시작
+
+
+----
+
+## monorepo내 패키지 버전을 하나로 통일 하는 One Version Rule를 pnpm catalog으로 구현하기 - newmo 기술 블로그
+[tech.newmo.me/entry/one-version-rule-built-on-pnpm-catalog](https://tech.newmo.me/entry/one-version-rule-built-on-pnpm-catalog "monorepo내 패키지 버전을 하나로 통일 하는 One Version Rule를 pnpm catalog으로 구현하기 - newmo 기술 블로그")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">pnpm</span> <span class="jser-tag">monorepo</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+pnpm catalog 사용해, monorepo 내에 의존 라이브러 버전을 하나로 하는 방법에 대하여.
+pnpm 9.5 도입 된 catalog 사용해 의존하는 패키지 목록 관리, `.pnpmfile.cjs`의 hooks 사용해 catalog에서 관리되지 않은 의존을 에러로 처리.
+
+
+----
+
+## 점프 TOON Next.js App Router 활용〜얻은 은혜와 과제〜 | CyberAgent Developers Blog
+[developers.cyberagent.co.jp/blog/archives/49429/](https://developers.cyberagent.co.jp/blog/archives/49429/ "점프 TOON Next.js App Router 활용〜얻은 은혜와 과제〜 | CyberAgent Developers Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p>
+
+Next.js App Router와 Server Components/Server Actions 사용한 개발과 주의점에 대하여
+
+
+----
+
+## Common misconceptions about how to optimize LCP  |  Blog  |  web.dev
+[web.dev/blog/common-misconceptions-lcp?hl&#x3D;en](https://web.dev/blog/common-misconceptions-lcp?hl=en "Common misconceptions about how to optimize LCP  |  Blog  |  web.dev")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+Largest Contentful Paint (LCP) 최적화 관련한 오해.
+이미지 용량 최적화, p75 타일의 LCP 10% 미만에 영향을 있는 경우가 많음, TTFB나 리소스 로딩 우선도 문제가 LCP에 강한 영향을 주는 경우에 대하여
+
+
+----
+<h1 class="site-genre">슬라이드, 영상</h1>
+
+----
+
+## 프론트엔드 컨퍼런스 홋카이도 2024 공개 자료・X 계정 링크 모음
+[zenn.dev/yumemi\_inc/articles/2024-08-25-frontend-conf-hokkaido-2024](https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024 "프론트엔드 컨퍼런스 홋카이도 2024 공개 자료・X 계정 링크 모음")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Conference</span> <span class="jser-tag">slide</span></p>
+
+프론트엔드 컨퍼런스 홋카이도 2024 슬라이드 모음
+
+- [프론트엔드 컨퍼런스 홋카이도 2024](https://www.frontend-conf.jp/ "프론트엔드 컨퍼런스 홋카이도 2024")
+
+----
+
+## bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
+[github.com/bramus/style-observer](https://github.com/bramus/style-observer "bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+Mutation Observer로 스타일 변환 감시하는 라이브러리.
+짧은 transition과 `transition-behavior: allow-discrete;` 사용해서, `transitionstart` 이벤트를 발견해 변화 감지
+
+- [Introducing @bramus/style-observer, a MutationObserver for CSS – Bram.us](https://www.bram.us/2024/08/31/introducing-bramus-style-observer-a-mutationobserver-for-css/ "Introducing @bramus/style-observer, a MutationObserver for CSS – Bram.us")
+
+----
+<h1 class="site-genre">웹사이트, 서비스, 문서</h1>
+
+----
+
+## vue-email/vue-email: 💌 Write email templates with vue
+[github.com/vue-email/vue-email?tab&#x3D;readme-ov-file](https://github.com/vue-email/vue-email?tab=readme-ov-file "vue-email/vue-email: 💌 Write email templates with vue")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">mail</span></p>
+
+Vue로 메일 컨텐츠 다루는 라이브러리
+
+
+----
+
+## hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser
+[github.com/hoppergee/heic-to?tab&#x3D;readme-ov-file](https://github.com/hoppergee/heic-to?tab=readme-ov-file "hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">Image</span> <span class="jser-tag">library</span></p>
+
+libheif를 사용해 HEIC/HEIF 이미지를 JPEG/PNG로 변환하는 라이브러리
+
+
+----
+<h1 class="site-genre">도서</h1>
+
+----
+
+## Next.js의 사고방식
+[zenn.dev/akfm/books/nextjs-basic-principle](https://zenn.dev/akfm/books/nextjs-basic-principle "Next.js의 사고방식")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">book</span></p>
+
+Next.js의 Server Component에 관하여
+
+
+----