Fork me on GitHub

2022-05-17: Solid v1.4.0, playwright v1.22.0, Safari 15.5

Translator: Daewon Seo Edit on GitHub See Revisions

JSer.info #592 - Solid 1.4.0이 릴리스 됐다.

createStore로 톱레벨의 배열을 지원, deferStream 옵션 추가, createResource에서 항상 최신 값을 가져오는 .latest 프로퍼티가 추가 되었다.
또한, Custom Renderers를 여러 조합으로 이용할 수 있게 되었다.


playwright v1.22.0가 릴리스 됐다.

Playwright Test에 Component Testing이 실험적으로 구현되었다.

WAI-ARIA role 등의 요소를 선택 가능한 Role selector의 대응.
또한 Screenshot Assertion의 안전성을 위해, expect(page).toHaveScreenshot()에서 스크린샷을 촬영하는 경우에는 기본값으로 애니메이션을 무효화하는 등의 변경이 포함되었다.


Safari 15.5가 릴리스 됐다.

Safari 15.4는 기능추가가 중심이 되었지만, Safari 15.5는 버그 수정이 중심이 됐다.

HTML의 inert 속성의 지원, CSP에서 worker-src 디렉티브의 지원 등이 추가되었다.
버그 수정 내용에 따르면 background-attachement: fixed의 버그 수정, position: sticky의 버그 수정, HLS 재생시 버그 수정, WebGL의 multisampling의 수정 등이 포함되어 있다.


헤드라인


Release v8.10.0 · npm/cli

github.com/npm/cli/releases/tag/v8.10.0

npm ReleaseNote

npm v8.10.0 릴리스.
--omit-lockfile-registry-resolved 플래그 추가.


Improving the HTTP Archive pipeline and dataset by 10x - Announcements - HTTP Archive

discuss.httparchive.org/t/improving-the-http-archive-pipeline-and-dataset-by-10x/2372

HTTP web BigQuery news

HTTP Archive의 아키텍처가 변경되어, 데이터 셋이 10 배가 된다고 발표.
데이터량의 증가로 인해 BigQuery의 쿼리 비용이 증가된다는 가능성. 또한 홈페이지부터 보조 페이지의 크롤에 대응할 예정.


Node.js 16.x runtime now available in AWS Lambda | AWS Compute Blog

aws.amazon.com/jp/blogs/compute/node-js-16-x-runtime-now-available-in-aws-lambda/

aws Lambda ReleaseNote

AWS Lambda에서 Node.js 16가 이용할 수 있게 되었다.


Announcing TypeScript 4.7 RC - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-7-rc/

TypeScript ReleaseNote

TypeScript 4.7 RC의 릴리스.
Beta에서의 변경점으로, Node.js는 EOL이 되었기 때문에, target의 지정은node16로 변경되었다.


Release v1.4.0 - Level Up! · solidjs/solid

github.com/solidjs/solid/releases/tag/v1.4.0

JavaScript library

Solid v1.4.0 릴리스
createStore에서 톱레벨의 배열을 지원, deferStream 옵션 추가, createResource에서 항상 최신 값을 가져오는 .latest 프로퍼티 추가.
또한, Custom Renderers를 여러 조합으로 이용할 수 있게 된 점 등.


Release v7.1.0 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v7.1.0

pnpm ReleaseNote

pnpm v7.1.0 릴리스.
package.jsonlibc 필드의 지원 등


Release v1.22.0 · microsoft/playwright

github.com/microsoft/playwright/releases/tag/v1.22.0

browser testing library ReleaseNote

playwright v1.22.0의 릴리스
Playwright Test에서 Component Testing 실험적 구현, WAI-ARIA role 등에서 요소를 선택 가능한 Role selector의 대응。
또한 Screenshot Assertion의 안전성을 위해 디폴트로서 애니메이션의 무효화 등의 변경점이 포함되었다.


Release Notes for Safari Technology Preview 145 | WebKit

webkit.org/blog/12629/release-notes-for-safari-technology-preview-145/

