Chrome 97의 새로운 기능

Pete LePage

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

새해 인사 저는 피트 레페이지입니다. 이제 Chrome 97의 개발자를 위한 새로운 기능을 살펴보겠습니다

웹 전송

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

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

스트림 API에서는 안정적으로 데이터를 전송하고, 데이터그램 API에서는 안정적으로 데이터를 전송할 수 없습니다. 웹 워커에서 지원됩니다. 또한 Streams 호환 인터페이스를 노출하므로 백프레셔에 관한 최적화를 지원합니다.

이 기능을 사용하려면 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가 됩니다. Google에서는 이러한 힌트의 기존 버전을 계속 지원하지만 향후 지원 중단 및 삭제에 대비하여 계획을 세워야 합니다.

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

추가 자료

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

구독

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

저는 Pete LePage입니다. Chrome 98이 출시되면 곧 Chrome의 새로운 기능을 소개해 드리겠습니다.