Translate/20231016 (#1129)

* translate: 20231016 article

* translate: 20231018 article

Author: rewrite0w0

_i18n/ko/_posts/2023/2023-10-16-lit-3-chrome-118-zod.md

@@ -0,0 +1,228 @@
+---
+title: "2023-10-16: Lit 3, Chrome 118, Zod 작성하기"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date : 2023-10-16T12:44:04.356Z
+category: JSer
+tags:
+- Bun
+- npm
+- Chrome
+- UI
+- parcel
+
+---
+
+JSer.info #665 - Web Components 라이브러리 Lit 3.0가 출시되었습니다.
+
+- [Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit](https://lit.dev/blog/2023-10-10-lit-3.0/)
+- [Lit 3 upgrade guide – Lit](https://lit.dev/docs/v3/releases/upgrade/)
+
+Lit 3는, IE11 지원 종료, 최소 실행 환경을 ES2021 지원하는 브라우저로 변경했습니다.
+Lit 2.0에서 비권장된 API 삭제, Stage 3 Decorator 대응했습니다.
+또한, 새롭게 Lit 템플릿 컴파일러 공개, Preact Signals 통합하는 패키지도 공개했습니다.
+
+---
+
+Chrome 118 출시되었습니다.
+
+- [New in Chrome 118 - Chrome for Developers](https://developer.chrome.com/en/blog/new-in-chrome-118/)
+
+Chrome 118에서는 CSS의 `@scope` 규칙 지원합니다.
+
+- [Limit the reach of your selectors with the CSS `@scope` at-rule - Chrome for Developers](https://developer.chrome.com/articles/at-scope/)
+
+Media Query에서 JavaScript가 유효한지 판단하는 `scripting` 추가, DevTools의 "Sources" 패널 개선, `zstd`의 Content-Encoding 지원이 있습니다.
+
+----
+
+[Write your own Zod](https://zackoverflow.dev/writing/write-your-own-zod)에서는, [Zod](https://github.com/colinhacks/zod) 같은 스키마 기반 검증을 어떻게 동작하는가 해설합니다.
+
+mini Zod로 불리는 귀여운 Zod 클론 코딩하면서, 스키마 객체에서 자료형을 Infer하는 방법, 검증 구현 방법에 대해 해설합니다.
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit
+[lit.dev/blog/2023-10-10-lit-3.0/](https://lit.dev/blog/2023-10-10-lit-3.0/ "Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Lit 3.0 출시.
+IE11 지원 종료, 최소 실행환경을 ES2021 지원하는 브라우저로 변경.
+Lit 2.0에서 비권장이었던 API 삭제, Stage 3의 Decorator에 대응.
+새로히 Lit 템플릿 컴파일러 공개, Preact Signals 통합하는 패키지 공개.
+
+- [Lit 3 upgrade guide – Lit](https://lit.dev/docs/v3/releases/upgrade/ "Lit 3 upgrade guide – Lit")
+
+----
+
+## Bun v1.0.5 | Bun Blog
+[bun.sh/blog/bun-v1.0.5](https://bun.sh/blog/bun-v1.0.5 "Bun v1.0.5 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v1.0.5 출시.
+Fetch 메모리 누수 수정, `bun run --if-present` 지원, `package-lock.json`을 `bun.lockb`으로 변환해주는 `bun pm migrate` 명령어 추가.
+`peerDependencies`을 자동으로 설치하도록 변경
+
+
+----
+
+## Release v2.10.0 · parcel-bundler/parcel
+[github.com/parcel-bundler/parcel/releases/tag/v2.10.0](https://github.com/parcel-bundler/parcel/releases/tag/v2.10.0 "Release v2.10.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.10.0 출시.
+지연 컴파일 대상 지정할 수 있는 `--lazy [glob]`와 `--lazy-excludes` 추가.
+Rust 모듈을 하나의 패키지 매니저로 함으로 중복 Crates 삭제해 사이즈 경감, 또한 병렬 처리 효율적으로 하게 성능 개선됨.
+
+
+----
+
+## Fresh 1.5: Partials, client side navigation and more
+[deno.com/blog/fresh-1.5](https://deno.com/blog/fresh-1.5 "Fresh 1.5: Partials, client side navigation and more")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">library</span></p>
+
+Fresh 1.5 출시.
+화면 전환 해당 영역을 파편해서 얻을 수 있는 `<Partial>` 추가.
+현재 경로와 일치하는 `<a>` 요소에 `data-current` 추가, 커스텀 빌드 타겟을 지정할 수 있는 `build.target` 객체 추가.
+esbuild 사용해서 bundle 파일 분석해서 메타파일 생성 기능 지원, 에러 오버레이 지원
+
+
+----
+
+## Bun v1.0.6 | Bun Blog
+[bun.sh/blog/bun-v1.0.6](https://bun.sh/blog/bun-v1.0.6 "Bun v1.0.6 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">yarn</span> <span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v1.0.6 출시.
+npm의 `overrides` 필드, yarn의 `resolutions` 필드 지원.
+
+
+----
+
+## Electron 27.0.0 | Electron
+[www.electronjs.org/blog/electron-27-0](https://www.electronjs.org/blog/electron-27-0 "Electron 27.0.0 | Electron")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Electron 27.0.0 지원.
+macOS 10.13/10.14 지원 종료, `ipcRenderer.sendTo()` API 비권장화
+
+
+----
+
+## Astro 3.3: Picture component | Astro
+[astro.build/blog/astro-330/](https://astro.build/blog/astro-330/ "Astro 3.3: Picture component | Astro")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Astro 3.3 출시.
+`<picture />` 컴포넌트 추가, 신택스 하이라이트에 사용했던 라이브러리를 `shiki`에서 `shikiji`로 변경
+
+
+----
+
+## Vite (Unstable) (dev branch) | Remix
+[remix.run/docs/en/dev/future/vite](https://remix.run/docs/en/dev/future/vite "Vite (Unstable) (dev branch) | Remix")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Remix</span> <span class="jser-tag">vite</span> <span class="jser-tag">document</span></p>
+
+Remix의 Vite 지원.
+Vite의 플러그인으로 Remix가 동작할 수 있게끔.
+
+- [Just use vite! · remix-run/remix · Discussion #7632](https://github.com/remix-run/remix/discussions/7632 "Just use vite! · remix-run/remix · Discussion #7632")
+
+----
+
+## Release v4.1.0 · rollup/rollup
+[github.com/rollup/rollup/releases/tag/v4.1.0](https://github.com/rollup/rollup/releases/tag/v4.1.0 "Release v4.1.0 · rollup/rollup")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">rollup</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Rollup v4.1.0 출시.
+객체를 갖는 객체를 비트 플러그로 관리해서 메모리 소비량을 경감하는 개선 포함.
+
+
+----
+
+## New in Chrome 118 - Chrome for Developers
+[developer.chrome.com/en/blog/new-in-chrome-118/](https://developer.chrome.com/en/blog/new-in-chrome-118/ "New in Chrome 118 - Chrome for Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Chrome 118 변경점 관련.
+CSS의 `@scope` 규칙 지원, Media Query에서 JavaScript가 유효한지 판단하는 `scripting` 추가.
+DevTools으 "Sources" 패널 개선, `zstd`의 Content-Encoding 지원.
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## Limit the reach of your selectors with the CSS \`@scope\` at-rule - Chrome for Developers
+[developer.chrome.com/articles/at-scope/](https://developer.chrome.com/articles/at-scope/ "Limit the reach of your selectors with the CSS \`@scope\` at-rule - Chrome for Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
+
+CSS `@scope` 관련한 글.
+`@scope` 덕에 셀렉터 범위를 제한할 수 있으며, 스코프는 특별히 영향없음.
+또한, `@scope { }`와 루트 지정없이 지정할 수 있는 scoped style을 다루는 prelude-less `@scope`에 대해서도 다룬다
+
+
+----
+
+## What&#039;s New in DevTools (Chrome 118) - Chrome for Developers
+[developer.chrome.com/blog/new-in-devtools-118/](https://developer.chrome.com/blog/new-in-devtools-118/ "What&#039;s New in DevTools (Chrome 118) - Chrome for Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p>
+
+Chrome 118 개발자 모드 변경점에 대해.
+local overrides 개선, 코드 검색 개선, Sources 패널 개선, Lighthouse 11으로 업데이트
+
+
+----
+
+## Write your own Zod
+[zackoverflow.dev/writing/write-your-own-zod](https://zackoverflow.dev/writing/write-your-own-zod "Write your own Zod")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+Zod 같은 스키마 검증을 만드는 방법에 대해서.
+Zod 같이 스키마 객체에서 자료형을 Infer하는 방법, 검증 구현에 대해.
+
+
+----
+
+## Flat config rollout plans - ESLint - Pluggable JavaScript Linter
+[eslint.org/blog/2023/10/flat-config-rollout-plans/](https://eslint.org/blog/2023/10/flat-config-rollout-plans/ "Flat config rollout plans - ESLint - Pluggable JavaScript Linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">article</span></p>
+
+앞으로 Config 파일에 관련하여.
+ESLint 9에서는 `eslint.config.js`의 Flat Config가 기본이 되어, `.eslintrc.*` 형식은 비권장이 됨.
+`.eslinrc.*` 지원은 ESLint 10에서 삭제 예정.
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## react-hookz/web: React hooks done right, for browser and SSR.
+[github.com/react-hookz/web](https://github.com/react-hookz/web "react-hookz/web: React hooks done right, for browser and SSR.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span></p>
+
+서버렌더링할 때 동작하는 React Hooks 콜렉션 라이브러리.
+`react-use` 계승을 의식하며 제작되었음
+
+
+----
+
+## elbywan/zap: Another \[insert blazing fast synonyms\] JavaScript package manager
+[github.com/elbywan/zap](https://github.com/elbywan/zap "elbywan/zap: Another \[insert blazing fast synonyms\] JavaScript package manager")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">package</span> <span class="jser-tag">console</span> <span class="jser-tag">Tools</span></p>
+
+Crystal 언어로 작성된 npm 패키지 매니저.
+
+
+----

_i18n/ko/_posts/2023/2023-10-18-node.js-roadmap-esm-by-default.md

@@ -0,0 +1,118 @@
+---
+title: "Deep Dive: Node.js에서 기본값 ESM으로 가는 길"
+author: azu
+translator: rewrite0w0
+layout: post
+date : 2023-10-18T10:51
+category: Article
+tags:
+    - Node.js
+    - ESM
+
+---
+
+Node.js 21에는 `--experimental-default-type=module` 플래그로, JavaScript 파일 해석을 기본적으로 CJS(CommonJS)에서 ESM(ECMAScript Modules)로 변경할 수 있습니다.
+
+- [Node.js 21 is now available! | Node.js](https://nodejs.org/en/blog/announcements/v21-release-announce)
+
+이는, Node.js에서 JavaScript 파일(`.js`)의 기본값을 ESM으로 변경하기 위한 첫 걸음입니다.
+
+이번 Deep Dive에서는, Node.js에서 기본값 ESM로 인한 Issue나 구현에 대해 소개합니다.
+
+## Node.js에서 기본값 ESM
+
+### [Discussion: New “ESM by default” mode · Issue #49432 · nodejs/node](https://github.com/nodejs/node/issues/49432)
+
+이 Issue는, Node.js에서 ambiguous file 해석을 CJS(CommonJS)에서 ESM(ECMAScript Modules) 바꾸지는 Discussion Issue입니다.
+
+Ambiguous file(애매한 파일)이란, 이하와 같은 정의입니다.
+
+- `.js` 파일 또는 `package.json`에서 `type` 정의가 안되어있는 것
+  - `.mjs`는 ESM에서도 동작하므로 ambiguous file가 아님
+- `node --eval` 같이 문자열 입력으로 되어있으면서,  `--input-type`가 지정되지 않음
+
+지금 Node.js는, 애매한 파일을 CommonJS으로 해석하고 실행합니다.
+
+Issue에서는, 애매한 파일을 ESM으로 해석하고 실행하는 방법에 대해 논의가 있었습니다.
+
+1. `node` 바이너리를 나눈다
+    - 바이너리 관리 비용 발생한다
+2. package.json 생성할 때 `type=module` 넣어둔다
+    - package.json 사용하지 않는 "스크립트" 문제, 튜토리얼을 다루는 글에서 설명 비용 발생한다
+3. 기본 해석을 변경하는 플래그 추가한다
+
+등 옵션이 언급되었으며, 실험적인 기능으로 기본값 해석을 변경하는 `--experimental-default-type`가 Node.js 21에 구현되었습니다.
+
+### [esm: `--experimental-default-type` flag to flip module defaults by GeoffreyBooth · Pull Request #49869 · nodejs/node](https://github.com/nodejs/node/pull/49869)
+
+이 PR에서는, `node --experimental-default-type=module`에서 실행하는 경우, ambiguous file(애매한 파일)을 ESM으로 해석하고 실행하는 플래그가 구현되었습니다.
+
+📝 이 플래그는 [Node.js 21.0.0](https://nodejs.org/en/blog/release/v21.0.0)에 포함되었습니다.
+
+### [When to make `--default-type=module` the Node.js default · Issue #1445 · nodejs/TSC](https://github.com/nodejs/TSC/issues/1445)
+
+이 Issue는 `--experimental-default-type=module`가 Node.js 21에 구현됨에 따라, Node.js 21를 출시할 때, 이를 언제 기본값으로 하는가 앞으로의 방향성에 대해 관한 Issue입니다.
+
+Issue에서는, `--experimental-default-type=module` 플래그만으로는, 엄청나게 파괴적인 변경으로 인한 혼란을 야기한다 지적하고 있습니다.
+
+가령,  `node_modules/` 이하 패키지 기본 해석을 ESM으로 바꾸면 동작하지 않은 패키지가 많으며, 이미 유지보수 관리되지 않은 패키지도 있다는 문제가 지적됩니다.(애플리케이션과 패키지 제작자가 달라 패치할 수 없어지는 문제)
+
+이에, 기본 해석을 바꿀 뿐인 `--experimental-default-type=module` 플래그만으로는, 이행 과정이 부족한 문제가 있습니다. 이 0 아니면 1 문제는 다음 Issue에서 다뤄집니다.
+
+### [Proposal: Set `--experimental-default-type` mode by detecting ESM syntax in entry point · Issue #50043 · nodejs/node](https://github.com/nodejs/node/issues/50043)
+
+이 Issue에서는, `node_modules/` 이하 파일이 CJS인가 ESM인가 판단하는 `--experimental-detect-module` 같은 플래그가 제안되었습니다.
+
+### [esm: detect ESM syntax in ambiguous JavaScript by GeoffreyBooth · Pull Request #50096 · nodejs/node](https://github.com/nodejs/node/pull/50096)
+
+이 PR에는, `--experimental-detect-module`가 구현되었습니다.
+`--experimental-detect-module` 구현은 `node_modules/` 이하 애매한 파일 안에 ESM 구문이 포함되어 있으면 ESM으로 다루고, 그렇지 않으면 CJS으로 다룹니다.
+
+ESM 구문은 `import` / `export` / `import.meta` 등을 정적으로 해석할 수 있으면 V8으로 판정합니다.( `import()`는 CommonJS에서도 이용되기에, ESM 구문으로 치지 않습니다)
+
+지금은 기본값이 CJS이므로, ambiguous file에 ESM 구문이 포함되어 있지 않으면 실행할 때 에러가 됩니다(acorn 사용해 ESM 구문이 있는가 없는가 판정합니다)
+
+Node.js 20에서 ESM 구문을 포함하는 CJS을 싱핼할 때 에러는 이렇게 됩니다.
+
+```jsx
+import lodash from "lodash"
+^^^^^^
+
+SyntaxError: Cannot use import statement outside a module
+```
+
+이에, ESM 구문을 포함하는 CJS가 없다는 전제가 가능해, `--experimental-detect-module`는 파괴적 변경없이 도입할 수 있지 않겠냐는 이야기입니다.(기존에 실행되던 것이 실행되지 않는 일이 없기에)
+
+이 접근의 단점은 파일 안을 보고서 ESM인가 판단하기에 성능이 나빠지는 점입니다.
+
+## 맺는말
+
+여전히 Node.js에서 `.js` 파일을 ESM로 다룰 수 있는가 어떤가에 대한 방법은 확정되지 않았습니다.
+
+개발 버전인 Node.js 21에서 `--experimental-*` 으로 플래그 구현하면서, 호환성 문제가 없으면서 성능 문제도 없도록 진행되고 있다 생각됩니다.
+
+## 관련 글
+
+### [tc39/proposal-UnambiguousJavaScriptGrammar](https://github.com/tc39/proposal-UnambiguousJavaScriptGrammar)
+
+2016년부터 2017년까지, Node.js가 TC39(ECMAScript 사양 정하는 그룹)에서, 파일 안을 보고서 Script인가 Module인가 판단하는 Proposal가 있었습니다.
+여기서 Script는 CommonJS, Module은 ESM입니다.
+
+이 애매한 파일 판단하는 방법이 `import` 혹은 `export`가 파일에 포함되어있는가 였습니다(또한 `"use module"` 같이 Directive스러운 이야기도 있었습니다)
+
+이 제안은, ECMAScript 사양이 아니라 플랫폼(브라우저나 Node.js)에서 해야할 일이었으므로, TC39로 합의되지 않고 논의 단계에서 종료되었습니다.
+
+- https://github.com/tc39/notes/blob/main/meetings/2016-11/nov-30.md#12iia-proposal-to-reform-the-spec-to-solve-nodejs-ecosystem-compatibility-breaks-w-es-modules
+- https://github.com/tc39/notes/blob/afc1eacf01c5374a1a55cdd6ae00f82fa291d4b8/meetings/2017-01/jan-25.md#13iia-proposed-grammar-change-to-es-modules
+
+2016-2017년 단계에서, Node.js는 ESM 지원하는 방침으로 다음 3가지를 갖고 있었습니다
+
+1. `.js` 안을 보고서 CJS인가 ESM인가 판단
+2. `package.json` 의 `type` 같이 특정 필드로 판단
+3. `.mjs` 같은 확장자로 판단
+
+TC39 제안에서 1 관련한 이야기로, 당시(2016-2017년)는 진전되지 않았습니다.
+Node.js 20 시점에서는 2와 3 구현이 되었으며, 이번 `--experimental-default-type=module` 은 2016-2017년 제안했던 1의 내용에 근접하다 생각됩니다.
+
+- [Node.js, TC-39, and Modules | HackerNoon](https://hackernoon.com/node-js-tc-39-and-modules-a1118aecf95e#.sh1fdwodi)
+- [Follow up: TC39 meets Node.js Modules | by Allen Wirfs-Brock | Medium](https://medium.com/@awbjs/follow-up-tc39-meets-node-js-modules-76fdea278370)