Chrome 63의 새로운 기능

피트 레페이지

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 63의 개발자를 위한 새로운 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

동적 모듈 가져오기

JavaScript 모듈을 가져오는 것은 매우 편리하지만 정적입니다. 런타임 조건을 기반으로 모듈을 가져올 수는 없습니다.

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

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

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

비동기 반복기 및 생성기

async 함수를 사용하여 모든 종류의 반복을 실행하는 코드를 작성하는 것은 보기 좋지 않을 수 있습니다. 사실 제가 가장 좋아하는 면접 코딩 질문에서 가장 중요한 부분입니다.

이제 async generator functions와 비동기 반복 프로토콜을 사용하면 스트리밍 데이터 소스의 사용이나 구현이 간소화되고 코딩 질문이 훨씬 쉬워집니다.

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 루프에서 사용할 수 있으며 비동기 반복기 팩토리를 통해 고유한 커스텀 비동기 반복자를 만들 수도 있습니다.

오버스크롤 동작

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

이전, 전체 페이지 새로고침 적용

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

경우에 따라 이러한 동작을 재정의하고 자체 환경을 제공해야 할 수도 있습니다. Twitter의 프로그레시브 웹 앱은 페이지 전체를 새로고침하는 대신 새 트윗을 현재 뷰에 추가하기만 하면 됩니다.

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

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

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

권한 UI 변경사항

웹 푸시 알림을 좋아하는 건 아니지만 페이지 로드 시 아무런 맥락 없이 권한을 요청하는 사이트가 많아 실망스러웠습니다. 저 혼자가 아닙니다.

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

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

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

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 63의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

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

잊지 말고 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

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