이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 63의 새로운 기능

Pete LePage

Chrome 63에서는 JavaScript 모듈을 동적으로 가져올 수 있습니다.
제가 가장 좋아하는 면접 코딩 질문은 비동기 반복자 및 생성기를 사용하면 금상첨화입니다.
CSS overscroll-behavior 속성을 사용하여 브라우저의 기본 오버플로 스크롤 동작을 재정의할 수 있습니다.
또한 사용자에게 권한 요청 메시지가 표시되는 방식이 변경되었습니다.

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

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

변경사항의 전체 목록을 확인하려면 Chromium 소스 저장소 변경사항 목록을 확인하세요.

동적 모듈 가져오기

JavaScript 모듈을 가져오는 것은 매우 편리하지만 정적이며 런타임 조건에 따라 모듈을 가져올 수 없습니다.

다행히 Chrome 63에서는 새로운 동적 가져오기 문법으로 이 문제가 해결됩니다. 이를 통해 런타임에 모듈과 스크립트에 동적으로 코드를 로드할 수 있습니다. 필요할 때만 스크립트를 지연 로드하여 애플리케이션의 성능을 개선하는 데 사용할 수 있습니다.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

사용자가 페이지를 처음 방문할 때 전체 애플리케이션을 로드하는 대신 로그인하는 데 필요한 리소스를 가져올 수 있습니다. 초기 부하는 작고 빠르게 비칩니다. 그런 다음 사용자가 로그인하면 나머지를 로드하면 됩니다.

비동기 반복자 및 생성기

async 함수로 어떤 종류의 반복도 실행하는 코드를 작성하면 보기 좋지 않을 수 있습니다. 사실 이것이 제가 가장 좋아하는 면접 코딩 질문의 핵심 부분입니다.

이제 비동기 생성자 함수와 비동기 반복 프로토콜을 사용하면 스트리밍 데이터 소스의 소비 또는 구현이 간소화되고 코딩 질문이 훨씬 쉬워집니다.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

비동기 반복자는 for-of 루프에서 사용할 수 있으며 비동기 반복자 팩토리를 통해 자체 맞춤 비동기 반복자를 만들 수도 있습니다.

오버스크롤 동작

스크롤은 페이지와 상호작용하는 가장 기본적인 방법 중 하나이지만 특정 패턴은 처리하기가 까다로울 수 있습니다. 예를 들어 페이지 상단에서 아래로 스와이프하면 브라우저의 풀 투 리프레시 기능이 하드 새로고침을 실행합니다.

전체 페이지 새로고침이 적용된 이전 상태

이후에는 콘텐츠만 새로고침합니다.

경우에 따라 이 동작을 재정의하고 나만의 환경을 제공해야 할 수도 있습니다. 트위터의 프로그레시브 웹 앱은 이를 실행합니다. 아래로 당기면 전체 페이지를 새로고침하는 대신 새 트윗을 현재 뷰에 추가합니다.

이제 Chrome 63에서는 CSS overscroll-behavior 속성을 지원하므로 브라우저의 기본 오버플로 스크롤 동작을 쉽게 재정의할 수 있습니다.

다음과 같은 기능을 사용할 수 있습니다.

가장 좋은 점은 overscroll-behavior가 페이지 실적에 부정적인 영향을 미치지 않는다는 것입니다.

권한 UI 변경사항

웹 푸시 알림을 좋아하지만 페이지 로드 시 컨텍스트 없이 권한을 요청하는 사이트가 너무 많아 불만족스러웠습니다. 저만 그런 것이 아닙니다.

모든 권한 요청의 90% 가 무시되거나 일시적으로 차단됩니다.

Chrome 59에서는 사용자가 요청을 세 번 닫으면 권한을 일시적으로 차단하여 이 문제를 해결하기 시작했습니다. 이제 m63에서 Android용 Chrome이 권한 요청 모달 대화상자를 표시합니다.

이는 푸시 알림뿐만 아니라 모든 권한 요청에 적용됩니다. 적절한 시점과 맥락에서 권한을 요청하면 사용자가 권한을 부여할 가능성이 2.5배 높아지는 것으로 나타났습니다.

그 외에도 다양한 기능 제공

이는 개발자를 위한 Chrome 63의 변경사항 중 일부일 뿐이며, 더 많은 사항이 있습니다.

이제 Promise 인스턴스에서 finally를 사용할 수 있으며 Promise가 처리되거나 거부된 후에 호출됩니다.
새로운 Device Memory JavaScript API는 사용자 기기의 총 RAM 크기에 관한 힌트를 제공하여 성능 제약 조건을 이해하는 데 도움이 됩니다. 런타임에 환경을 조정하여 하위 기기의 복잡성을 줄이고 사용자에게 불편을 끼치지 않으면서 더 나은 환경을 제공할 수 있습니다.
Intl.PluralRules API를 사용하면 특정 숫자 및 언어에 적용되는 복수형을 지정하여 특정 언어의 복수형을 이해하는 애플리케이션을 빌드할 수 있습니다. 서수에 도움이 될 수 있습니다.

YouTube 채널을 구독하면 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다.

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