이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 72의 새로운 기능

Pete LePage

Twitter GitHub Glitch Mastodon 홈페이지

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

자바스크립트로 공개 클래스 필드를 만드는 방법이 훨씬 깔끔해졌습니다.
새로운 User Activation API로 페이지가 활성화되었는지 확인할 수 있습니다.
Intl.format() API를 사용하면 목록 현지화가 훨씬 더 쉬워집니다.

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 72의 개발자를 위한 새로운 기능을 알아보겠습니다

변경 로그

여기에서는 일부 주요 특징만 다룹니다. Chrome 72의 추가 변경사항은 아래 링크를 확인하세요.

공개 클래스 필드

제 첫 번째 언어는 자바였습니다. 자바스크립트를 배우면서 약간의 루프가 필요했습니다. 수업은 어떻게 만들었나요? 상속인가요? 공개 및 비공개 속성과 메서드는 어떤가요? 최근 많은 자바스크립트 업데이트로 인해 객체 지향 프로그래밍이 훨씬 더 쉬워졌습니다.

이제 예상한 대로 생성자, getter 및 setter, 정적 메서드, 공개 속성으로 완성된 클래스를 만들 수 있습니다.

Chrome 72와 함께 제공되는 V8 7.2 덕분에 이제 클래스 정의에서 공개 클래스 필드를 직접 선언하여 생성자에서 이를 수행할 필요가 없습니다.

class Counter {
  _value = 0;
  get value() {
    return this._value;
  }
  increment() {
    this._value++;
  }
}

const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1

비공개 클래스 필드 지원이 진행 중입니다.

자세한 내용은 마티아스의 클래스 필드 문서를 참조하세요.

사용자 활성화 API

페이지가 로드되는 즉시 사이트에서 자동으로 소리를 재생할 수 있는 경우를 기억하시나요? 서둘러 음소거 키를 누를 수도 있고, 어느 탭인지 파악하고 닫을 수 있습니다. 그렇기 때문에 일부 API는 작동하기 전에 사용자 동작을 통한 활성화를 요구합니다. 불행히도 브라우저는 여러 가지 방식으로 활성화를 처리합니다.

Chrome 72에는 모든 게이트 API의 사용자 활성화를 간소화하는 사용자 활성화 v2가 도입되었습니다. 모든 브라우저에서 활성화가 작동하는 방식을 표준화하는 것을 목표로 하는 새로운 사양을 기반으로 합니다.

navigator 및 MessageEvent에 모두 hasBeenActive 및 isActive의 두 속성을 가진 새 userActivation 속성이 있습니다.

hasBeenActive는 연결된 창이 수명 주기에서 사용자 활성화를 본 적이 있는지를 나타냅니다.
isActive는 연결된 창이 현재 수명 주기에 사용자 활성화를 포함하는지 나타냅니다.

자세한 내용은 API 간에 사용자 활성화를 일관되게 만들기를 참고하세요.

`Intl.format`로 항목 목록 현지화

Intl API는 정말 유용하며 콘텐츠를 다른 언어로 현지화하는 데 매우 유용합니다. Chrome 72에는 목록을 더 쉽게 렌더링할 수 있는 새로운 .format() 메서드가 있습니다. 다른 Intl API와 마찬가지로 성능 저하 없이 자바스크립트 엔진으로 부담을 돌립니다.

원하는 언어로 초기화한 다음 format를 호출합니다. 그러면 올바른 단어와 문법이 사용됩니다. 이때 접속사는 and의 현지화된 등가를 더하는 접속사를 수행할 수 있습니다 (그리고 아름다운 옥스퍼드 쉼표도 살펴보세요). 이는 or의 로컬 등가를 추가하여 분리를 할 수 있습니다. 몇 가지 추가 옵션을 제공하면 더 많은 작업을 할 수 있습니다.

const opts = {type: 'disjunction'};
const lf = new Intl.ListFormat('fr', opts);
lf.format(['chien', 'chat', 'oiseau']);
// → 'chien, chat ou oiseau'
lf.format(['chien', 'chat', 'oiseau', 'lapin']);
// → 'chien, chat, oiseau ou lapin'

자세한 내용은 Intl.ListFormat API 게시물을 참고하세요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 72의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

Chrome 72에서는 사양과 더 잘 일치하도록 Cache.addAll()의 동작이 변경되었습니다. 이전에는 동일한 호출에 중복된 항목이 있는 경우 이후 요청에서 첫 번째 항목을 덮어씁니다. 사양과 일치시키기 위해 중복 항목이 있으면 InvalidStateError과 함께 거부됩니다.
요청 URL이 서비스 워커와 동일한 출처에 있는 한, 이제 파비콘 요청은 서비스 워커에 의해 처리됩니다.

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

저는 Pete LePage입니다. Chrome 73이 출시되면 바로 이곳에서 Chrome의 새로운 소식을 알려드리겠습니다.