translate: 20231201 article (#1143)

jser · Dec 3, 2023 · 8b7f790 · 8b7f790
1 parent bf4efb8
commit 8b7f790
Showing 1 changed file with 226 additions and 0 deletions.
diff --git a/_i18n/ko/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md b/_i18n/ko/_posts/2023/2023-12-01-node.js-v18.19.0lts-biomeprettier-css-hooks.md
@@ -0,0 +1,226 @@
+---
+title: "2023-12-01: Node.js v18.19.0(LTS), BiomeとPrettier, CSS Hooks"
+author: "azu"
+translator: rewrite0w0
+layout: post
+date: 2023-12-01T08:35:59.869Z
+category: JSer
+tags:
+- nodejs
+- Tools
+- CSS
+- React
+- TypeScript
+
+---
+
+JSer.info #671 - Node.js v18.19.0가 출시되었어요.
+
+- [Node v18.19.0 (LTS) | Node.js](https://nodejs.org/en/blog/release/v18.19.0)
+
+[npm 10](https://github.com/npm/cli/releases/tag/v10.0.0) 업데이트, `node:module`에 `register` API 추가, `import.meta.resolve` 지원돼요.
+그리고, `.js` 기본값을 CJS에서 ESM로 변경하는 `--experimental-default-type` 플래그가 백포트돼요.
+
+----
+
+Biome v1.4.0 출시되었어요.
+
+- [Biome formatter wins the Prettier challenge | Biome](https://biomejs.dev/blog/biome-wins-prettier-challenge)
+- [Release CLI v1.4.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.4.0)
+
+Prettier의 JS/TS/JSX 관련 테스트케이스를 95% 이상 통과한 Rust 구현 대회 [The Prettier Challenge](https://console.algora.io/challenges/prettier)가 있었어요.
+Biome v1.4.0는 이 도전과제를 달성했으며, Pretttier 포맷터 결과 96% 일치했어요.
+의도적인 다르게 만든 부분은 다음 Issue에 정리되었어요.
+
+- [☂️ Prettier Divergence collection from the Prettier challenge · Issue #739 · biomejs/biome](https://github.com/biomejs/biome/issues/739)
+
+그 외로, 포맷 관련한 옵션 추가, `--config-path` 플래그 추가, Lint 규칙 추가도 있어요.
+
+---
+
+[Prettier's CLI: A Performance Deep Dive · Prettier](https://prettier.io/blog/2023/11/30/cli-deep-dive) 에서는 Prettier의 CLI 성능 개선에 대해 언급되고 있어요.
+
+glob 파일 탐색 개선, INI 파일 파싱 개선, 캐시를 기본값으로 변경, `console.log` 출력을 버퍼링하도록 변경하는 등 CLI 개선에 관련된 이야기가 있어요.
+
+----
+
+CSS Hooks 라이브러리는, `style` 속성 스타일링 가능한 CSS in JS이며, `:hover` 같은 추상 클래스도 지원돼요.
+
+- [css-hooks/css-hooks: Hook into advanced CSS features with native inline styles.](https://github.com/css-hooks/css-hooks)
+
+CSS Hooks는, CSS Custom Properties 사용함으로 style 속성에서 추상 클래스나 Media Query 지원해요. CSS Custom Properties로 if문 같이 스타일링 토글 가능하고요.
+
+상세한 구조는, 다음 글을 참조해주세요.
+
+- [Cyclic Dependency Space Toggles](https://kizu.dev/cyclic-toggles/)
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">헤드라인</h1>
+
+----
+
+## Release v135 / Introducing esm.sh/run · esm-dev/esm.sh
+[github.com/esm-dev/esm.sh/releases/tag/v135](https://github.com/esm-dev/esm.sh/releases/tag/v135 "Release v135 / Introducing esm.sh/run · esm-dev/esm.sh")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">cdn</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+esm.sh v135 출시.
+JSX나 TS 코드 변경과 실행 가능한 `https://esm.sh/run` 추가
+
+
+----
+
+## Biome formatter wins the Prettier challenge |
+[biomejs.dev/blog/biome-wins-prettier-challenge](https://biomejs.dev/blog/biome-wins-prettier-challenge "Biome formatter wins the Prettier challenge |")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Rust</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Biome v1.4.0 출시.
+JS/TS/JSX 포맷터 결과를 Prettier 호환하도록 개선. 현 시점 Prettier 결과와 96% 일치. 몇 가지 포맷터는 의도적으로 다르게 구현.
+포맷터 관련한 옵션 추가, `--config-path` 플래그 추가, Lint 규칙 추가
+
+- [Release CLI v1.4.0 · biomejs/biome](https://github.com/biomejs/biome/releases/tag/cli%2Fv1.4.0 "Release CLI v1.4.0 · biomejs/biome")
+
+----
+
+## Release v9.0.0 · cosmiconfig/cosmiconfig
+[github.com/cosmiconfig/cosmiconfig/releases/v9.0.0](https://github.com/cosmiconfig/cosmiconfig/releases/v9.0.0 "Release v9.0.0 · cosmiconfig/cosmiconfig")
+<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>
+
+설정 파일 모더 라이브러리 cosmiconfig 9.0.0 출시.
+`searchStrategy` 옵션, `$import:` 지원.
+파일 시스템 권한을 얻을 수 없어 실패했을 때 크래시되는 문제 수정
+
+
+----
+
+## Astro 4.0 Beta Release | Astro
+[astro.build/blog/astro-4-beta/](https://astro.build/blog/astro-4-beta/ "Astro 4.0 Beta Release | Astro")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Astro 4.0 Beta 출시.
+Vite 5으로 업데이트, `<ViewTransitions />` 관련 라이프 사이클 이벤트 추가
+
+
+----
+
+## Node v18.19.0 (LTS) | Node.js
+[nodejs.org/en/blog/release/v18.19.0](https://nodejs.org/en/blog/release/v18.19.0 "Node v18.19.0 (LTS) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v18.19.0 출시.
+npm 10으로 업데이트, `node:module`에 `register` API 추가, `import.meta.resolve` 지원.
+`.js` 기본값을 CJS에서 ESM으로 변경하는 `--experimental-default-type` 플래그 지원.
+
+
+----
+
+## Node.js Downloads
+[nodedownloads.nodeland.dev/](https://nodedownloads.nodeland.dev/ "Node.js Downloads")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">webservice</span></p>
+
+Node.js 버전 마다 다운로드 수를 시각화하는 웹사이트
+
+
+----
+
+## Storybook 7.6
+[storybook.js.org/blog/storybook-7-6/](https://storybook.js.org/blog/storybook-7-6/ "Storybook 7.6")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Development</span> <span class="jser-tag">debug</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Storybook 7.6 출시.
+webpack 프로젝트에서도 SWC 이용 가능하도록 변경, `@storybook/test`의 assertion를 Vitest의 expect으로 변경, Test mode 추가.
+react-docgen 업데이트로 기동 시간 개선, Storyshots와 Vue2 지원 비권장화
+
+
+----
+
+## Node v21.3.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v21.3.0](https://nodejs.org/en/blog/release/v21.3.0 "Node v21.3.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v21.3.0 출시.
+`--disable-warning` 플래그 추가, 루트 증명성를 NSS 3.95으로 갱신, UTF-8 문자열을 `fs.writeFileSync`에서 작성할 때 성능 개선
+
+
+----
+
+## tapjs/tsimp
+[github.com/tapjs/tsimp](https://github.com/tapjs/tsimp "tapjs/tsimp")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">library</span></p>
+
+ts-node 같이 TypeScript 코드 타입 체크하면서 컴파일하는 로더.
+Node.js 20부터 지원되는 `Module.register()` 사용해서 `node --import` 동작. 또한 데몬과 캐시 사용함으로 불필요한 처리 스킵 가능.
+
+
+----
+<h1 class="site-genre">읽을거리</h1>
+
+----
+
+## Prettier&#039;s CLI: A Performance Deep Dive · Prettier
+[prettier.io/blog/2023/11/30/cli-deep-dive](https://prettier.io/blog/2023/11/30/cli-deep-dive "Prettier&#039;s CLI: A Performance Deep Dive · Prettier")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+Prettier의 CLI 퍼포먼스 개선에 대해.
+glob 파일 탐색 개선, INI 파일 파싱 개선, 캐시 기본값으로, `console.log` 출력 버퍼링하도록 변경
+
+
+----
+
+## CSS Containment 구조 이해하며 렌더링 퍼포먼스 개선1 개요 | 프론트엔드 Blog | 미츠에링크스
+[www.mitsue.co.jp/knowledge/blog/frontend/202311/28\_1448.html](https://www.mitsue.co.jp/knowledge/blog/frontend/202311/28_1448.html "CSS Containment 구조 이해하며 렌더링 퍼포먼스 개선1 개요 | 프론트엔드 Blog | 미츠에링크스")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
+
+CSS Containment 관련하여
+
+
+----
+<h1 class="site-genre">소프트웨어, 도구, 라이브러리</h1>
+
+----
+
+## architect/aws-lite: A simple, fast, extensible AWS client
+[github.com/architect/aws-lite](https://github.com/architect/aws-lite "architect/aws-lite: A simple, fast, extensible AWS client")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">aws</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+AWS의 API 클라리언트 라이브러리.
+AWS SDK 성능이나 스택 트레이스 등 문제 다루기 위해 작성.
+
+----
+
+## css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.
+[github.com/css-hooks/css-hooks](https://github.com/css-hooks/css-hooks "css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span></p>
+
+style 속성으로 스타일링 하는 CSS in JS 라이브러리. React/Preact/Solid 지원.
+CSS custom properties 사용해서, `:hover` 등 추상 클래스나 Media Query 관련 스타일링을 style 속성으로 구현하고 있음.
+
+----
+
+## tapjs/tsimp
+[github.com/tapjs/tsimp](https://github.com/tapjs/tsimp "tapjs/tsimp")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">Tools</span> <span class="jser-tag">library</span></p>
+
+ts-node 같이 TypeScript 코드를 타입 체크하면서 컴파일링하는 로더.
+Node.js 20에서 지원하는 `Module.register()`를 사용해 `node --import` 동작. 또한 데몬과 캐시 사용함으로 불필요한 처리 스킵 가능.
+
+
+
+----
+<h1 class="site-genre">도서</h1>
+
+----
+
+## Fluent React
+[learning.oreilly.com/library/view/fluent-react/9781098138707/](https://learning.oreilly.com/library/view/fluent-react/9781098138707/ "Fluent React")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">book</span></p>
+
+2024년 3월 발매.
+React 관련 도서
+
+
+----