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 이상에서 기본적으로 사용 설정됩니다. Node와 같이 아직 지원되지 않는 브라우저나 환경의 경우 urlpattern-polyfill 라이브러리를 사용할 수 있습니다.

자세한 내용은 Jeff의 자료 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의 사용자 에이전트 축소 오리진 트라이얼 게시물에 나와 있습니다.

그 외에도 다양한 기능 제공

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

추가 자료

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

구독

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

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