JSer.info #623 - Vite 4.0가 출시되었다.
SWC 지원하는 @vitejs/plugin-react-swc 추가, 기본값으로 ES2020 형식으로 출력하도록 변경, CSS를 문자열로 임포트할 수 있는 방법 변경 등이 포함되어 있다.
Svelte 기반 프레임워크 SvelteKit 1.0가 출시되었다.
α판에서 부터 변경점은 다음 마이그레이션 가이드에 정리되어 있다.
Node v19.3.0가 출시되었다.
Node v19.3.0에는, npm 9계통인 npm 9.2.0가 함께 설치된다.
npm 8에서 9로 업데이트는 메이저 업데이트이므로, 파괴적 변경을 포함하고 있다.
한편, Node.js와 함께 설치되는 npm를 업데이트 할 때에 어떻게 하는가에 대해 Issue에서 논의되었다.
논의 결과, 다음과 같은 가이드라인이 작성되었으며, 이 가이드라인에 충족한다면, Node.js 메이저 업데이트 없이 npm를 메이저 업데이트한다는 결론이 나왔다.
구체적으로는 Node.js 에코시스템을 테스트하는 citgm가 fail이 아니다, package-lock.json를 변경하지 않는다 등의 요건이 포함되어 있다.
가이드라인 결과, 2023년 1월 18일에 npm 9를 Node.js 18에 백포트할 예정이다.
Wednesday Jan. 18th (~6 weeks after node@19 backport)
A PR will be opened to backport [email protected] in node@18
https://github.blog/changelog/2022-10-24-npm-v9-0-0-released/
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
jQuery 3.6.2 Released! | Official jQuery Blog
blog.jquery.com/2022/12/13/jquery-3-6-2-released/
jQuery 3.6.2 출시.
CSS Variables 버그 수정, <template>에 하던 .contains() 수정.
CSS 셀렉터 :has() 사양 문제로 jQuery 1.3 이후에 영향이 있었지만, 사양과 Chrome이 수정되었다.
Vite 4.0 is out! | Vite
vitejs.dev/blog/announcing-vite4.html
Vite 4.0 출시.
SWC 지원하는 @vitejs/plugin-react-swc 추가, ES2020 출력되도록 변경, CSS를 문자열로 임포트하는 방법 변경 등
Announcing SvelteKit 1.0
svelte.dev/blog/announcing-sveltekit-1.0
SvelteKit 1.0 출시.
Storybook 7.0 beta
storybook.js.org/blog/7-0-beta/
Storybook 7.0 beta 출시.
webpack4, IE11, Node.js 14 지원 종료, storiesOf API 기본값 무효화 등.
CSF3 기본값화, Vite 지원, Test runner와 Code Coverage 지원 등
Release v1.29.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.29.0
playwright v1.29.0 출시.
route.fetch() 추가, locator.all() 추가, expect().toPass 추가.
테스트 실패 시에, 페이지 전체 스크린샷을 찍는 fullPage 옵션 추가 등
Node v19.3.0 (Current) | Node.js
nodejs.org/en/blog/release/v19.3.0/
Node.js v19.3.0 출시.
Node.js에서 npm 업데이트에 의한 "Major Update" 정의하여, npm 9.2.0으로 업그레이드
Release v0.16.10 · evanw/esbuild
github.com/evanw/esbuild/releases/tag/v0.16.10
esbuild v0.16.10 출시.
--legal-comments 기본값을 복구, 라이센스와 그 라이센스 주석의 근간이 되는 파일 각각을 주석에 포함할 수 있도록 변경.
읽을거리
Find the most expensive CSS selectors
devtoolstips.org/tips/en/find-expensive-selectors/
MSEdge의 DevTools에서, CSS 셀렉트 처리 시간이나 매치 회수를 보는 방법에 대해
Help choose the syntax for CSS Nesting | WebKit
webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/
CSS 네스트 구문 Proposal로 어떤 구문이 알기 쉬운가 앙케이트가 실시되었다
Web Performance Calendar » Web Performance APIs Appreciation Post
calendar.perfplanet.com/2022/web-performance-apis-appreciation-post/
새로운 웹 퍼포먼스 API 대한 소개 글.
Render blocking status, Offscreen Canvas, OfflineAudioContext.
Async Image Decoding, Image.decode(), loading=lazy, fetchpriority, 103 Early Hints 등에 대해
Prisma Client Just Became a Lot More Flexible
www.prisma.io/blog/client-extensions-preview-8t3w27xkrxxn
Prisma에 Prisma Client extensions 확장 기능의 미리보기가 구현되었다.
PrismaClient 대상 메서드 추가, 필터 처리 추가, 쿼리 대상 처리 추가 등이 가능하도록 한 확장 기능
웹사이트, 서비스, 문서
RUM Archive - Homepage
Akamai mPulse의 익명화 RUM 데이터셋 아카이브가 공개되어 있는 사이트.
익명화된 브라우저 정보나 Web Vitals 등 웹 퍼포먼스에 관련한 RUM 데이터를 BigQuery에 공개하고 있다.
대규모 RUM 데이터셋를 BigQuery에서 분석 가능.
소프트웨어, 도구, 라이브러리
bluwy/publint: Lint packaging errors
npm 패키지의 Lint 도구.
package.json에 main이나 exports 필드가 각각의 환경에 호환성이 있는 방법으로 작성되어 있는가 검사하는 도구
