Chrome 74의 새로운 기능

Pete LePage

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

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

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

변경 로그

이 도움말에서는 일부 주요 내용만 다룹니다. Chrome 74의 추가 변경사항은 아래 링크를 참고하세요.

비공개 클래스 필드

클래스 필드는 인스턴스 속성을 정의하기 위한 생성자 함수가 필요하지 않도록 하여 클래스 문법을 간소화합니다. Chrome 72에서는 public 클래스 필드 지원을 추가했습니다.

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 필드는 비공개입니다. 클래스 내부에서 액세스할 수 있지만 클래스 본문 외부에서는 사용할 수 없습니다.

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

공개 및 비공개 클래스에 관해 자세히 알아보려면 마티아스의 클래스 필드에 관한 게시물을 확인하세요.

prefers-reduced-motion

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

이제 Chrome에서는 이 옵션이 사용 설정된 시점을 감지할 수 있는 미디어 쿼리 prefers-reduced-motion(미디어 쿼리 5단계 사양의 일부)를 제공합니다.


@media (prefers-reduced-motion: reduce)

약간의 모션으로 주의를 끄는 가입 버튼이 있다고 가정해 보겠습니다. 새 쿼리를 사용하면 버튼에 대한 모션을 끌 수 있습니다.

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

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

톰의 도움말 Move Ya! 또는 사용자가 prefers-reduced-motion을 선호하는 경우 사용하지 않을 수도 있습니다. 자세한 내용은을 참고하세요.

CSS transition 이벤트

CSS 전환 사양에 따라 전환이 큐에 추가되거나, 시작되거나, 종료되거나, 취소될 때 전환 이벤트가 전송되어야 합니다. 이러한 이벤트는 다른 브라우저에서 한동안 지원되어 왔습니다.

하지만 지금까지는 Chrome에서 지원되지 않았습니다. 이제 Chrome 74에서 다음을 리슨할 수 있습니다.

  • transitionrun
  • transitionstart
  • transitionend
  • transitioncancel

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

Feature Policy API 업데이트

기능 정책을 사용하면 API 및 기타 웹 기능의 동작을 선택적으로 사용 설정, 사용 중지, 수정할 수 있습니다. 이는 Feature-Policy 헤더를 통해서 또는 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 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

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