translate: 2024-10-29 article (#1237)

_i18n/ko/_posts/2024/2024-10-29-svelte-5-msw-v2.6.0websockets-api-state-of-css-2024.md

@@ -0,0 +1,203 @@
+---
+title: "2024-10-29: Svelte 5, MSW v2.6.0(WebSockets API), State of CSS 2024"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-10-29T14:06:46.298Z
+category: JSer
+tags:
+- React
+- Svelte
+- Unicode
+- Next.js
+- nodejs
+
+---
+
+JSer.info #713 - Svelte 5가 출시되었습니다.
+
+- [Svelte 5 is alive](https://svelte.dev/blog/svelte-5-is-alive)
+
+Svelte 5에는, [Runes](https://svelte.dev/docs/svelte/what-are-runes) 구문과 Reactive 구조 지원됩니다
+Svelte 4 구문은 지속해서 지원하지만, 이행가이드에는 Runes으로 이행 방법이 소개되어 있습니다.
+
+- [Svelte 5 migration guide • Docs • Svelte](https://svelte.dev/docs/svelte/v5-migration-guide)
+
+---
+
+MSW v2.6.0가 출시되었습니다.
+
+- [Release v2.6.0 · mswjs/msw](https://github.com/mswjs/msw/releases/tag/v2.6.0)
+
+MSW v2.6.0에는, WebSockets API 목이 지원됩니다.
+상세한 것은 다음 글을 참조하시길 바랍니다.
+
+- [Handling WebSocket events - Mock Service Worker](https://mswjs.io/docs/basics/handling-websocket-events)
+- [ws - Mock Service Worker](https://mswjs.io/docs/api/ws)
+
+---
+
+State of CSS 2024 결과가 공개되었습니다.
+
+- [State of CSS 2024](https://2024.stateofcss.com/en-US/)
+
+State of CSS 2024에는, CSS 언어 기능, 라이브러리와 프레임워크, 개발 타겟, 학습 자원 등 관련하여 앙케이트 결과가 정리되어 있습니다.
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Svelte 5 is alive
+[svelte.dev/blog/svelte-5-is-alive](https://svelte.dev/blog/svelte-5-is-alive "Svelte 5 is alive")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Svelte 5 출시.
+rune 지원, 이벤트 속성 전달 방법 변경, Slot 작성 방법 변경, 컴포넌트는 Class가 아니게 되서 `new` 할 수 없음
+
+- [Svelte 5 migration guide • Docs • Svelte](https://svelte.dev/docs/svelte/v5-migration-guide "Svelte 5 migration guide • Docs • Svelte")
+
+----
+
+## Release v5.0.0 · pmndrs/zustand
+[github.com/pmndrs/zustand/releases/tag/v5.0.0](https://github.com/pmndrs/zustand/releases/tag/v5.0.0 "Release v5.0.0 · pmndrs/zustand")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Zustand v5 출시.
+default export 삭제, deprecated 기능 삭제, ES5 지원 삭제, 무한 루프가 일어나는 케이스를 명시적으로 에러
+
+- [zustand/docs/migrations/migrating-to-v5.md at main · pmndrs/zustand](https://github.com/pmndrs/zustand/blob/main/docs/migrations/migrating-to-v5.md "zustand/docs/migrations/migrating-to-v5.md at main · pmndrs/zustand")
+
+----
+
+## Node.js — Node v23.1.0 (Current)
+[nodejs.org/en/blog/release/v23.1.0](https://nodejs.org/en/blog/release/v23.1.0 "Node.js — Node v23.1.0 (Current)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v23.1.0 출시.
+`Buffer`가 `ArrayBuffer`의 resize에 대응, `node:test`의 MockTimers를 Stable로
+
+
+----
+
+## WebStorm and Rider Are Now Free for Non-Commercial Use | The JetBrains Blog
+[blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/](https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/ "WebStorm and Rider Are Now Free for Non-Commercial Use | The JetBrains Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebStorm</span> <span class="jser-tag">editor</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">software</span></p>
+
+비상용이라면, WebStorm와 Rider가 무료로 이용 가능.
+
+
+----
+
+## Release pnpm 10.0 Alpha 0 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v10.0.0-alpha.0](https://github.com/pnpm/pnpm/releases/tag/v10.0.0-alpha.0 "Release pnpm 10.0 Alpha 0 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v10.0.0 alpha.0 출시.
+`pnpm link` 동작 변경, `packageManager` 참조하는 pnpm 버전 확인하도록, store 버전 업데이트
+
+
+----
+
+## Release Version 8.14.0 · acornjs/acorn
+[github.com/acornjs/acorn/releases/tag/8.14.0](https://github.com/acornjs/acorn/releases/tag/8.14.0 "Release Version 8.14.0 · acornjs/acorn")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+acorn 8.14.0 출시.
+ES2025 import attributes/RegExp modifiers 지원
+
+
+----
+
+## Release v3.0.0 · tinylibs/tinybench
+[github.com/tinylibs/tinybench/releases/tag/v3.0.0](https://github.com/tinylibs/tinybench/releases/tag/v3.0.0 "Release v3.0.0 · tinylibs/tinybench")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">benchmark</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+tinybench v3.0.0 출시.
+Node.js 16 지원 종료, `*Concurrently` 메서드 삭제, `warmup()` 메서드 삭제하고 `warmup` 옵션 추가
+
+
+----
+
+## Release v2.6.0 · mswjs/msw
+[github.com/mswjs/msw/releases/tag/v2.6.0](https://github.com/mswjs/msw/releases/tag/v2.6.0 "Release v2.6.0 · mswjs/msw")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">test</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+msw 2.6.0 출시.
+WebSocket API 목 지원
+
+
+----
+
+## WebKit Features in Safari 18.1 | WebKit
+[webkit.org/blog/16188/webkit-features-in-safari-18-1/](https://webkit.org/blog/16188/webkit-features-in-safari-18-1/ "WebKit Features in Safari 18.1 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari 18.1 출시.
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## The nuances of base64 encoding strings in JavaScript  |  Articles  |  web.dev
+[web.dev/articles/base64-encoding](https://web.dev/articles/base64-encoding "The nuances of base64 encoding strings in JavaScript  |  Articles  |  web.dev")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Unicode</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+이모지나 써로게이트 페어를 안전하게 다루는 Base64 엔코딩에 대하여.
+`btoa()`/`atob()`는 Unicode 다룰 때 문제가 있으므로 `TextEncoder`로 엔코드해서 다룸.
+`TextEncoder`은 단독 써로게이트를 갖는 문자열을 부정한 데이터로  � 으로 변경함으로, `isWellFormed()` 사용해 판정한다는 이야기
+
+
+----
+
+## Our Journey with Caching | Next.js
+[nextjs.org/blog/our-journey-with-caching](https://nextjs.org/blog/our-journey-with-caching "Our Journey with Caching | Next.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p>
+
+`"use cache"` directive 사용한 Next.js 새로운 캐시 구조에 대하여
+
+
+----
+
+## State of CSS 2024
+[2024.stateofcss.com/en-US/](https://2024.stateofcss.com/en-US/ "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 앙케이트 결과가 공개.
+CSS 언어 기능, 라이브러리나 프레임워크, 개발 타겟, 학습 자원에 대한 앙케이트
+
+
+----
+<h1 class="site-genre">웹사이트, 서비스, 문서</h1>
+
+----
+
+## Homepage » Jeasx - JSX with Ease
+[www.jeasx.dev/](https://www.jeasx.dev/ "Homepage » Jeasx - JSX with Ease")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">jsx</span> <span class="jser-tag">server</span> <span class="jser-tag">library</span></p>
+
+JSX 템플릿으로 이용해서 SSR 하는 프레임워크.
+비동기처리, 디렉토리 기반 라우팅, Static Assets 다루기 대응
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## One, a React Framework
+[onestack.dev/](https://onestack.dev/ "One, a React Framework")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">iOS</span> <span class="jser-tag">Android</span> <span class="jser-tag">library</span></p>
+
+웹과 네이티브 대응한 React 프레임워크.
+tamagui 팀이 개발
+
+
+----