Chrome 95의 새로운 기능

Pete LePage

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

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

저는 Pete LePage입니다. 집에서 일하고 촬영하고 있습니다. 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으로 웹 플랫폼에 라우팅 도입을 참고하세요.

스포이드 API로 색상 선택

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

Microsoft의 일부 사용자가 구현한 스포이드 API는 이러한 기능을 웹에 제공합니다. 이를 사용하려면 새 EyeDropper() 인스턴스를 만든 다음 open()를 호출하세요.

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

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

PWA Summit

이달 초에 PWA 서밋을 시청하셨나요?

많은 분들이 PWA에 대해 이야기하고 경험을 공유해 주셔서 정말 좋았습니다. 놓치셨다면 모든 동영상이 업로드되어 있으니 PWASummit.org 또는 PWA Summit YouTube 채널에서 확인하세요.

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

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

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

변경사항은 여러 버전에 걸쳐 점진적으로 적용되지만 준비하고 테스트해야 하는 모든 항목은 지금 바로 사용할 수 있습니다.

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

그 외에도 다양한 기능 제공

물론 이 외에도 다양한 기능이 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 95의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

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