JSer.info #483 - jQuery 3.5.0이 릴리스됐습니다.

jQuery 3.5.0 Released! | Official jQuery Blog

jQuery 3.5.0에서는 jQuery 4.0에서 삭제될 예정의 비표준 :even, :odd 셀렉터 대신에 사용할 수 있는 .even()과 .odd() 메서드가 추가됐습니다.

또 3.5.0은 마이너 업데이트지만 비호환적 내용을 포함한 보안 업데이트가 이뤄졌습니다. 내용은 다음과 같습니다.

jQuery.htmlPrefilter에서는 정규표현을 사용해 $("<div />")와 같은 XHTML의 self-close 태그를 $("<div></div>")으로 전개하는 처리가 이뤄졌습니다. 이 정규표현의 전개 처리를 이용한 XSS가 발견돼 jQuery 3.5.0에서 이 정규 표현을 이용한 전개를 삭제했습니다.

단일 $("<div />")과 같은 경우는 특별히 이 변경으로 인한 동작 차이가 없습니다.

$('<div/>').append(document.body);
// <div></div>가 추가 됨.

하지만 다음과 같이 self-closed 태그를 복합적으로 사용한 경우 3.4와 3.5의 동작이 달라집니다.

$( "<div/><span/>" ).append(document.body);

jQuery 3.4까지는 jQuery.htmlPrefilter에 의해 다음과 같이 전개됩니다.

<div></div>
<span></span>

jQuery 3.5에서는 위처럼 전개되지 않고 다음과 같이 동작합니다.

<div>
    <span></span>
</div>

이 보안 업데이트로 인해 jQuery를 사용한 라이브러리에도 일부 영향을 미치고 있는 것 같습니다.

3.5 incompatible with FullCalendar 3 · Issue #4664 · jquery/jquery

jQuery Migrate를 사용한 해결법과 상세한 내용은 아래 마이그레이션 가이드 문서에 정리돼 있으니 참고하시길 바랍니다.

jQuery Core 3.5 Upgrade Guide | jQuery

Firefox 75.0이 릴리스됐습니다.

개발자 도구의 콘솔에 Instant evaluation previews 추가, Async Stack Trace을 지원합니다.
자바스크립트에서 Public static fields와 Intl.Locale을 지원합니다.
이 외로 <img loading=lazy>를 이용한 이미지 지연 로드 지원, CSS의 min()/max()/clamp() 지원, Web Animations API의 개선이 이뤄졌습니다.

앞서 릴리스가 연기됐었던 Chrome 81가 릴리스 됐습니다.

New in Chrome 81 | Web | Google Developers

연기로 인해 릴리스 스케줄이 어긋나기 Chrome 82는 생략되고 83이 3주 빠르게 릴리스될 예정입니다.
향후 릴리스 일정은 아래 문서에서 확인할 수 있습니다.

[PR] JavaScript Primer 출간 예정

지난 몇 년간 집필하던 JavaScript Primer라는 자바스크립트 입문서가 2020년 4월 27일 출간될 예정입니다.

JavaScript Primer 헤매지 않기 위한 입문서 | azu, Suguru Inatomi

도서는 Amazon에서 예약할 수 있으니 참고해주세요. 전자책(Kindle/epub/PDF)도 추후 발매됩니다.

도서의 내용은 OSS로 공개하고 있는 웹 버전 https://jsprimer.net/과 동일하지만 레이아웃 등이 책으로 읽기 쉽게 최적화돼 있습니다.

자세한 내용은 아래 문서를 참고해주세요.

JavaScript Primer 도서가 4월 27일에 발매 예정입니다! | Web Scratch(일본어)

헤드라인

Release 10.4.0 · preactjs/preact

github.com/preactjs/preact/releases/tag/10.4.0

React JavaScript library ReleaseNote

Preact 10.4.0이 리릴스 됐습니다.
vnode의 세밀한 비교를 통한 성능 개선, SSR 시에 hydration이 잘 실행되지 않을 때의 fallback이 추가됐습니다.

jQuery 3.5.0 Released! | Official jQuery Blog

blog.jquery.com/2020/04/10/jquery-3-5-0-released/

jQuery ReleaseNote

