Chrome 95의 새로운 기능

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 라이브러리를 사용할 수 있습니다.

자세한 내용은 제프의 웹 플랫폼으로 라우팅하는 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 서밋

이달 초 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의 새로운 기능을 소개해 드리겠습니다.