다음은 Chrome 124의 주요 기능입니다.
- JavaScript에서 선언적 Shadow DOM을 사용할 수 있는 두 가지 새로운 API가 있습니다.
- 웹 소켓의 스트림을 사용할 수 있습니다.
- 보기 전환이 더욱 개선되었습니다.
- 이 외에도 다양한 기능이 준비되어 있습니다.
전체 내용을 확인하고 싶으신가요? Chrome 124 출시 노트를 확인하세요.
JavaScript에서 선언적 Shadow DOM 사용
JavaScript에서 선언적 Shadow DOM을 사용할 수 있는 두 가지 새로운 API가 있습니다.
setHTMLUnsafe()
는 innerHTML
와 유사하며, 이 기능을 사용하면 요소의 내부 HTML을 제공된 문자열로 설정할 수 있습니다. 이렇게 하면 이와 같이 선언적 Shadow DOM이 포함된 HTML이 있을 때 유용합니다.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
innerHTML
만 사용하면 브라우저가 제대로 파싱하지 않으며 Shadow DOM이 없습니다. 그러나 setHTMLUnsafe()
를 사용하면 Shadow DOM이 생성되고 요소가 예상대로 파싱됩니다.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
다른 API는 parseHTMLUnsafe()
이며 DOMParser.parseFromString()
와 비슷하게 작동합니다.
이 두 API는 모두 안전하지 않습니다. 즉, 입력 정리를 하지 않습니다. 따라서 먹이를 주는 것은 안전해야 합니다. 향후 출시에서는 입력 삭제를 제공하는 버전이 표시될 것으로 예상됩니다.
마지막으로, 이 두 API 모두 이미 최신 버전의 Firefox 및 Safari에서 지원되고 있습니다.
WebSocket 스트림 API
WebSocket은 폴링에 의존하지 않고 사용자 브라우저와 서버 간에 데이터를 오가는 데 매우 유용합니다. 이 기능은 정보가 들어오는 즉시 처리해야 하는 채팅 앱과 같은 경우에 유용합니다.
하지만 데이터가 내가 처리할 수 있는 것보다 더 빨리 도착하면 어떻게 해야 할까요?
이를 배압이라고 하며 심각한 두통을 유발할 수 있습니다. 안타깝게도 WebSocket API에는 백 프레셔를 처리할 수 있는 좋은 방법이 없습니다.
WebSocket Stream API는 스트림과 웹 소켓의 성능을 제공하므로 추가 비용 없이 백 프레셔를 적용할 수 있습니다.
먼저 새 WebSocketStream
를 생성하고 여기에 WebSocket 서버의 URL을 전달합니다.
const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();
while (true) {
const {value, done} = await reader.read();
if (done) {
break;
}
const result = await process(value);
await writer.write(result);
}
그런 다음 연결이 열릴 때까지 기다립니다. 결과적으로 ReadableStream
및 WritableStream
이 발생합니다. ReadableStream.getReader()
메서드를 호출하면 ReadableStreamDefaultReader
가 반환되며, 그런 다음 스트림이 완료될 때까지 데이터를 read()
할 수 있습니다.
데이터를 쓰려면 WritableStream.getWriter()
메서드를 호출합니다. 이 메서드는 WritableStreamDefaultWriter
를 제공한 후 데이터를 write()
할 수 있습니다.
보기 전환 개선
뷰 전환 기능을 발표하게 되어 기쁘게 생각합니다. Chrome 124에는 뷰 전환을 더 쉽게 하도록 설계된 두 가지 새로운 기능이 있습니다.
탐색으로 인해 문서가 새 문서로 대체되면 문서의 창 객체에서 pageswap
이벤트가 실행됩니다.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
또한 문서 렌더링 차단 기능을 사용하면 중요한 콘텐츠가 파싱될 때까지 문서 렌더링을 차단하여 모든 브라우저에서 일관된 첫 페인트를 보장할 수 있습니다.
그 외에도 다양한 기능 제공
물론 더 많은 기능이 있습니다.
disallowReturnToOpener
는 사용자가 시작 탭으로 돌아갈 수 있는 버튼을 PIP 모드 창에 표시해서는 안 된다고 브라우저에 알려줍니다.키보드 포커스 가능 스크롤 컨테이너는 순차 포커스 탐색을 사용하여 스크롤 컨테이너에 포커스 가능하게 만들어 접근성을 개선합니다.
범용 설치를 사용하면 사용자가 현재 PWA 기준을 충족하지 않는 페이지를 포함하여 모든 페이지를 설치할 수 있습니다.
추가 자료
여기에서는 몇 가지 주요 사항만 다룹니다. 다음 링크에서 Chrome 124의 추가 변경사항을 확인하세요.
- Chrome 124 출시 노트
- Chrome DevTools의 새로운 기능 (124)
- Chrome 124용 ChromeStatus.com 업데이트
- Chromium 소스 저장소 변경사항 목록
- Chrome 출시 캘린더
구독
최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 125가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.