Chrome 75의 새로운 기능

피트 레페이지

Chrome 75에서는 다음에 대한 지원이 추가되었습니다.

저는 Pete LePage입니다. 지금부터 Chrome 75의 개발자를 위한 새로운 기능을 알아보겠습니다

변경 로그

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

지연 시간이 짧은 canvas 컨텍스트에 대한 힌트

캔버스 요소로 화면에 그리려면 페이지에서 그래픽 업데이트를 DOM과 동기화해야 합니다. 이러한 동기화로 인해 지연 시간이 발생하는 경우도 있습니다. 예를 들어 그리기 앱에서 50밀리초보다 긴 지연 시간은 손과 눈의 협응을 방해하여 사용하기 어려워질 수 있습니다.

desynchronized 힌트는 canvas 컨텍스트를 만들 때 일반적인 DOM 업데이트 메커니즘을 우회하는 다른 코드 경로를 사용합니다. 힌트는 합성을 최대한 많이 건너뛰도록 시스템에 지시합니다. 경우에 따라 canvas의 기본 버퍼가 화면의 디스플레이 컨트롤러로 직접 전송됩니다. 이렇게 하면 렌더기 컴포지터 큐를 사용할 때 발생하는 지연 시간이 사라집니다.

비동기식 힌트를 사용하는 방법은 간단합니다. 캔버스를 만들 때 옵션 객체에 desynchronized: true를 추가하기만 하면 됩니다.

const opts = { desynchronized: true };
const ctx = canvas.getContext('2d', opts);

기능 감지 방법을 비롯한 자세한 내용은 조의 비동기식 힌트를 사용한 짧은 지연 시간 렌더링 문서를 참고하세요.

Web Share API로 파일 공유

Web Share API를 사용하면 OS에서 제공하는 공유 서비스에 연결하여 웹페이지 및 앱을 사용자 기기에 설치된 다른 앱과 쉽게 공유할 수 있습니다.

Chrome 75에서는 이제 Web Share API가 파일 공유를 지원합니다. 앱이 사진, 동영상 등을 훨씬 더 쉽게 공유할 수 있게 된다는 점에서 특히 기대가 됩니다. Squoosh는 파일 압축을 완료한 후 파일을 공유하도록 이 기능을 지원합니다. Web Share API는 현재 오디오 파일, 이미지, 동영상, 텍스트 문서의 공유를 지원합니다.

기능 감지를 사용하여 Web Share API가 지원되는지 확인하고 지원되지 않으면 기존 메커니즘으로 대체하는 것이 가장 좋습니다. navigator.canShare를 사용하여 파일 공유가 지원되는지 확인할 수 있습니다.


const webShareAvailable = {
  links: 'share' in navigator,
  files: 'canShare' in navigator,
};

navigator.canShare가 true를 반환하면 이러한 파일의 공유가 지원되므로 navigator.share를 호출하고 공유하려는 파일의 배열이 포함된 객체를 전달할 수 있습니다. Chrome에서 시스템 공유 시트를 열고 파일을 공유할 수 있는 설치된 앱 목록을 표시합니다.

if (webShareAvailable.files) {
  const shareData = { files: filesArray };
  if (navigator.canShare(shareData)) {
    shareData.title = 'Squooshed files.';
    navigator.share(shareData)
      .then(...)
      .catch(...);
  } else {
    // File sharing not supported
  }
}

자세한 내용은 데모를 사용해 보고 웹 공유로 파일 공유 도움말을 확인하세요.

숫자 구분자

이제 숫자 리터럴에서 가독성을 높이기 위해 구분자로 밑줄이 허용 (_, U+005F)됩니다. 예를 들어 1_000_000_000는 수학 연산에서 1000000000와 같다고 해석됩니다.

밑줄은 숫자 사이에만 표시될 수 있으며 연속된 밑줄은 허용되지 않습니다. 따라서 3._14, _2.71 또는 1.6__2와 같은 리터럴은 유효하지 않습니다.

Google I/O 2019 마무리

I/O에 참석하지 않았거나 참석하지 않았으며 모든 대담을 보지 못했다면 Chrome 개발자 YouTube 채널의 Google I/O 2019 웹 재생목록에서 확인하세요.

구독

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

저는 Pete LePage입니다. Chrome 76이 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다

사진 제공