JSer.info #551 - Yarn 3.0 릴리스.

Node.js 10 지원 종료, .pnp.cjs로 이름 변경, @yarnpkg/pnpify를 세 개의 패키지로 분할 하는 등의 변경 진행.

@yarnpkg/sdks: Editor SDKs
@yarnpkg/pnpify: PnP와 호환성이 없는 도구를 실행하는 도구
@yarnpkg/nm: node_modules linker

또, exports 필드 지원, pnpm 스러운 하드 링크 지원, 쉘 구문 지원 개선, ESBuild로 bundle을 지원하는 @yarnpkg/esbuild-plugin-pnp가 추가됐다.

Chrome 93 beta 릴리스.

Chromium Blog: Chrome 93: Multi-Screen Window Placement, PWAs as URL Handlers, and More

COEP를 보다 쉽게 도입할 수 있도록 하는 Cross-Origin-Embedder-Policy：credentialless, URL Handlers가 Origin Trial로 추가됐다.
또, AbortSignal.abort() 메서드 지원, Stage 3의 Error cause와 Object.hasOwn를 지원한다.

다크 모드 대응과 관련해 CSS의 prefers-color-scheme media query를 사용해 사용자 에이전트가 어떤 color scheme를 우선하는지 판정했다. 하지만 이 속성은 페이지가 로드되고 난 후 알 수 있으므로 페이지 로드 시점에 해당 판정을 할 수 있도록 Client Hint Header로 Sec-CH-Prefers-Color -Scheme가 추가됐다.
또, navigator.userAgent나 User-Agent 헤더의 다음 모델인 User-Agent Client Hints의 API나 헤더 변경도 함께 이뤄졌다.

Migrate to User-Agent Client Hints

Chrome 92에서는 cross origin iframe 내에서 window.{alert, prompt, confirm}를 사용할 수 없다.

1065085 - Implement window.{alert, prompt, confirm} removal from cross-origin iframes - chromium

이 문제를 대응하는 방법으로 다음과 같은 수단이 이야기된다.

~~Chrome 96(12月)까지 사용할 수 있는~~ Reverse Origin Trial를 활성화
다이얼로그 UI를 직접 작성하는 방법
postMessage를 사용해 부모 문서로 다이얼로그를 출력하는 방법

이 영향으로 CodePen 등 iframe을 사용해 코드를 실행하는 환경, Google Apps Script를 웹 사이트로 공개하고 있는 경우, Salesforce의 일부 기능 등이 동작하지 않게 되는 영향이 나오고 있다.
몇몇 웹사이트에 영향을 끼치는 변경으로 Chrome은 해당 내용을 ~~2021년 8월 15일 까지 연기 했다(Reverse Origin Trial를 위한 유예 기간).~~ 2022년 1월까지 연기 했다.

다른 브라우저도 역시 이 사양을 따를 예정이다.

자세한 내용은 다음 문서에도 정리돼 있으니 참고하길 바란다.

Cross Origin iframe에서 alert/confirm/prompt를 호출할 수 없다 | blog.jxck.io(일본어)

헤드라인

Headless UI v1.4: The One With Tabs – Tailwind CSS

blog.tailwindcss.com/headless-ui-v1-4

React Vue JavaScript library ReleaseNote

Headless UI 1.4 릴리스
Tag 컴포넌트 추가, Disclosures와 Popover의 Panel 내에 Button을 두면 해당 버튼으로 Panel을 닫을 수 있도록 변경

Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-3-0-performances-esbuild-better-patches-e07

yarn ReleaseNote

Yarn 3.0 릴리즈.
Node.js 10 지원 종료, .pnp.cjs로 이름 변경, @yarnpkg/pnpify를 세 개의 패키지로 분해.
exports 필드 지원, pnp 스러운 하드 링크 지원, 쉘 구문 지원 개선, ESBuild 지원 등.

berry/CHANGELOG.md at master · yarnpkg/berry

Release 3.16.0 - 2021.07.30 · zloirock/core-js

github.com/zloirock/core-js/releases/tag/v3.16.0

JavaScript polyfill library ReleaseNote

core.js 3.16.0 릴리스.
Stage 3의 Array#findLast, Stage 1의 Array#filterOut과 Array#groupBy 지원.
Deno도 지원한다.

Node v16.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v16.6.0/

node.js ReleaseNote

Node.js 16.6.0 릴리스.
V8 9.2로 업데이트, http2 보안 수정 등.

V8 release v9.2 · V8

Recoil 0.4 | Recoil

recoiljs.org/blog/2021/07/30/0.4.0-release/

React JavaScript library ReleaseNote

Recoil 0.4 릴리스.
캐쉬 폴리쉬를 ₩cachePolicyUNSTABLE₩로 설정할 수 있고, 트랜잭션을 ₩useRecoilTransactionUNSTABLE₩으로 이용할 수 있다.
또, TypeScript의 타입 개선이 이뤄졌다.

Chromium Blog: Chrome 93: Multi-Screen Window Placement, PWAs as URL Handlers, and More

blog.chromium.org/2021/07/chrome-93-multi-screen-window-placement.html

Chrome ReleaseNote

Chrome 93 beta 릴리스.
Cross-Origin-Embedder-Policy：credentialless과 URL Handlers를 Origin Trial로 추가.
AbortSignal.abort() 메서드 지원, Stage 3의 Error cause와 Object.hasOwn 지원.
Client Hint Header의 Sec-CH-Prefers-Color-Scheme 추가, UA Client Hint 갱신 등.

1065085 - Implement window.{alert, prompt, confirm} removal from cross-origin iframes - chromium

bugs.chromium.org/p/chromium/issues/detail?id=1065085

Chrome security DOM news

Chrome 92에서 cross origin iframe에서의 alert / dialog / prompt가 동작하지 않는다.
회피 방법으로 opt-out Origin Trial(Chrome 95 까지만 유효한 방법), 직접 다이얼로그 UI를 만들기, postMessage를 사용해 부모 문서에서 다이얼 로그를 출력하는 방법 등에 대해서 이야기 나눈 스레드.