Chrome 74에서는 다음에 대한 지원이 추가되었습니다.
- JavaScript에서 비공개 클래스 필드를 만드는 것이 훨씬 깔끔해졌습니다.
- 사용자가 감소 모션 환경 환경을 요청한 시점을 감지할 수 있습니다.
- CSS 전환 이벤트
- 기능이 사용 설정되었는지 여부를 확인하는 새 기능 정책 API를 추가했습니다.
이 외에도 다양한 기능이 제공됩니다.
저는 피트 레페이지입니다. 이제 Chrome 74의 개발자를 위한 새로운 기능을 알아보겠습니다
변경 로그
여기에서는 일부 주요 특징만 다룹니다. Chrome 74의 추가 변경사항은 아래 링크를 확인하세요.
- Chrome DevTools의 새로운 기능 (74)
- Chrome 74 지원 중단 및 삭제
- Chrome 74용 ChromeStatus.com 업데이트
- Chrome 74 자바스크립트의 새로운 기능
- Chromium 소스 저장소 변경사항 목록
비공개 클래스 필드
클래스 필드를 사용하면 생성자 함수가 인스턴스 속성만 정의하지 않아도 되므로 클래스 문법이 간소화됩니다. 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의 새로운 기능을 소개해 드리겠습니다.