Chrome 74의 새로운 기능

Pete LePage

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

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

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

변경 로그

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

비공개 클래스 필드

클래스 필드를 사용하면 생성자 함수가 인스턴스 속성만 정의하지 않아도 되므로 클래스 문법이 간소화됩니다. Chrome 72에는 공개 클래스 필드 지원이 추가되었습니다.

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

그리고 프라이빗 클래스 필드가 준비 중이라고 말했죠. 비공개 클래스 필드가 Chrome 74에 출시되었습니다. 새 비공개 필드 구문은 # (파운드 기호)를 사용하여 필드를 비공개로 표시한다는 점을 제외하면 공개 필드와 비슷합니다. #를 필드 이름의 일부라고 생각하면 됩니다.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

private 필드는 단지 private이라는 점을 기억하세요. 클래스 내부에서는 액세스할 수 있지만 클래스 본문 외부에서는 사용할 수 없습니다.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

공개 및 비공개 클래스에 관한 자세한 내용은 마티아스의 클래스 필드 게시물을 참고하세요.

prefers-reduced-motion

일부 사용자가 시차 스크롤, 확대/축소, 기타 모션 효과를 볼 때 멀미가 발생한다고 신고했습니다. 이를 해결하기 위해 많은 운영체제에서는 가능한 경우 모션을 줄이는 옵션을 제공합니다.

이제 Chrome에서 미디어 쿼리 수준 5 사양의 일부인 미디어 쿼리 prefers-reduced-motion를 제공합니다. 이 쿼리로 이 옵션이 사용 설정된 경우를 감지할 수 있습니다.


@media (prefers-reduced-motion: reduce)

살짝 모션으로 관심을 유도하는 가입 버튼이 있다고 가정해 보겠습니다. 새 쿼리를 사용하면 버튼의 모션을 끌 수 있습니다.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

톰의 이동 요! 사용자가 감소 모션을 선호한다면 그렇게 하지 마세요.

CSS transition 이벤트

CSS 전환 사양에서는 전환이 대기열에 추가, 시작, 종료 또는 취소될 때 전환 이벤트를 전송해야 합니다. 이러한 이벤트는 한동안 다른 브라우저에서도 지원되어 왔지만

그러나 지금까지는 Chrome에서 지원되지 않았습니다. Chrome 74에서는 다음을 리슨할 수 있습니다.

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

이러한 이벤트를 수신 대기하면 전환이 실행될 때 동작을 추적하거나 변경할 수 있습니다.

기능 정책 API 업데이트

기능 정책을 사용하면 API 및 기타 웹 기능의 동작을 선택적으로 사용 설정, 사용 중지, 수정할 수 있습니다. 이는 기능 정책 헤더 또는 iframe의 allow 속성을 통해 이루어집니다.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74에는 사용 설정된 기능을 확인하기 위한 새로운 API 세트가 도입되었습니다.

  • document.featurePolicy.allowedFeatures()를 통해 허용된 기능 목록을 가져올 수 있습니다.
  • document.featurePolicy.allowsFeature(...)를 사용하여 특정 기능이 허용되는지 확인할 수 있습니다.
  • 또한 document.featurePolicy.getAllowlistForFeature()로 지정된 기능을 허용하는 현재 페이지에서 사용된 도메인 목록을 가져올 수 있습니다.

자세한 내용은 기능 정책 소개 게시물을 참조하세요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 74의 몇 가지 변경사항은 물론 이 외에도 더 많은 기능이 있습니다. 개인적으로 저는 오리진 트라이얼로 제공되는 매우 빠른 비동기식 키-값 스토리지 서비스인 KV Storage를 매우 기쁘게 생각합니다.

Google I/O가 곧 개최됩니다.

잊지 마세요. Google I/O가 몇 주 앞으로 다가왔습니다 (5월 7일부터 9일까지). 새롭고 유용한 콘텐츠가 가득합니다. 참석할 수 없는 경우 모든 세션이 실시간 스트리밍되며 이후 Chrome 개발자 YouTube 채널에서 제공될 예정입니다.

구독

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

저는 Pete LePage입니다. Chrome 75가 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.