Chrome 55의 새로운 기능

YouTube에서 보기

  • asyncawait를 사용하면 동기식인 것처럼 기본 스레드를 차단하지 않고 프로미스 기반 코드를 작성할 수 있습니다.
  • 포인터 이벤트는 모든 입력 이벤트를 처리하는 통합된 방법을 제공합니다.
  • 홈 화면에 추가된 사이트에는 영구 저장소 권한이 자동으로 부여됩니다.

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

저는 피트 르페이지입니다. Chrome 55의 개발자를 위한 새로운 기능을 소개합니다.

포인터 이벤트

이전에는 웹에서 사물을 가리키는 것이 간단했습니다. 마우스가 있고, 이리저리 움직이고, 버튼을 누르는 것만으로 충분했습니다. 하지만 여기서는 잘 작동하지 않습니다.

터치 이벤트도 좋지만 터치마우스를 지원하려면 두 가지 이벤트 모델을 지원해야 합니다.

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

이제 Chrome에서 PointerEvents를 전달하여 통합 입력 처리를 사용 설정합니다.

elem.addEventListener('pointermove', pointerMoveEvent);

포인터 이벤트는 브라우저의 포인터 입력 모델을 통합하여 터치, 펜, 마우스를 단일 이벤트 집합으로 가져옵니다. IE11, Edge, Chrome, Opera 및 Firefox에서는 부분적으로 지원됩니다.

자세한 내용은 앞으로의 방향 파악하기를 참고하세요.

asyncawait

비동기 JavaScript는 추론하기가 어려울 수 있습니다. 이 함수를 '멋진' 콜백과 함께 살펴보겠습니다.

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

promises로 다시 작성하면 중첩 문제를 방지하는 데 도움이 됩니다.

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

그러나 비동기 종속 항목의 긴 체인이 있는 경우 프로미스 기반 코드는 여전히 읽기 어려울 수 있습니다.

이제 Chrome에서 asyncawait 자바스크립트 키워드를 지원하므로 동기 코드처럼 구조화되고 읽을 수 있는 프로미스 기반 자바스크립트를 작성할 수 있습니다.

대신 비동기 함수를 다음과 같이 단순화할 수 있습니다.

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

제이크는 비동기 함수 - 프로미스를 친화적으로 만들기라는 흥미로운 게시물을 올렸습니다.

영구 스토리지

영구 스토리지 오리진 트라이얼이 종료되었습니다. 이제 웹 스토리지를 영구으로 표시하여 Chrome이 사이트의 스토리지를 자동으로 지우지 않도록 할 수 있습니다.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

또한 참여도가 높거나 홈 화면에 추가되었거나 푸시 알림이 사용 설정된 사이트에는 지속성 권한이 자동으로 부여됩니다.

자세한 내용과 사이트에 영구 저장소를 요청하는 방법은 Chris Wilson의 Persistent Storage 게시물을 참조하세요.

CSS 자동 하이픈

Chrome에서 가장 자주 요청되는 레이아웃 기능 중 하나인 CSS 자동 하이픈 연결이 이제 Android와 Mac에서 지원됩니다.

Web Share API

마지막으로, 오리진 트라이얼로 제공되는 새로운 Web Share API를 사용하여 네이티브 공유 기능을 더 쉽게 호출할 수 있습니다. 폴 (웹 인텐트 선생님) 킨란이 Navigator Share 게시물에 모든 세부정보를 다룹니다.

마무리

개발자를 위한 Chrome 55의 몇 가지 변경사항을 살펴보았습니다.

Chrome에 관한 최신 정보를 얻고 향후 계획을 알고 싶다면 구독을 하고 Chrome Dev Summit 동영상에서 Chrome팀에서 진행 중인 멋진 일들을 자세히 알아보세요.

저는 Pete LePage입니다. Chrome 56이 출시되면 바로 이곳에서 Chrome의 새로운 기능을 알려드리겠습니다.