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 조기 힌트 상태 코드로 응답하고 브라우저에 이러한 하위 리소스를 미리 로드하도록 요청할 수 있습니다.

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

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

HTTP 103 조기 힌트 시작하기:

• 조기 힌트 설명
• Apache 2 조기 힌트 구성
• Cloudflare에서 조기 힌트 사용
• 서버 푸시 이외의 Fastly: 103 사전 힌트 상태 코드

Local Font Access 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()는 요소의 표시 여부를 알려줍니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 103의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (103)
• Chrome 103 지원 중단 및 삭제
• Chrome 103의 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 캘린더

구독

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

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