이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 103의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

새로운 HTTP 103 상태 코드를 사용하면 페이지가 도달하기 전에 브라우저에서 미리 로드할 콘텐츠를 결정하는 데 도움이 됩니다.
Local Font Access API는 웹 애플리케이션이 사용자의 컴퓨터에 설치된 글꼴을 열거하고 사용할 수 있는 기능을 제공합니다.
AbortSignal.timeout()를 사용하면 비동기 API에서 시간 제한을 더 쉽게 구현할 수 있습니다.
이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 레페이지입니다. 이제 Chrome 103의 개발자를 위한 새로운 기능을 살펴보겠습니다

HTTP 103 상태 코드 103 - 조기 힌트

페이지 성능을 개선할 수 있는 한 가지 방법은 리소스 힌트를 사용하는 것입니다. 브라우저에 나중에 필요할 수 있는 항목에 관한 '힌트'를 제공합니다. 예를 들어 파일 미리 로드 또는 다른 서버에 연결

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

하지만 서버가 최소한 페이지의 일부를 전송할 때까지는 브라우저가 이러한 힌트에 따라 조치를 취할 수 없습니다.

브라우저에서 페이지를 요청하지만 서버에서 페이지를 생성하는 데 수백 밀리초가 필요하다고 가정해 보겠습니다. 브라우저가 페이지를 수신하기 시작할 때까지 그냥 그대로 대기합니다. 하지만 페이지에 항상 특정 하위 리소스 집합(예: CSS 파일, JavaScript, 이미지 몇 개)이 필요하다는 사실을 서버에서 알고 있다면 즉시 새로운 HTTP 103 Early Hints 상태 코드로 응답하고 브라우저에 이러한 하위 리소스를 미리 로드하도록 요청할 수 있습니다.

그런 다음 서버가 페이지를 생성하면 일반 HTTP 200 응답을 통해 해당 페이지를 전송할 수 있습니다. 페이지가 나타나면 브라우저가 이미 필요한 리소스를 로드하기 시작했습니다.

새로운 HTTP 상태 코드이므로 사용하려면 서버를 업데이트해야 합니다.

HTTP 103 초기 힌트 시작하기:

로컬 글꼴 액세스 API

웹의 글꼴은 항상 어려운 일이며 특히 사용자가 자신만의 그래픽과 디자인을 만들 수 있는 앱의 경우 더욱 그렇습니다. 지금까지는 웹 앱에서 실제로 웹 글꼴만 사용할 수 있었습니다. 사용자가 컴퓨터에 설치한 글꼴 목록을 가져올 방법이 없었습니다. 또한 자체 맞춤 텍스트 스택을 구현해야 하는 경우 매우 중요한 전체 글꼴 표 데이터에 액세스할 방법이 없었습니다.

새로운 Local Font Access API는 웹 애플리케이션이 사용자 기기의 로컬 글꼴을 열거할 수 있는 기능을 제공하고 글꼴 테이블 데이터에 대한 액세스를 제공합니다.

기기에 설치된 글꼴 목록을 가져오려면 먼저 권한을 요청해야 합니다.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

그런 다음 window.queryLocalFonts()를 호출합니다. 사용자 기기에 설치된 모든 글꼴의 배열을 반환합니다.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

글꼴의 하위 집합에만 관심이 있다면 postscriptNames 매개변수를 추가하여 필터링할 수 있습니다.

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

자세한 내용은 web.dev에서 톰의 로컬 글꼴로 고급 서체 사용 문서를 참고하세요.

AbortSignal.timeout()을 사용하여 더 쉬운 시간 초과

JavaScript에서 AbortController 및 AbortSignal는 비동기 호출을 취소하는 데 사용됩니다.

예를 들어 fetch() 요청을 할 때 AbortSignal를 만들어 fetch()에 전달할 수 있습니다. fetch()가 반환되기 전에 취소하려면 AbortSignal의 인스턴스에서 abort()를 호출합니다. 지금까지는 특정 시간이 지난 후에 취소하려면 setTimeout()에 래핑해야 했습니다.

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

다행히 AbortSignal의 새로운 timeout() 정적 메서드를 사용하여 이 작업이 더 쉬워졌습니다. 지정된 밀리초 후에 자동으로 취소되는 AbortSignal 객체를 반환합니다. 이전에는 몇 줄의 코드였지만 이제는 한 줄 뿐입니다.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout()는 Chrome 103에서 지원되며 이미 Firefox, Safari에서 지원됩니다.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

이제 웹 공유를 통해 avif 이미지 파일 형식을 공유할 수 있습니다.
이제 Chromium이 URL 변경 직후 popstate를 실행하여 Firefox와 일치시킵니다. 이제 이벤트 순서는 popstate, 두 플랫폼 모두 hashchange입니다.
Element.isVisible()는 요소의 표시 여부를 알려줍니다.

참고: 동영상에서 Element.isVisible()를 안정화 버전으로 사용할 수 있다고 언급했지만 현재는 기능 플래그 뒤에만 사용할 수 있습니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. Chrome 103의 추가 변경사항은 아래 링크를 확인하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

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