translate: 2024-09-09 article (#1221)

Author: rewrite0w0

_i18n/ko/_posts/2024/2024-09-09-vue-3.5-jsprimer-v6-a11y-visualizer.md

@@ -0,0 +1,195 @@
+---
+title: "2024-09-09: Vue 3.5, jsprimer v6, a11y-visualizer"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2024-09-09T00:48:44.816Z
+category: JSer
+tags:
+- nodejs
+- Firefox
+- ECMAScript
+- book
+- Vue
+
+---
+
+JSer.info #706 - Vue 3.5가 출시되었어요.
+
+- [Announcing Vue 3.5 | The Vue Point](https://blog.vuejs.org/posts/vue-3-5)
+
+퍼포먼스 개선, `defineProps` 반환 값을 Destructure 가능해요.
+또한, `useId()` 추가, `data-allow-mismatch` 속성 추가, `defineCustomElement()` API 추가해 Custom Element 개선, `useTemplateRef()`, `onWatcherCleanup()` 추가도 있어요.
+
+----
+
+JavaScript 입문서 [jsprimer](https://jsprimer.net/) v6.0.0가 출시되었어요.
+
+- [JavaScript Primer v6.0.0 출시: ES2024 대응과 Node.js 유스케이스 업데이트 | Web Scratch](https://efcl.info/2024/09/02/jsprimer-v6/)
+
+ES2024 대응과 Node.js 유스케이스 페이지가 업데이트되었어요.
+ECMAScript 관련해 `Map.groupBy`/`Object.groupBy`, ECMAScript Proposal Stage 2.7 대응이 있어요.
+그리고, Node.js에는 표준 모듈로 추가된 `node:util`의 `parseArgs`, `node:test` 관련한 변경도 있어요.
+
+----
+
+[Accessibility Visualizer Browser Extension](https://github.com/ymrl/a11y-visualizer) 웹 접근성 디버깅 보조하는 브라우저 확장 기능이 공개되었어요.
+
+- [ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking](https://github.com/ymrl/a11y-visualizer)
+- [HTML 직접 읽지 않거나, 스크린 리더 사용하지 않고도, 접근성 향상시킬 수는 없을까（라는 생각으로 브라우저 확장 기능을 만드는 중）](https://zenn.dev/ymrl/articles/761efe95091798)
+
+a11y-visualizer은, 이미지 alt나 구획 제목 레벨을 시각화해서, 접근성 문제를 발견하기 쉽도록 했어요.
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## JavaScript Primer v6.0.0 출시: ES2024 대응과 Node.js 유스케이스 업데이트 | Web Scratch
+[efcl.info/2024/09/02/jsprimer-v6/](https://efcl.info/2024/09/02/jsprimer-v6/ "JavaScript Primer v6.0.0 출시: ES2024 대응과 Node.js 유스케이스 업데이트 | Web Scratch")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">book</span></p>
+
+JavaScript Primer v6 출시.
+ECMAScript 2024 대응과 Node.js 표준 모듈 추가에 대응한 업데이트.
+`Map.groupBy`/`Object.groupBy`, ECMAScript Proposal Stage 2.7, `node:util`의 `parseArgs`, `node:test` 대응
+
+
+----
+
+## Release v9.0.0 · faker-js/faker
+[github.com/faker-js/faker/releases/tag/v9.0.0](https://github.com/faker-js/faker/releases/tag/v9.0.0 "Release v9.0.0 · faker-js/faker")
+<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>
+
+Node.js Faker v9.0.0 출시.
+Node.js 14,16 지원 종료, locale 째로 import 가능, RNG의 seed 다루기 변경, 비권장 API 삭제
+
+- [Upgrading to v9 | Faker](https://v9.fakerjs.dev/guide/upgrading.html "Upgrading to v9 | Faker")
+
+----
+
+## Node.js — Node v22.8.0 (Current)
+[nodejs.org/en/blog/release/v22.8.0](https://nodejs.org/en/blog/release/v22.8.0 "Node.js — Node v22.8.0 (Current)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.8.0 출시.
+`module.enableCompileCache()` API 추가, `vm.createContext()`에 `vm.constants.DONT_CONTEXTIFY` 추가.
+커버리지가 특정 임계값 충족하도록 요구하는 기능 `--experimental-test-coverage` 플래그 추가
+
+
+----
+
+## Announcing Vue 3.5 | The Vue Point
+[blog.vuejs.org/posts/vue-3-5](https://blog.vuejs.org/posts/vue-3-5 "Announcing Vue 3.5 | The Vue Point")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vue 3.5 출시.
+퍼포먼스 개선, `defineProps` 반환값을 Destructure 가능, `useId()` 추가, `data-allow-mismatch` 속성 추가.
+`defineCustomElement()` API 추가해 Custom Element 대응 개선, `useTemplateRef()`, `onWatcherCleanup()` 추가
+
+
+----
+
+## Firefox 130.0, See All New Features, Updates and Fixes
+[www.mozilla.org/en-US/firefox/130.0/releasenotes/](https://www.mozilla.org/en-US/firefox/130.0/releasenotes/ "Firefox 130.0, See All New Features, Updates and Fixes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Firefox 130 출시.
+`<details name>` 대응, X25519 digital signature algorithm 지원, Web Codecs API  지원.
+실험적 기능으로 `requestVideoFrameCallback()`, `ReportingObserver`에서 CSP 위반 감시 가능함
+
+- [Firefox 130 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130 "Firefox 130 for developers - Mozilla | MDN")
+
+----
+
+## Release v1.47.0 · microsoft/playwright
+[github.com/microsoft/playwright/releases/tag/v1.47.0](https://github.com/microsoft/playwright/releases/tag/v1.47.0 "Release v1.47.0 · microsoft/playwright")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">ReleaseNote</span></p>
+
+playwright v1.47.0 출시.
+Network Tab 개선, `--tsconfig` 플래그 추가, Playwright Image를 Ubuntu 24.04 기반으로 변경
+
+
+----
+
+## ESLint v9.10.0 released - ESLint - Pluggable JavaScript Linter
+[eslint.org/blog/2024/09/eslint-v9.10.0-released/](https://eslint.org/blog/2024/09/eslint-v9.10.0-released/ "ESLint v9.10.0 released - ESLint - Pluggable JavaScript Linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
+
+ESLint v9.10.0 출시.
+`eslint` 패키지에 `@types/eslint`와 같은 자료형 정의 파일 포함하도록 변경
+
+
+----
+
+## Bun v1.1.27 | Bun Blog
+[bun.sh/blog/bun-v1.1.27](https://bun.sh/blog/bun-v1.1.27 "Bun v1.1.27 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">bum</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v1.1.27 출시.
+`node:zlib` 퍼포먼스 개선, `npm pack` 같은 처리하는 `bun pm pack` 명령어 추가.
+`Bun.serve()`에 Static routes 추가, `--max-http-header-size` 플래그 추가
+
+
+----
+
+## Release v8.0.0 · redwoodjs/redwood
+[github.com/redwoodjs/redwood/releases/tag/v8.0.0](https://github.com/redwoodjs/redwood/releases/tag/v8.0.0 "Release v8.0.0 · redwoodjs/redwood")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Redwood v8.0.0 출시.
+Background Job 대응, SSR와 RSC 대응 개선, Storybook에 Vite 사용 가능, Docker 지원
+
+- [Upgrade Guide](https://redwoodjs.com/upgrade/v8 "Upgrade Guide")
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## JS Dates Are About to Be Fixed | TimeTime
+[docs.timetime.in/blog/js-dates-finally-fixed/](https://docs.timetime.in/blog/js-dates-finally-fixed/ "JS Dates Are About to Be Fixed | TimeTime")
+<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>
+
+ECMAScript Proposal Stage 3의 Temporal API 관련하여
+
+
+----
+
+## What’s new in React 19 – Vercel
+[vercel.com/blog/whats-new-in-react-19](https://vercel.com/blog/whats-new-in-react-19 "What’s new in React 19 – Vercel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React 19 새로운 기능 소개.
+Server Component, Server Action, `useActionState`/`useFormState`/`useOptimistic`/`use` 새로운 Hooks.
+리소스 preload, `ref` callback, `<title>` 메타데이터에 대응.
+Custom Element 대응, 에러 표시 개선
+
+
+----
+
+## The Ultimate Guide to Font Performance Optimization | DebugBear
+[www.debugbear.com/blog/website-font-performance](https://www.debugbear.com/blog/website-font-performance "The Ultimate Guide to Font Performance Optimization | DebugBear")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">article</span> <span class="jser-tag">fonts</span> <span class="jser-tag">performance</span></p>
+
+WebFont 퍼포먼스 최적화 관련하여
+
+
+----
+<h1 class="site-genre">웹사이트, 서비스, 문서</h1>
+
+----
+
+## ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
+[github.com/ymrl/a11y-visualizer?tab&#x3D;readme-ov-file](https://github.com/ymrl/a11y-visualizer?tab=readme-ov-file "ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">accessibility</span> <span class="jser-tag">Firefox</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">Extension</span></p>
+
+접근성 정보를 시각적으로 표시하는 브라우저 확장.
+접근성 구조를 시각화해서, 쉽게 문제를 발견하는 도구
+
+
+----