Chrome 124의 새로운 기능

Pete LePage

다음은 Chrome 124의 주요 기능입니다.

전체 내용을 확인하고 싶으신가요? 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 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 125가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.