Fork me on GitHub

2023-03-14: Storybook 7.0.0 RC, Rspack(webpack interoperability), Pino Logging Guide

Translator: rewrite0w0(Oh TaeJun) Edit on GitHub See Revisions

JSer.info #635 - Storybook 7.0.0 RC가 출시되었습니다.

7.0.0 RC에는 First-class Framework integrations로 Vite나 Next.js 등 대응, Component Story Format v3으로 변경, 자료형 처리 개선등이 포함되었습니다.


Rust으로 작성된 webpack 호환 bundler Rspack이 공개되었습니다.

webpack를 사용하는 프로젝트의 호환성과 이행을 고려해서 옵션이나, loader도 호환성 있는 형태로 구현되었습니다.
또, 출력하는 런타임 코드도 webpack 출력과 호환성을 고려했으며, 플러그인도 JS로 작성할 수 있습니다.
로드맵으로 webpack팀과 연계해서 webpack과 통합도 계획하고 있습니다.

아직 Vue 대응 등이 포함되어 있지 않지만, 문서는 공개되어 있기에 흥미있는 분은 읽어보는 것이 좋을 것 같습니다.


A Complete Guide to Pino Logging in Node.js | Better Stack Community에서는 Node.js의 로그 라이브러리 Pino의 사용방법에 대해 소개하고 있습니다.

꽤 폭넓은 소개이므로 Pino에 흥미있는 분은 읽어보심이 좋을 듯 합니다.


To support JSer.info


헤드라인


Release v5.76.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.76.0

webpack ReleaseNote

webpack v5.76.0 출시.
성능 개선 등.


jQuery 3.6.4 Released: Selector Forgiveness | Official jQuery Blog

blog.jquery.com/2023/03/08/jquery-3-6-4-released-selector-forgiveness/

jQuery ReleaseNote

jQuery 3.6.4 출시.
jQuery 3.6.3에 도입되었던 CSS.supports를 사용해 Selector가 네이티브한 것 인가 확인하는 처리를 되돌렸다.
CSS.supportsquerySelector는 셀렉터 부분이 달랐기에, 본래의 try-catch를 사용하는 구현으로 되돌렸다.


Announcing Rspack - Rspack

www.rspack.dev/blog/announcement.html

webpack bundler ReleaseNote

Rust로 작성된 webpack 호환 bundler.
webpack 사용하는 프로젝트 호환성이나 이행을 고려해서 옵션이나 loader도 호환성있는 형태로 구현되었다.
출력하는 런타임 코드도 webpack 출력과 호환성을 고려했으며, 플러그인도 JS로 작성할 수 있다.
또, webpack팀과 연계해서 webpack과 통합도 계획하고 있다.


Release v6.9.0 · remix-run/react-router

github.com/remix-run/react-router/releases/tag/react-router%406.9.0

React library ReleaseNote

React Router 6.9.0 출시.
lazy props 지원, 컴포넌트 지연 로드 가능하도록


Release v7.0.0-rc.0 · storybookjs/storybook

github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.0

JavaScript UI Tools ReleaseNote

Storybook v7.0.0-rc.0 출시.


읽을거리


Everything You Need to Know About the Gap After the List Marker | CSS-Tricks - CSS-Tricks

css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/

CSS article

CSS ::marker 추상요소 관련


A Complete Guide to Pino Logging in Node.js | Better Stack Community

betterstack.com/community/guides/logging/how-to-install-setup-and-use-pino-to-log-node-js-applications/

node.js article

pino로 하는 로깅에 대한 해설 글


TypeScript's Migration to Modules - TypeScript

devblogs.microsoft.com/typescript/typescripts-migration-to-modules/

TypeScript article

TypeScript 코드베이스를 namespace에서 Module로 변경한 이야기.
변경에 의한 성능 개선, namespace가 사용된 역사적 경위, 이행 방법, 호환성에 관련 등


Node.js Security Progress Report –  Permission Model Merged - OpenJS Foundation

openjsf.org/blog/2023/03/13/node-js-security-progress-report-permission-model-merged/?hss_channel=tw-14538601

node.js security article

Node.js Security Working Group 2월 변경점.
Permission Model, Node.js 데이터베이스 자동갱신, 메이저 출시 전 기여 관련 정보 명확히 등


웹사이트, 서비스, 문서


Rspack

www.rspack.dev/

webpack Rust Tools

Rust로 작성된 webpack 호환 bundler.
webpack를 사용하는 프로젝트 호환성이나 이행을 고려했기에 옵션이나 loader도 호환성있는 형태로 구현되었다.


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


open-draft/event-contract: Type-safe, implementation-agnostic event contract framework.

github.com/open-draft/event-contract

TypeScript library

Type-Safe으로 이벤트 구현하는 프레임워크.
EventTarget 사용하는 transport로 임의의 구조로 이벤트 구현할 수 있다.
schema으로 zod를 사용한 Runtime Type Check도 가능.


proto - A multi-language toolchain manager | moonrepo

moonrepo.dev/proto

node.js deno Bun golang console Tools

Node.js, Deno, Bun, Go 등 지원되는 버전 관리 도구.


antonmedv/finder: CSS Selector Generator 🗺

github.com/antonmedv/finder

JavaScript CSS library

DOM 요소에서 unique한 CSS 셀렉터를 만드는 라이브러리


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