safari ReleaseNote

Safari Technology Preview 145 릴리스.
Container Queries의 지원 개선, <dialog> 요소의 다크모드 대응, setTimeout(fn, 0)으로 설정했을 때 자동적으로 추가되는 1ms의 clamp를 삭제.
Service Workers에 WindowClient.navigate()WindowClient.openWindow()의 구현 등


New WebKit Features in Safari 15.5 | WebKit

webkit.org/blog/12669/new-webkit-features-in-safari-15-5/

safari ReleaseNote

Safari 15.5 릴리스.
HTML의 inert 속성 지원, CSP에서 worker-src 디렉티브 지원.
그 외에는 background-attachement: fixed의 버그 수정, position: sticky의 버그 수정, HLS 재생시의 버그 수정, WebGL의 multisampling의 버그 수정 등


아티클


Meta Open Source is transferring Jest to the OpenJS Foundation

engineering.fb.com/2022/05/11/open-source/jest-openjs-foundation/

JavaScript testing OpenSource article news

Meta사 외에 다른 사람들의 Contributions 많아져 Jest가 OpenJS Foundation에 이관된다.


슬라이드, 동영상 관련


Web 프런트엔드 기초연수 ~ 역사부터 배움, 현장의 스탠다드한 개발~ - 구글 슬라이드

docs.google.com/presentation/d/e/2PACX-1vSjF1cp8fAdMKwFkLmtFT66e-UCD6zanO5KLsuRFmWyZ-8c06YQmgWT750Aqai2JfqHRARYWlkDLfaB/pub#slide=id.gb7224c087c00

HTML JavaScript CSS slide

SPA, React, TypeScript, SSR, CDN에 관한 도입적 슬라이드


핸들링 최적화 매니악스 at tfconf - Speaker Deck

speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf

JavaScript performance slide

TreeShaking과 Dead Code Elimination에 관한 슬라이드。
Bundler(rollup)와 Minifier(terser)가 어떤 방식으로 정수전개 혹은 불안한 코드를 삭제하는 지에 관하여


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


JavascriptDB

javascriptdb.com/

JavaScript SQLite library

SQLite을 사용한 ORM적인 요소가 들어간 JavaScript DB。
데이터를 배열 혹은 객체로서 읽고 쓰기가 가능하며, filter 나 push 등의 API가 그대로 db로 읽고 쓰기가 가능해진다.


i-net-software/JWebAssembly: Java bytecode to WebAssembly compiler

github.com/i-net-software/JWebAssembly

Java WebAssembly

Java bytecode를 WebAssembly에 컴파일 가능한 컴파일러.
Java를 브라우저에서 실행하기 위한 목적


wooorm/starry-night: Syntax highlighting, like GitHub

github.com/wooorm/starry-night

JavaScript library

textmate 구문을 지원하는 Syntax highlighter 라이브러리.
github/linguist의 정의 등을 이용하여, 파일 사이즈는 크지만 Github이나 에디터와 같이 하이라이트를 작성하기 위한 목적


dflex-js/dflex: The sophisticated Drag and Drop library you've been waiting for 🥳

github.com/dflex-js/dflex

JavaScript library

UI 프레임워크에 의존하지 않는 D&D 라이브러리


alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

github.com/alan2207/bulletproof-react

React architecture document

React 어플리케이션에 관한 아키텍처 가이드.
프로젝트 구성, 스타일, 디렉터리 구조, 컴포넌트, 상태관리, 테스트, 에러 처리, 보안, 성능 등에 관한 예제를 정리한 것


esbuild-kit/tsx: Node.js runtime enhanced with esbuild for loading TypeScript & ESM

github.com/esbuild-kit/tsx

TypeScript jsx node.js library

esbuild를 사용한 TypeScript로 변환하여 실행하는 도구.
ESM과 CJS를 각각 다루는 loader를 갖고 있어, package.json의 type 필드에 의해 자동적으로 loader를 변환하여 다룰 수 있다.


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