Fork me on GitHub

2023-12-01: Node.js v18.19.0(LTS), BiomeとPrettier, CSS Hooks

Translator: rewrite0w0 Edit on GitHub See Revisions

JSer.info #671 - Node.js v18.19.0가 출시되었어요.

npm 10 업데이트, node:moduleregister API 추가, import.meta.resolve 지원돼요.
그리고, .js 기본값을 CJS에서 ESM로 변경하는 --experimental-default-type 플래그가 백포트돼요.


Biome v1.4.0 출시되었어요.

Prettier의 JS/TS/JSX 관련 테스트케이스를 95% 이상 통과한 Rust 구현 대회 The Prettier Challenge가 있었어요.
Biome v1.4.0는 이 도전과제를 달성했으며, Pretttier 포맷터 결과 96% 일치했어요.
의도적인 다르게 만든 부분은 다음 Issue에 정리되었어요.

그 외로, 포맷 관련한 옵션 추가, --config-path 플래그 추가, Lint 규칙 추가도 있어요.


Prettier's CLI: A Performance Deep Dive · Prettier 에서는 Prettier의 CLI 성능 개선에 대해 언급되고 있어요.

glob 파일 탐색 개선, INI 파일 파싱 개선, 캐시를 기본값으로 변경, console.log 출력을 버퍼링하도록 변경하는 등 CLI 개선에 관련된 이야기가 있어요.


CSS Hooks 라이브러리는, style 속성 스타일링 가능한 CSS in JS이며, :hover 같은 추상 클래스도 지원돼요.

CSS Hooks는, CSS Custom Properties 사용함으로 style 속성에서 추상 클래스나 Media Query 지원해요. CSS Custom Properties로 if문 같이 스타일링 토글 가능하고요.

상세한 구조는, 다음 글을 참조해주세요.


To support JSer.info


헤드라인


Release v135 / Introducing esm.sh/run · esm-dev/esm.sh

github.com/esm-dev/esm.sh/releases/tag/v135

JavaScript cdn library ReleaseNote

esm.sh v135 출시.
JSX나 TS 코드 변경과 실행 가능한 https://esm.sh/run 추가


Biome formatter wins the Prettier challenge |

biomejs.dev/blog/biome-wins-prettier-challenge

JavaScript Rust Tools ReleaseNote

Biome v1.4.0 출시.
JS/TS/JSX 포맷터 결과를 Prettier 호환하도록 개선. 현 시점 Prettier 결과와 96% 일치. 몇 가지 포맷터는 의도적으로 다르게 구현.
포맷터 관련한 옵션 추가, --config-path 플래그 추가, Lint 규칙 추가


Release v9.0.0 · cosmiconfig/cosmiconfig

github.com/cosmiconfig/cosmiconfig/releases/v9.0.0

nodejs library ReleaseNote

설정 파일 모더 라이브러리 cosmiconfig 9.0.0 출시.
searchStrategy 옵션, $import: 지원.
파일 시스템 권한을 얻을 수 없어 실패했을 때 크래시되는 문제 수정


Astro 4.0 Beta Release | Astro

astro.build/blog/astro-4-beta/

astro ReleaseNote

Astro 4.0 Beta 출시.
Vite 5으로 업데이트, <ViewTransitions /> 관련 라이프 사이클 이벤트 추가


Node v18.19.0 (LTS) | Node.js

nodejs.org/en/blog/release/v18.19.0

nodejs ReleaseNote

Node.js v18.19.0 출시.
npm 10으로 업데이트, node:moduleregister API 추가, import.meta.resolve 지원.
.js 기본값을 CJS에서 ESM으로 변경하는 --experimental-default-type 플래그 지원.


Node.js Downloads

nodedownloads.nodeland.dev/

nodejs webservice

Node.js 버전 마다 다운로드 수를 시각화하는 웹사이트


Storybook 7.6

storybook.js.org/blog/storybook-7-6/

Development debug Tools ReleaseNote

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

nodejs ReleaseNote

Node.js v21.3.0 출시.
--disable-warning 플래그 추가, 루트 증명성를 NSS 3.95으로 갱신, UTF-8 문자열을 fs.writeFileSync에서 작성할 때 성능 개선


tapjs/tsimp

github.com/tapjs/tsimp

TypeScript nodejs library

ts-node 같이 TypeScript 코드 타입 체크하면서 컴파일하는 로더.
Node.js 20부터 지원되는 Module.register() 사용해서 node --import 동작. 또한 데몬과 캐시 사용함으로 불필요한 처리 스킵 가능.


읽을거리


Prettier's CLI: A Performance Deep Dive · Prettier

prettier.io/blog/2023/11/30/cli-deep-dive

nodejs JavaScript performance article

Prettier의 CLI 퍼포먼스 개선에 대해.
glob 파일 탐색 개선, INI 파일 파싱 개선, 캐시 기본값으로, console.log 출력 버퍼링하도록 변경


CSS Containment 구조 이해하며 렌더링 퍼포먼스 개선1 개요 | 프론트엔드 Blog | 미츠에링크스

www.mitsue.co.jp/knowledge/blog/frontend/202311/28_1448.html

CSS article

CSS Containment 관련하여


소프트웨어, 도구, 라이브러리


architect/aws-lite: A simple, fast, extensible AWS client

github.com/architect/aws-lite

aws JavaScript library

AWS의 API 클라리언트 라이브러리.
AWS SDK 성능이나 스택 트레이스 등 문제 다루기 위해 작성.


css-hooks/css-hooks: Hooks bring advanced CSS features to native inline styles.

github.com/css-hooks/css-hooks

JavaScript CSS React library

style 속성으로 스타일링 하는 CSS in JS 라이브러리. React/Preact/Solid 지원.
CSS custom properties 사용해서, :hover 등 추상 클래스나 Media Query 관련 스타일링을 style 속성으로 구현하고 있음.


tapjs/tsimp

github.com/tapjs/tsimp

TypeScript nodejs Tools library

ts-node 같이 TypeScript 코드를 타입 체크하면서 컴파일링하는 로더.
Node.js 20에서 지원하는 Module.register()를 사용해 node --import 동작. 또한 데몬과 캐시 사용함으로 불필요한 처리 스킵 가능.


도서


Fluent React

learning.oreilly.com/library/view/fluent-react/9781098138707/

React book

2024년 3월 발매.
React 관련 도서


Pull Request to this article
JSer.info Slackに参加する