Chrome 124의 새로운 기능

Pete LePage

Chrome 124의 주요 내용은 다음과 같습니다.

전체 내용을 확인하고 싶으신가요? Chrome 124 출시 노트를 확인하세요.

JavaScript에서 선언적 섀도우 DOM 사용

선언적 섀도우 DOM을 JavaScript에서 사용할 수 있는 두 가지 새로운 API가 있습니다.

setHTMLUnsafe()는 innerHTML와 유사하며 요소의 내부 HTML을 제공된 문자열로 설정할 수 있습니다. 이는 다음과 같이 선언적 섀도우 DOM이 포함된 HTML이 있는 경우에 유용합니다.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

innerHTML만 사용하면 브라우저에서 올바르게 파싱하지 못하고 섀도우 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 Stream API

WebSockets는 폴링에 의존하지 않고 사용자의 브라우저와 서버 간에 데이터를 주고받는 데 매우 유용합니다. 이는 정보가 들어오는 즉시 처리해야 하는 채팅 앱과 같은 경우에 적합합니다.

하지만 데이터가 처리할 수 있는 속도보다 빠르게 도착하면 어떻게 해야 할까요?

이를 역압력이라고 하며 심각한 문제를 일으킬 수 있습니다. 안타깝게도 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 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 펫 르페이지입니다. Chrome 125가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.