translate: 2024-11-07 article (#1239)

_i18n/ja/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md

@@ -1,5 +1,5 @@
 ---
-title: "2024-11-07のJS: Node v22.11.0 (LTS)、Nuxt 3.14、vlt Package Manager、"
+title: "2024-11-07のJS: Node v22.11.0 (LTS)、Nuxt 3.14、vlt Package Manager"
 author: "azu"
 layout: post
 date: 2024-11-07T01:43:14.610Z

_i18n/ko/_posts/2024/2024-11-07-node-v22.11.0-lts-nuxt-3.14-vlt-package-manager-.md

@@ -0,0 +1,197 @@
+---
+title: "2024-11-07: Node v22.11.0 (LTS), Nuxt 3.14, vlt Package Manager"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-11-07T01:43:14.610Z
+category: JSer
+tags:
+- css 
+- nodejs
+- Extension
+- npm
+- security
+
+---
+
+JSer.info #714 - Node.js v22.11.0가 출시되었습니다.
+
+- [Node.js — Node v22.11.0 (LTS)](https://nodejs.org/en/blog/release/v22.11.0)
+
+Node.js v22.11.0은, Node.js v22.x의 LTS(Long Term Support) 출시입니다.
+Node.js v22.x은, 2027-04-30까지 지원이 예정되어 있습니다.
+
+- [nodejs/Release: Node.js Release Working Group](https://github.com/nodejs/release#release-schedule)
+
+----
+
+Nuxt.js v3.14가 출시되었습니다.
+
+- [Nuxt 3.14 · Nuxt Blog](https://nuxt.com/blog/v3-14)
+
+
+클라이언트와 서버에서 공유하는 코드를 두는 `shared/` 폴더 추가, `rspack` 대응.
+`useResponseHeader`와 `useRuntimeHook` 추가가 있습니다.
+또한, v4에서 변경을 opt-in할 수 있는 `compatibilityVersion: 4` 추가도 있습니다.
+
+----
+
+npm 호환 패키지 매니저 `vlt`와, npm registry 호환 서버리스 레지스트리 `vsr`가 출시되었습니다.
+
+- [Introducing the vlt Package Manager & Serverless Registry](https://blog.vlt.sh/blog/introducing-vlt-and-vsr)
+
+`vlt`은, `npm` 명령어처럼 패키지 설치나 script 실행이 가능한 패키지 매니저입니다.
+특징으로는 [vlt query](https://docs.vlt.sh/cli/commands/query/) 같이 쿼리 검색과 그 결과를 Mermaid나 GUI로 표기 기능이 있습니다. (쿼리 자체는 [npm-query](https://docs.npmjs.com/cli/v10/commands/npm-query)도 닮은 구조입니다)
+또한, [vlt gui](https://docs.vlt.sh/cli/commands/gui) 명령어로 GUI 실행, 프로젝트 의존 관계를 확인 하는 기능이 있습니다.
+
+`vsr`은, npm registry 호환 서버리스 레지스트리입니다.
+이건 [Fair Source](https://fair.io/)로, Functional Source License으로 공개되었으며, 셀프 호스팅 가능합니다. 호스팅은 Cloudflare Workers로 이용 가능하도록 제공됩니다.
+또한, npm이나 GitHub처럼, 권한이 세세하게 Granular Access Tokens 발행할 수 있는 구조입니다.
+
+다음 페이지에, `vsr`/`verdaccio`/`jsr` 비교 글이 있습니다.
+
+- <https://github.com/vltpkg/vsr#comparisons>
+
+vlt 로드맵은 공개되어 있지 않지만, vlt은 npm, inc의 founder인 Isaac이나 본래 npm 개발자들이 개발하고 있습니다.
+vlt 만든 동기 중 하나로, npm registry 문제가 있기에, vsr 호스팅 서비스 개발에 힘을 넣고 있다합니다.
+
+- [The massive bug at the heart of the npm ecosystem](https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem)
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Node.js — Node v22.11.0 (LTS)
+[nodejs.org/en/blog/release/v22.11.0](https://nodejs.org/en/blog/release/v22.11.0 "Node.js — Node v22.11.0 (LTS)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.11.0 출시.
+Node.js 22.x가 LTS가 되어, 2027년 4월까지 관리됨.
+
+
+----
+
+## Nuxt 3.14 · Nuxt Blog
+[nuxt.com/blog/v3-14](https://nuxt.com/blog/v3-14 "Nuxt 3.14 · Nuxt Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Nuxt</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Nuxt v3.14 출시.
+`jiti` 업데이트, 클라이언트와 서버에서 공유하는 코드를 두는 `shared/` 폴더 추가, `rspack` 대응.
+`useResponseHeader`와 `useRuntimeHook` 추가.
+v4의 변경을 opt-in 가능한 `compatibilityVersion: 4` 추가
+
+
+----
+
+## Release v5.0.0 · immutable-js/immutable-js
+[github.com/immutable-js/immutable-js/releases/tag/v5.0.0](https://github.com/immutable-js/immutable-js/releases/tag/v5.0.0 "Release v5.0.0 · immutable-js/immutable-js")
+<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>
+
+imutable-js v5.0.0 출시.
+비권장 메서드 삭제, default export 삭제, TypeScript 자료형 정의 개선
+
+
+----
+
+## mylesmmurphy/prettify-ts: Prettify TypeScript: Better Type Previews
+[github.com/mylesmmurphy/prettify-ts](https://github.com/mylesmmurphy/prettify-ts "mylesmmurphy/prettify-ts: Prettify TypeScript: Better Type Previews")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">VSCode</span> <span class="jser-tag">Extension</span></p>
+
+TypeScript 자료형 정보를 읽기 쉽게 펼쳐서 보여주는 VSCode 확장
+
+- [TypeScript 자료형 펼쳐서 호버로 보여주는  VSCode 확장「Prettify TypeScript」가 편리](https://zenn.dev/atamaplus/articles/0ecd883bcc9edd "TypeScript 자료형 펼쳐서 호버로 보여주는  VSCode 확장「Prettify TypeScript」가 편리")
+
+----
+
+## happy-dom allows for server side code to be executed by a &lt;script&gt; tag · CVE-2024-51757 · GitHub Advisory Database
+[github.com/advisories/GHSA-96g7-g7g9-jxw8](https://github.com/advisories/GHSA-96g7-g7g9-jxw8 "happy-dom allows for server side code to be executed by a &lt;script&gt; tag · CVE-2024-51757 · GitHub Advisory Database")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">security</span></p>
+
+happy-dom의 SSRF 보안 수정.
+`<script>`의 `src` 속성에 써있는 코드를 실행 가능하도록 하는 문제 수정.
+happy-dom v15.10.2에서 수정 됨.
+
+- [Release v15.10.2 · capricorn86/happy-dom](https://github.com/capricorn86/happy-dom/releases/tag/v15.10.2 "Release v15.10.2 · capricorn86/happy-dom")
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli
+[piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/](https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/ "Making content-aware components using CSS :has(), grid, and quantity queries - Piccalilli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">article</span></p>
+
+Quantity Queries나 Container Queries 사용해서 요소 갯수나 폭 Grid Layout 변경하는 테크닉에 대하여.
+
+
+----
+
+## Re-implementing JavaScript&#039;s == in JavaScript
+[evanhahn.com/re-implementing-javascript-double-equals-in-javascript/](https://evanhahn.com/re-implementing-javascript-double-equals-in-javascript/ "Re-implementing JavaScript&#039;s == in JavaScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+`==` 를 JavaScript에서 구현하는 이야기.
+`==` 가 어떻게 변환이나 비비교를 하는지 사양의 Step마다 구현, 그 알고리즘을 보는 글
+
+
+----
+
+## CSS sprite sheet animations · leanrada.com
+[leanrada.com/notes/css-sprite-sheets/](https://leanrada.com/notes/css-sprite-sheets/ "CSS sprite sheet animations · leanrada.com")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">animation</span> <span class="jser-tag">article</span></p>
+
+CSS sprite으로 하는 애니메이션에 대하여.
+APNG나 SVG 애니메이션과 비교해 장단점, CSS sprite에서 애니메이션 구현 방법에 대하여
+
+
+----
+
+## Introducing the vlt Package Manager &amp; Serverless Registry
+[blog.vlt.sh/blog/introducing-vlt-and-vsr](https://blog.vlt.sh/blog/introducing-vlt-and-vsr "Introducing the vlt Package Manager &amp; Serverless Registry")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">article</span></p>
+
+npm 호환성 있는 패키지 매니저 vlt와 npm registry 호환되는 vsr 공개.
+
+
+----
+<h1 class="site-genre">슬라이드, 영상</h1>
+
+----
+
+## Next.js App Router 보안 - Speaker Deck
+[speakerdeck.com/zaru\_sakuraba/nextjssekiyuritei](https://speakerdeck.com/zaru_sakuraba/nextjssekiyuritei "Next.js App Router 보안 - Speaker Deck")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">security</span> <span class="jser-tag">slide</span></p>
+
+Next.js의 Server Action 보안에 관한 슬라이드.
+`"use server";`으로 의도치 않게 서버 함수를 함수하는 경우, Server Component에서 Client에 데이터를 통째로 Props로 전달하는 경우에 대하여.
+
+
+----
+<h1 class="site-genre">웹사이트, 서비스, 문서</h1>
+
+----
+
+## astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome &amp; firefox
+[github.com/astahmer/atomic-css-devtools](https://github.com/astahmer/atomic-css-devtools "astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome &amp; firefox")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">css </span> <span class="jser-tag">debug</span> <span class="jser-tag">browser</span> <span class="jser-tag">Extension</span></p>
+
+Atomic CSS 스타일을 정리해 패널을 제공함으로, Atomic CSS 디버그가 쉬워지는 브라우저 확장
+
+
+----
+
+## NPM Chart
+[npm.chart.dev/](https://npm.chart.dev/ "NPM Chart")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">webservice</span></p>
+
+npm 패키지 설치 수의 그래프를 생성하는 서비스
+
+
+----