Chrome 72의 새로운 기능

Chrome 72에서는 다음을 지원합니다.

  • 이제 JavaScript에서 public 클래스 필드를 훨씬 더 깔끔하게 만들 수 있습니다.
  • User Activation API를 사용하여 페이지가 활성화되었는지 확인할 수 있습니다.
  • Intl.format() API를 사용하면 목록을 더 쉽게 현지화할 수 있습니다.

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

저는 피트 르페이지입니다. Chrome 72에서 개발자를 위해 새롭게 제공되는 기능을 자세히 살펴보겠습니다.

변경 로그

이 내용은 주요 내용 중 일부만 다룹니다. Chrome 72의 추가 변경사항은 아래 링크를 참고하세요.

공개 클래스 필드

제 첫 번째 언어는 Java였는데 JavaScript를 배우면서 약간 혼란스러웠습니다. 수업을 만들려면 어떻게 해야 하나요? 아니면 상속인가요? 공개 및 비공개 속성과 메서드는 어떻게 되나요? 객체 지향 프로그래밍을 훨씬 쉽게 만들어주는 최근 JavaScript 업데이트의 상당 부분

이제 생성자, 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

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

자세한 내용은 마티아스의 클래스 필드 도움말을 참고하세요.

User Activation API

페이지가 로드되는 즉시 사이트에서 소리를 자동으로 재생할 수 있었던 때가 있었습니다. 음소거 키를 누르거나 어떤 탭인지 파악하고 닫으려고 애씁니다. 따라서 일부 API는 작동하기 전에 사용자 동작을 통한 활성화가 필요합니다. 안타깝게도 브라우저마다 활성화를 다르게 처리합니다.

사용자가 페이지와 상호작용한 전후에 사용자 활성화 API

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

navigatorMessageEvent 모두에 새로운 userActivation 속성이 있으며, 이 속성에는 hasBeenActiveisActive라는 두 가지 속성이 있습니다.

  • hasBeenActive는 연결된 창이 수명 주기 중에 사용자 활성화를 경험했는지 여부를 나타냅니다.
  • isActive는 연결된 창의 수명 주기에 현재 사용자 활성화가 있는지 나타냅니다.

자세한 내용은 API 전반에서 사용자 활성화 일관성 유지를 참고하세요.

Intl.format를 사용하여 항목 목록 현지화

Intl API가 정말 좋습니다. 콘텐츠를 다른 언어로 현지화하는 데 큰 도움이 됩니다. Chrome 72에는 목록 렌더링을 더 쉽게 하는 새로운 .format() 메서드가 있습니다. 다른 Intl API와 마찬가지로 성능을 저하시키지 않으면서 부담을 JavaScript 엔진으로 전환합니다.

원하는 언어로 초기화한 다음 format를 호출하면 올바른 단어와 문법이 사용됩니다. 연결 부사를 사용할 수 있습니다. 그러면 and에 해당하는 현지화된 단어가 추가됩니다 (아름다운 오크스퍼드 쉼표도 확인해 보세요). 불연결을 실행할 수 있습니다. 즉, 또는의 로컬 등가 항목을 추가합니다. 추가 옵션을 제공하면 더 많은 작업을 할 수 있습니다.

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이 서비스 워커와 동일한 출처에 있는 한 서비스 워커가 favicon 요청을 처리합니다.

구독

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

저는 펫 르페이지입니다. Chrome 73이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.