Chrome 95의 새로운 기능

Pete LePage

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

  • 브라우저에 URLPattern가 내장되어 있어 라우팅이 더 쉬워집니다.
  • Eye Dropper API는 색상을 선택하는 내장 도구를 제공합니다.
  • 이제 축소된 UA 문자열을 수신하도록 선택할 수 있는 새로운 오리진 트라이얼이 있습니다.
  • PWA Summit 동영상은 모두 온라인에서 시청할 수 있습니다.
  • 그 밖에도 다양한 기능이 있습니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 95에서 개발자를 위해 새로 제공되는 기능을 자세히 살펴보겠습니다.

URLPattern를 사용한 라우팅

거의 모든 웹 앱은 디스크의 파일에 경로를 매핑하는 서버에서 실행되는 코드이든 URL이 변경될 때 DOM을 업데이트하는 싱글페이지 앱의 로직이든 어떤 방식으로든 라우팅에 종속됩니다. URLPattern는 라우팅 패턴 문법을 표준화하는 새로운 웹 플랫폼 API입니다.

기존 프레임워크의 기반을 기반으로 하여 일반적인 라우팅 작업을 더 쉽게 실행할 수 있습니다. 예를 들어 전체 URL 또는 URL 경로와 일치시킨 후 토큰 및 그룹 일치에 관한 정보를 반환합니다.

Express, Ruby on Rails 또는 path-to-regexp에서 사용되는 라우팅 문법에 이미 익숙하다면 이 구문도 익숙할 것입니다.

이를 사용하려면 새 URLPattern()를 만들고 패턴 일치를 적용할 세부정보를 제공합니다. 패턴에는 와일드 카드, 이름이 지정된 토큰 그룹, 정규 표현식 그룹, 그룹 수정자가 포함될 수 있습니다.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

예를 들어 Google Docs에서 사용할 수 있는 URLPattern를 살펴보겠습니다. 파일의 kind, 파일 ID, 파일을 열 mode를 지정합니다. 그런 다음 패턴을 사용하려면 test() 또는 exec()를 호출하면 됩니다.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern는 Chrome 및 Edge 버전 95 이상에서 기본적으로 사용 설정되어 있습니다. 아직 URL 패턴을 지원하지 않는 브라우저나 Node와 같은 환경의 경우 urlpattern-polyfill 라이브러리를 사용할 수 있습니다.

자세한 내용은 제프의 도움말 URLPattern을 사용해 웹 플랫폼에 라우팅 적용을 참고하세요.

Eye Dropper API로 색상 선택

제가 사용해 본 거의 모든 디자인 앱에는 아이드롭퍼 도구가 있어 색상을 쉽게 파악할 수 있습니다. 일부 브라우저에는 <input type=color>에 아이드롭퍼 기능이 내장되어 있지만 이상적이지는 않습니다.

Microsoft의 일부 직원이 구현한 아이 드롭퍼 API는 이 기능을 웹에 제공합니다. 이를 사용하려면 새 EyeDropper() 인스턴스를 만든 다음 이 인스턴스에서 open()를 호출합니다.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

다른 많은 최신 웹 API와 마찬가지로 비동기식으로 작동하므로 기본 스레드를 차단하지 않습니다. 사용자가 원하는 색상을 클릭하면 클릭한 색상으로 해결됩니다.

간단한 데모를 사용해 보고 Glitch에서 코드를 확인할 수 있습니다.

PWA Summit

이달 초에 열린 PWA Summit에 참석하셨나요?

많은 분들이 PWA에 관해 이야기하고 경험을 공유해 주셔서 기뻤습니다. 놓친 경우 동영상이 모두 게시되어 있으니 PWASummit.org 또는 PWA Summit YouTube 채널에서 확인하세요.

사용자 에이전트 축소 오리진 트라이얼

사용자 에이전트 축소는 사용자 에이전트 문자열의 정보를 브라우저의 브랜드 및 주요 버전, 데스크톱 또는 모바일 구분, 실행 중인 플랫폼으로만 줄여 패시브 디지털 지문 수집 노출 영역을 줄이기 위한 노력입니다.

Chrome 95부터 축소된 UA 문자열을 지금 수신하도록 선택할 수 있는 새로운 오리진 트라이얼이 제공됩니다. 이렇게 하면 축소된 UA가 Chrome에서 기본 동작이 되기 전에 문제를 발견하고 해결할 수 있습니다.

변경사항은 여러 출시에 걸쳐 점진적으로 적용되지만 준비하고 테스트하는 데 필요한 모든 것이 지금 바로 준비되어 있습니다.

모든 세부정보와 타임라인은 developer.chrome.com의 사용자 에이전트 축소 오리진 트라이얼 게시물에 나와 있습니다.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

  • Storage Foundation API 작업을 따라왔다면 새로운 액세스 핸들의 출처 체험판이 있습니다.
  • 이제 WebAssembly는 예외가 발생할 때 코드가 제어 흐름을 중단할 수 있는 예외 처리 지원을 제공합니다.
  • 내년에 Chrome 100이 출시됩니다. 이제 코드가 두 자리가 아닌 더 많은 숫자를 처리할 수 있는지 확인해야 합니다.

추가 자료

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

구독

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

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