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.

Sign up for GitHub

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: 2024-11-16 article #1241

Merged
merged 1 commit into from
Nov 17, 2024
Merged

translate: 2024-11-16 article #1241

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
187 changes: 187 additions & 0 deletions _i18n/ko/_posts/2024/2024-11-16-node-v23.2.0-storybook-8.4-i-html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
---
title: "2024-11-16: Node v23.2.0, Storybook 8.4, i-html"
author: "azu"
translator: rewrite0w0
layout: post
date: 2024-11-16T02:19:18.183Z
category: JSer
tags:
- safari
- TypeScript
- rspack
- WebAssembly
- Tools

---

JSer.info #715 - Node.js v23.2.0가 출시되었습니다.

- [Node.js — Node v23.2.0 (Current)](https://nodejs.org/en/blog/release/v23.2.0)

Node.js v23.2.0에서는 루트 증명서 갱신, TypeScript 지원 스테이터스를 Active development으로 등이 있습니다.
또한, `module.findPackageJSON`, `module.stripTypeScriptTypes` 같은 새로운 API가 추가되었습니다.

---

Storybook v8.4가 출시되었습니다.

- [Storybook 8.4](https://storybook.js.org/blog/storybook-8-4/)
- [storybook/CHANGELOG.md at next · storybookjs/storybook](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md#840)

UI에서 Vitest로 컴포넌트 테스트 실행에 대응, 패키지 크기 개선, Svelte 5 지원, React Native 개선, 태그 기반 파일링 대응도 있습니다.
패키지 크기 절감은, [e18e](https://e18e.dev/) 프로젝트와 협력으로 불필요한 패키지 삭제나 변환에 의함입니다.

---

i-html, Web Components 라이브러리가 공개되었습니다.

- [i-html, an inline-html import element](https://www.keithcirkel.co.uk/i-html/)

[htmx](https://htmx.org/)이나 [htmz](https://leanrada.com/htmz/)처럼 HTML 사용해 동적인 프래그먼트 로그를 실현 가능한 라이브러리입니다.
폼 target해서 `<i-html>` 요소를 붙이고, 폼을 submit한 결과를 `<i-html>` 대상으로 동적 로드합니다.

----

{% include inline-support.html %}

----

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

----

## Release Notes for Safari Technology Preview 207 | WebKit
[webkit.org/blog/16205/release-notes-for-safari-technology-preview-207/](https://webkit.org/blog/16205/release-notes-for-safari-technology-preview-207/ "Release Notes for Safari Technology Preview 207 | WebKit")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>

Safari Technology Preview 207 출시.
Cross-Origin-Opener-Policy의 `noopener-allow-popups` 지원, Compression Streams에서 Brotli 지원


----

## Announcing TypeScript 5.7 RC - TypeScript
[devblogs.microsoft.com/typescript/announcing-typescript-5-7-rc/](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-rc/ "Announcing TypeScript 5.7 RC - TypeScript")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>

TypeScript 5.7 RC 출시.
초기화되어 있지 않은 변수 체크, 상대 경로 `.ts`를 출력할 때 `.js`으로 변경해주는 `--rewriteRelativeImportExtensions` 플래그 추가.
`--target es2024` 지원, Node.js 22의 V8 Compile Cache 지원해 실행 속도 개선


----

## Announcing Rspack 1.1 - Rspack
[rspack.dev/blog/announcing-1-1](https://rspack.dev/blog/announcing-1-1 "Announcing Rspack 1.1 - Rspack")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p>

Rspack 1.1 출시
성능 개선, `experiments.incrementalRebuild` 옵션 추가, `HtmlRspackPlugin` 개선


----

## Node.js — Node v23.2.0 (Current)
[nodejs.org/en/blog/release/v23.2.0](https://nodejs.org/en/blog/release/v23.2.0 "Node.js — Node v23.2.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.2.0 출시.
루트 증명서 갱신, TypeScript 지원 스테이터스를 Active development으로 갱신. `module.findPackageJSON`, `module.stripTypeScriptTypes` 추가


----

## First Public Working Draft: Web Audio API 1.1 | 2024 | News | W3C
[www.w3.org/news/2024/first-public-working-draft-web-audio-api-1-1/](https://www.w3.org/news/2024/first-public-working-draft-web-audio-api-1-1/ "First Public Working Draft: Web Audio API 1.1 | 2024 | News | W3C")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">web </span> <span class="jser-tag">audio</span> <span class="jser-tag">spec</span> <span class="jser-tag">news</span></p>

Web Audio API 1.1의 Working Draft 공개


----

## Storybook 8.4
[storybook.js.org/blog/storybook-8-4/](https://storybook.js.org/blog/storybook-8-4/ "Storybook 8.4")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">storybook</span> <span class="jser-tag">ReleaseNote</span></p>

Storybook 8.4 출시.
UI에서 Vitest 컴포넌트 테스트 실행 대응, 패키지 크기 개선, Svelte 5 지원, React Native 개선, 태그 기반 파일링 대응

- [storybook/CHANGELOG.md at next · storybookjs/storybook](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md#840 "storybook/CHANGELOG.md at next · storybookjs/storybook")

----

## Release v2.13.0 · parcel-bundler/parcel
[github.com/parcel-bundler/parcel/releases/tag/v2.13.0](https://github.com/parcel-bundler/parcel/releases/tag/v2.13.0 "Release v2.13.0 · parcel-bundler/parcel")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">parcel</span> <span class="jser-tag">ReleaseNote</span></p>

Parcel v2.13.0 출시.
`@parcel/bundler-library` 추가, `.proxyrc.ts` 지원, resolver 성능 개선


----

## A better Next.js? • Nue 1.0 (RC) is out - Nue
[nuejs.org/blog/nue-release-candidate/](https://nuejs.org/blog/nue-release-candidate/ "A better Next.js? • Nue 1.0 (RC) is out - Nue")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>

정적 사이트 제네레이터 Nue 1.0 RC 출시.
Markdown 파서 재구현

- [Release v1.0.0-RC.1 · nuejs/nue](https://github.com/nuejs/nue/releases/tag/v1.0.0-RC.1 "Release v1.0.0-RC.1 · nuejs/nue")

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

----

## i-html, an inline-html import element
[www.keithcirkel.co.uk/i-html/](https://www.keithcirkel.co.uk/i-html/ "i-html, an inline-html import element")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">WebComponents</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>

htmx 같이 HTML으로 인터렉티브한 동작을 구현하거나, 외부 HTML 플래그멘트를 로드가능한 Custom Element 라이브러리


----

## Exploring the DOMPurify library: Bypasses and Fixes | mizu.re
[mizu.re/post/exploring-the-dompurify-library-bypasses-and-fixes](https://mizu.re/post/exploring-the-dompurify-library-bypasses-and-fixes "Exploring the DOMPurify library: Bypasses and Fixes | mizu.re")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">XSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">security</span> <span class="jser-tag">article</span></p>

DOM의 sanitizer 인 DOMPurify의 바이패스하는 기법에 대하여.
HTML 경로에 의한 사양이나 Fuzzing에서 어떻게 바이패스하는가


----

## How To Optimize Performance In Vue Apps | DebugBear
[www.debugbear.com/blog/optimize-vue-performance](https://www.debugbear.com/blog/optimize-vue-performance "How To Optimize Performance In Vue Apps | DebugBear")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>

Vue 애플리케이션 성긍에 대한 글.
Vue의 Directive에서의 DOM 갱신 최적화, 메모리 누수 회피, 이미지 최적화에 대하여


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

----

## drogus/jawsm: JavaScript to WASM compiler
[github.com/drogus/jawsm](https://github.com/drogus/jawsm "drogus/jawsm: JavaScript to WASM compiler")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">WebAssembly</span> <span class="jser-tag">Tools</span></p>

JavaScript를 WebAssembly으로 컴파일하는 도구


----

## React Query Builder
[react-querybuilder.js.org/](https://react-querybuilder.js.org/ "React Query Builder")
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">GUI</span></p>

복잡한 조건 설정하는 UI 제공하는 React 컴포넌트.
설정한 조건에서 SQL이나 JSON 형식으로 출력 가능


----