jQuery 3.5.0이 릴리스 됐습니다.
jQuery.htmlPrefilter의 정규표현을 이용한 태그 전개에 의한 XSS 발생 문제가 수정됐습니다. 이 수정으로 인해 $("<div><div/></div>")처럼 self-closed 태그와 그렇지 않은 태그를 조합해 사용할 경우 다른 버전과 동작이 달라지는 비호환적 변경이 포함됐습니다.
4.0에서 삭제될 예정인 :even, :odd 대신 .even(), .odd()가 추가 됐습니다.

3.5 incompatible with FullCalendar 3 · Issue #4664 · jquery/jquery

Firefox 75: Ambitions for April - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/04/firefox-75-ambitions-for-april/

Firefox ReleaseNote

Firefox 75가 릴리스됐습니다.
개발자 도구 콘솔에 Instant evaluation previews가 추가됐고 Async Stack Trace를 지원합니다.
또, <img loading=lazy>를 이용한 이미지 지연 로드와 CSS의 min()/max()/clamp() 지원하며 Web Animations API가 개선됐습니다.

New in Chrome 81 | Web | Google Developers

developers.google.com/web/updates/2020/04/nic81

Chrome ReleaseNote

앞서 연기 됐던 Chrome 81이 릴리스됐습니다.
다음 Chrome 82는 건너뛰고 83이 3주 빠르게 릴리스됩니다.
Badging API를 지원하며 Intl.DisplayNames 구현됐고 Origin Trial로 Web NFC API가 추가됐습니다.

Release Notes for Safari Technology Preview 104 | WebKit

webkit.org/blog/10264/release-notes-for-safari-technology-preview-104/

webkit safari ReleaseNote

Safari Technology Preview 104가 릴리스됐습니다.
(macOS의 개발 버전에서) HTTP3를 플래그를 붙여 지원하며 CSS의 :is(), WebRTC HEVC(H.265)를 지원합니다.

H265 / HEVC, hardware accelerated, in #Webrtc – DONE … well, almost. | WebRTC by Dr Alex

아티클

Web Animations in Safari 13.1 | WebKit

webkit.org/blog/10266/web-animations-in-safari-13-1/

CSS safari article

Safari 13.1에서 지원하는 Web Animations API를 소개하는 글입니다.

WebSocketStream: integrating streams with the WebSocket API

web.dev/websocketstream/

WebSocket strem article

Promise 기반인 WebSocketStream API를 소개하는 글입니다.
ReadableStream이나 WritableStream 등의 기본적인 사용법, Backpressure, Stream을 닫는 방법 등에 대해서 정리돼 있습니다.

Digging into the Privacy Sandbox

web.dev/digging-into-the-privacy-sandbox/

privacy Chrome article

개인 정보 보호에 관한 API 세트인 Privacy Sandbox를 소개하는 글입니다.
현재 Privacy Sandbox와 관련된 제안이나 개요, 목표 그리고 관련 용어를 설명합니다.

Under-the-hood of web bundlers (e.g. Webpack) - ITNEXT

itnext.io/under-the-hood-of-web-bundlers-e-g-webpack-926e868f7f5e

JavaScript bundler article video

JavaScript의 Bundler를 주제로 한 발표 영상을 글로 정리한 문서입니다.
bundler가 하고 있는 일 설명, 작은 컴파일러를 만들어 보면서 bundler의 동작 소개, 실제 bundler를 사용해 웹 애플리케이션을 출력하는 과정까지 자세히 작성돼 있습니다.

슬라이드, 영상

전자정보학 특론：Chromium 아키텍처를 풀어내다 - Google 슬라이드(일본어)

docs.google.com/presentation/d/1AzBcuN-dmctk7v1IMZHivfpFAiXwCnsjyJS3wQ4sgE4/preview#slide=id.g82989a6582_1_134

Chrome slide architecture security

Chromium의 프로세스 아키텍처를 설명하는 슬라이드입니다.
멀티 프로세스 아키텍처, 임베딩 컨텐츠에서의 Spectre의 메모리 독해, iframe에서의 Site Isolation, Chrome의 GC에 대해서 이야기합니다.
또, 렌더링 처리가 파싱, 스타일, 레이어링, 레스터 단계로 나누고 중간 데이터를 각각 다룸으로써 동적인 변경에 대응하고 있다고 합니다.