Chrome 97의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

새해 인사 저는 피트 르페이지입니다. Chrome 97의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

웹 전송

웹 소켓 또는 WebRTC Data Channel API를 사용하여 서버와 페이지 간에 메시지를 전송하는 경우 새로운 옵션이 있습니다. WebTransport는 지연 시간이 짧은 양방향 클라이언트-서버 메시지를 제공하는 새로운 API입니다.

WebSockets보다 지연 시간이 짧으며, P2P 메시징용으로 설계된 RTC Data Channel API와 달리 Web Transport API는 특히 클라이언트-서버 메시징용으로 설계되었습니다.

스트림 API를 사용하여 안정적으로 데이터를 전송하고 데이터그램 API를 사용하여 안정적으로 데이터를 전송하도록 지원합니다. 웹 워커에서 지원됩니다. 또한 스트림 준수 인터페이스를 노출하므로 백프레셔 관련 최적화를 지원합니다.

이를 사용하려면 HTTP/3를 지원하는 서버가 필요하며, 이는 일반적으로 WebRTC 서버를 설정하고 유지관리하는 것보다 쉽습니다. 새 WebTransport 인스턴스를 열고 연결될 때까지 기다리면 데이터 전송을 시작할 수 있습니다.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

자세한 내용은 web.dev의 WebTransport 실험 도움말을 참고하세요.

스크립트 유형 특성 감지

이제 nomodule 속성을 사용하여 브라우저에서 JavaScript 모듈 지원을 감지할 수 있습니다. 하지만 가져오기 맵, 추측 규칙, 번들 미리 로드와 같은 몇 가지 새로운 기능 제안이 파이프라인에 있습니다. 브라우저에서 지원하는 항목을 알 수 있는 방법이 필요합니다.

HTMLScriptElement.supports()을 입력합니다. 이를 사용하여 사용할 수 있는 스크립트 유형을 확인하고 브라우저에 가장 적합한 옵션을 전송할 수 있습니다.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

새 배열 프로토타입

JavaScript가 더 쉬워지면 좋습니다. Array 및 TypedArray가 이제 findLast() 및 findLastIndex() 정적 메서드를 지원합니다.

이러한 함수는 사실상 find() 및 findIndex()와 동일하지만 배열의 시작이 아닌 끝에서 검색합니다.

예를 들어 10보다 큰 배열에서 마지막 숫자를 찾으려면 값이 10보다 큰지 확인하는 테스트 함수로 findLast()를 호출하면 됩니다.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

UA 문자열에서 Chrome 100 에뮬레이션

몇 달 후면 3자리 버전 번호인 Chrome 100이 출시됩니다. 버전 번호를 확인하거나 UA 문자열을 파싱하는 모든 코드는 3자리 숫자를 처리하는지 확인해야 합니다.

현재 버전 번호를 100으로 변경하는 #force-major-version-to-100라는 플래그가 있으므로 모든 것이 예상대로 작동하는지 확인할 수 있습니다.

새 #force-major-version-to-100 옵션을 강조 표시하는 Chrome 플래그 페이지

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

이제 양식 항목의 새 줄이 Gecko 및 WebKit과 동일한 방식으로 정규화되어 브라우저 간 상호 운용성이 개선되었습니다.

클라이언트 힌트 이름 앞에 sec-ch를 붙여 표준화하고 있습니다. 예를 들어 dpr는 sec-ch-dpr가 됩니다. 이러한 힌트의 기존 버전은 계속 지원되지만 향후 지원 중단 및 삭제가 예정되어 있으므로 이를 계획해야 합니다.

닫힌 <details> 요소를 이제 검색 가능하며 연결할 수 있습니다. 이러한 숨겨진 요소는 페이지에서 찾기, ScrollToTextFragment 및 요소 프래그먼트 탐색이 사용될 때 자동으로 확장됩니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 97의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 Pete LePage입니다. Chrome 98이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.