Chrome 75의 새로운 기능

Pete LePage

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

저는 피트 르페이지입니다. Chrome 75에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

변경 로그

이 도움말에서는 주요 변경사항 중 일부만 다룹니다. Chrome 75의 추가 변경사항은 아래 링크를 참고하세요.

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

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

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

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

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

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

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 채널을 구독하세요. 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

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

사진 제공