Skip to content

Commit

Permalink
translate: 2024-09-09 article (#1221)
Browse files Browse the repository at this point in the history
  • Loading branch information
rewrite0w0 authored Sep 9, 2024
1 parent 53bafd6 commit ea6bfb7
Showing 1 changed file with 195 additions and 0 deletions.
195 changes: 195 additions & 0 deletions _i18n/ko/_posts/2024/2024-09-09-vue-3.5-jsprimer-v6-a11y-visualizer.md
Original file line number Diff line number Diff line change
@@ -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>

접근성 정보를 시각적으로 표시하는 브라우저 확장.
접근성 구조를 시각화해서, 쉽게 문제를 발견하는 도구


----

0 comments on commit ea6bfb7

Please sign in to comment.