Chrome 54의 새로운 기능

YouTube에서 보기

  • 이제 맞춤 요소 v1을 사용하여 자체 맞춤 HTML 태그를 만들고 재사용 가능한 웹 구성요소를 만들 수 있습니다.
  • BroadcastChannel API를 사용하면 동일한 출처에 있는 열린 창이나 탭 간에 메시지를 더 쉽게 전송할 수 있습니다.
  • Android의 미디어 환경이 개선되며 이제 외부 가져오기를 오리진 트라이얼로 사용할 수 있습니다.

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

맞춤 요소 v1

복잡한 사용자 인터페이스에는 대량의 HTML이 필요한 경우가 많습니다. 대부분의 언어에서는 개발자가 언어 기본 요소를 기반으로 빌드된 자체 구성요소를 만들어 이러한 상세 정보를 완화할 수 있습니다. 하지만 지금까지는 웹에서 재사용 가능한 구성요소를 만들기가 어려웠습니다.

맞춤 요소를 사용하면 맞춤 HTML 태그를 직접 만들고 자바스크립트로 새 요소의 API 및 동작을 정의할 수 있습니다. 이를 통해 브라우저 고유의 방식으로 재사용 및 상호 운용 가능한 구성요소를 빌드할 수 있습니다.

Chrome 54는 최신 맞춤 요소 V1 사양을 지원하며 V1으로 충분히 이전할 때까지 V0 API를 계속 지원합니다.

맞춤 요소 입문서에서 맞춤 요소를 사용하여 사이트나 애플리케이션에서 재사용 가능한 웹 구성요소를 만드는 방법을 알아보세요.

BroadcastChannel API

데스크톱 사용자가 여러 개의 창이나 탭을 동시에 여는 것은 드문 일이 아니며 일부 사이트에서는 이러한 동작을 권장하기도 합니다(예: 자체 탭에서 문서를 여는 웹 편집기).

이러한 탭 간의 통신은 어려울 수 있습니다. BroadcastChannel API는 창, 탭, iframe, 웹 워커, 서비스 워커 간에 새로운 일대다 메시징 API입니다. 스크립트를 통해 이름이 지정된 채널을 설정하여 동일한 출처의 탐색 컨텍스트 간에 메시지를 전송할 수 있습니다.

기타 BroadcastChannel 리소스

requestFullScreen

미디어는 탐색 환경에서 점점 더 중요한 부분으로 자리 잡고 있습니다.

사용자 동작 외에도 이제 Element.requestFullScreen()를 사용하여 화면 방향 변경 후 전체 화면 모드를 트리거할 수 있으며, 이를 통해 전체 화면으로 회전하는 등 더 풍부한 미디어 환경을 만들 수 있습니다.

해외 가져오기

API 제공업체, 웹 글꼴 서비스 또는 기타 서비스와 같이 흔히 사용되는 출처에서 자체 서비스 워커를 배포할 수 있다고 상상해 보세요.

제공자는 항상 네트워크로 이동하는 대신 자체 커스텀 네트워킹 로직을 구현하고 응답을 저장하기 위해 신뢰할 수 있는 단일 캐시 인스턴스를 활용할 수 있습니다.

이제 Chrome 54에서 오리진 트라이얼로 사용할 수 있는 해외 가져오기 덕분에 현실이 되었습니다. 아래 댓글에 링크된 Jeffrey의 게시물을 확인하세요.

마무리

개발자를 위한 Chrome 54의 몇 가지 변경사항은 다음과 같습니다.

자세한 내용은 설명을 확인하고 문서 및 사양을 연결하세요.

11월 10일과 11일에 YouTube에서 스트리밍될 예정이니 Chrome Dev Summit을 꼭 확인하세요.

Chrome의 최신 소식과 출시 일정을 알아보려면 상단의 구독 버튼을 클릭하세요.

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