JSer.info #639 - Storybook 7.0가 출시되었습니다.
UI 디자인 리뉴얼, Vite/Next.js/SvelteKit를 무설정으로 이용할 수 있도록 Frameworks API 추가, Story Format v3 등 여러 변경이 포함되어있습니다.
변경 내용은 각 해설 글도 공개되어 있습니다.
- ⚡️ First-class Vite
- 🔼 Zero-config NextJS
- 🇸 Zero-config SvelteKit
- 🏗️ Frameworks API
- 3️⃣ Component Story Format v3
- 🛡️ Improved type safety
- 📚 Docs overhaul with MDx2 support
- ☂️ Code coverage for interaction testing
- 🖼️ UI design refresh
- 🏛️ Improved stability
JSPM 3.0.0가 출시되어 CLI가 크게 변경되었습니다.
Import Maps가 모든 브라우저에서 지원됨에 따라 JSPM CLI은 Import Maps 패키지 매니저 도구로 변경되었습니다.
Next.js 13.3가 출시되었습니다.
파일명 기반 Metadata API의 지원, Satori를 사용한 ImageResponse의 지원, App Router에서 static export의 지원이 추가되었습니다.
또한, @folder 명명규칙을 사용한 Parallel Routes와 Intercepting Route의 지원 등이 추가되었습니다.
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Release @sveltejs/[email protected] · sveltejs/kit
github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%401.15.2
Svelte Kit 1.15.2 출시.
CSRF 관련 취약성 수정된 보안 출시
JSPM - JSPM CLI Relaunch - Import Map Package Management
JSPM 3.0 출시.
모든 브라우저가 Import Maps 지원함에 따라, JSPM의 CLI를 Import Maps 관리에 이용할 수 있도록 한 큰 변경
Blog - Next.js 13.3 | Next.js
Next.js 13.3 출시.
파일명 기반 Metadata API의 지원, Satori를 사용한 ImageResponse의 지원, App Router에서 static export의 지원.
@folder 명명규칙을 사용한 Parallel Routes와 Intercepting Route의 지원 등
Release v0.30.0 · vitest-dev/vitest
github.com/vitest-dev/vitest/releases/tag/v0.30.0
vitest v0.30.0 출시.
monorepo 지원하는 workspace 기능 추가, snapshot 로직을 @vitest/snapshot 패키지에 이동 등
Chrome 113 beta - Chrome Developers
developer.chrome.com/en/blog/chrome-113-beta/
Chrome 113 Beta 출시.
CSS Media Query에서 overflow-inline/overflow-block/update 지원, image-set()의 지원.
Headers.getSetCookie의 지원, WebGPU의 지원.
document.domain에 대입을 대입하는 것을 비권장화 등
Node v19.9.0 (Current) | Node.js
nodejs.org/en/blog/release/v19.9.0
Node.js v19.9.0 출시.
TracingChannel 추가, URL.canParse 추가 등
Storybook 7.0
storybook.js.org/blog/storybook-7-0/
Storybook 7.0 출시.
UI 디자인 리뉴얼, Vite/Next.js/SvelteKit 를 무설정으로 이용 가능하도록, Framework API 추가, Story Format v3 등
Release v3.0.0 · liriliri/eruda
github.com/liriliri/eruda/releases/tag/v3.0.0
모바일 브라우저에서도 이용가능한 개발자 도구 라이브러리 eruda 3.0 출시
읽읅거리
What's New in DevTools (Chrome 113) - Chrome Developers
developer.chrome.com/en/blog/new-in-devtools-113/
Chrome 113 DevTools 변경에 대해.
리스폰스 헤더를 수정 가능하도록, x_google_ignoreList 옵션에도 대응.
Record 패널에서 assertion 추가 가능하도록, JavaScript Profiler 패널 삭제 등
Announcing WCGI: WebAssembly + CGI
wasmer.io/posts/announcing-wcgi
Wasmer가 CGI 서버의 Wasm 파일 실행하는 wcgi의 지원 추가
Popularity of top frameworks on Netlify: Next.js, Gatsby, create-react-app
www.netlify.com/blog/framework-popularity-on-netlify/
Netlify에 디플로이 되어 있는 애플리케이션이 이용 중인 프레임워크 조사 글.
React 기반 create-react-app/Next.js/Gatsby가 많으며, 그 다음으로 Nuxt, Vue이다.
엔터프라이즈 계정의 경향 등에 대한 글도 있다
웹사이트, 서비스, 문서
divriots/jampack: Optimizes static websites for best user experience and best Core Web Vitals scores.
정적 사이트 제네레이터 등에 의해 출력된 HTML/CSS/JS이나 이미지 등을 최적화 하는 도구.
이미지 최적화, Above the fold 최적화, 에셋 압축, <img> 태그 속성 수정 등을 한다
소프트웨어, 도구, 라이브러리
Hexagon/croner: Trigger functions or evaluate cron expressions in JavaScript or TypeScript. No dependencies. Most features. Node. Deno. Bun. Browser.
cron 구문으로 함수를 실행하는 잡 라이브러리
nitrogql/mod.rs at master · uhyo/nitrogql · GitHub
GraphQL를 TypeScript에서 이용하기 위한 툴킷.
GraphQL 구문 체크, GraphQL 파일에서 TypeScript 자료형 정의 생성, GraphQL 파일을 로드하는 loader 제공한다
open-draft/logger: Environment-agnostic, ESM-friendly logger for simple needs.
ESM-friendly한 debug 모듈스러운 로거 라이브러리.
DEBUG 환경변수도 지원한다
도서
Node.js Secure Coding: Defending Against Command Injection Vulnerabilities
Node.js의 보안 대한 도서
