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

Chrome 55의 새로운 기능

Pete LePage

YouTube에서 보기

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

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

저는 피트 르페이지입니다. Chrome 55에서 개발자를 위해 새로 제공되는 기능을 소개합니다.

포인터 이벤트

웹에서 항목을 가리키는 것은 예전에는 간단했습니다. 마우스를 가지고 움직이거나 버튼을 누르는 정도였습니다. 하지만 여기서는 잘 작동하지 않습니다.

터치 이벤트는 좋지만 터치와 마우스를 지원하려면 다음 두 가지 이벤트 모델을 지원해야 했습니다.

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

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

elem.addEventListener('pointermove', pointerMoveEvent);

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

자세한 내용은 미래를 향한 길을 참고하세요.

`async` 및 `await`

비동기 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);
    });
}

하지만 비동기 종속 항목의 체인이 길면 Promise 기반 코드를 읽기 어려울 수 있습니다.

이제 Chrome에서 async 및 await JavaScript 키워드를 지원하므로 동기 코드처럼 구조화되고 읽기 쉬운 프라미스 기반 JavaScript를 작성할 수 있습니다.

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

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.");
  });
}

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

사이트의 영구 스토리지를 요청하는 방법과 자세한 내용은 크리스 윌슨의 영구 스토리지 게시물을 참고하세요.

CSS 자동 하이픈

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

Web Share API

마지막으로 이제 오리진 트라이얼로 제공되는 새로운 Web Share API를 사용하여 기본 공유 기능을 더 쉽게 호출할 수 있습니다. 폴 (Mr. Web Intents) 킨란의 Navigator Share 게시물에서 자세한 내용을 확인하세요.

마무리

이는 개발자용 Chrome 55의 몇 가지 변경사항일 뿐입니다.

Chrome의 최신 소식을 확인하고 향후 출시될 기능을 알아보려면 구독하세요. Chrome 개발자 서밋 동영상을 확인하여 Chrome팀에서 진행 중인 멋진 기능을 자세히 살펴보세요.

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