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

Chrome 86의 새로운 기능

Pete LePage

Twitter GitHub Glitch Mastodon 홈페이지

이제 Chrome 86이 안정화 버전으로 출시되기 시작했습니다.

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

이제 File System Access API를 안정화 버전으로 사용할 수 있습니다.
웹 HID 및 Multi-screen Window Placement API의 새로운 오리진 트라이얼이 있습니다.
CSS에는 새로운 기능이 있으며 더 많은 기능이 제공됩니다.

저는 Pete LePage입니다. 재택근무를 하면서 재택근무를 하고 있습니다. 이제 Chrome 86의 개발자를 위한 새로운 기능을 알아보겠습니다.

파일 시스템 액세스

지금은 <input type="file"> 요소를 사용하여 디스크에서 파일을 읽을 수 있습니다. 변경사항을 저장하려면 앵커 태그에 download를 추가하세요. 그러면 파일 선택 도구가 표시된 후 파일이 저장됩니다. 열었던 동일한 파일에 쓸 수 있는 방법이 없습니다. 그 워크플로가 짜증 나네요.

오리진 트라이얼에서 벗어나 안정적인 버전으로 제공되는 File System Access API (이전의 Native File System API)를 사용하면 파일 선택 도구를 표시하는 showOpenFilePicker()를 호출하고 파일을 읽는 데 사용할 수 있는 파일 핸들을 반환할 수 있습니다.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

파일을 디스크에 저장하려면 앞서 가져온 파일 핸들을 사용하거나 showSaveFilePicker()를 호출하여 새 파일 핸들을 가져오면 됩니다.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

권한 메시지 스크린샷 — 사용자에게 파일에 쓸 수 있는 권한을 요청하는 메시지를 표시합니다.

쓰기 전에 Chrome은 사용자가 쓰기 권한을 부여했는지 확인하고 쓰기 권한이 부여되지 않은 경우 먼저 사용자에게 메시지를 표시합니다.

showDirectoryPicker()를 호출하면 디렉터리가 열려 파일 목록을 가져오거나 이 디렉터리에 새 파일을 만들 수 있습니다. 많은 파일과 상호작용하는 IDE 또는 미디어 플레이어와 같은 기기에 적합합니다. 물론, 무엇이든 쓰려면 사용자가 쓰기 권한을 부여해야 합니다.

API에는 더 많은 내용이 포함되어 있으므로 web.dev에서 파일 시스템 액세스 문서를 확인하세요.

오리진 트라이얼: WebHID

일반적으로 HID라고 하는 휴먼 인터페이스 기기는 인간의 입력을 받거나 인간에게 출력을 제공합니다. 인간 인터페이스 기기는 매우 새롭거나, 너무 오래되거나, 시스템의 기기 드라이버가 액세스할 수 없는 흔치 않은 경우가 많습니다.

현재 오리진 트라이얼로 제공되는 WebHID API는 자바스크립트로 이러한 기기에 액세스하는 방법을 제공하여 이 문제를 해결합니다. WebHID를 사용하면 웹 기반 게임이 모든 버튼, 조이스틱, 센서, 트리거, LED, 럼블 팩 등을 비롯한 게임패드를 최대한 활용할 수 있습니다.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

웹 기반 영상 채팅 앱은 특수 스피커의 전화 통신 버튼을 사용하여 통화를 시작하거나 종료하고 오디오를 음소거하는 등의 작업을 할 수 있습니다.

물론 이와 같은 강력한 API는 사용자가 명시적으로 허용하는 경우에만 기기와 상호작용할 수 있습니다.

자세한 내용, 예, 시작 방법, 멋진 데모는 일반적이지 않은 HID 기기에 연결을 참고하세요.

오리진 트라이얼: Multi-Screen Window Placement API

현재는 window.screen()를 호출하여 브라우저 창이 표시된 화면의 속성을 가져올 수 있습니다. 하지만 다중 모니터 설정이 있는 경우에는 어떻게 해야 할까요? 죄송합니다. 브라우저는 현재 켜져 있는 화면에 관한 정보만 제공합니다.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Multi-Screen Window Placement API는 Chrome 86에서 오리진 트라이얼을 시작합니다. 이 API를 사용하면 머신에 연결된 화면을 열거하고 특정 화면에 창을 배치할 수 있습니다. 특정 화면에 창을 배치할 수 있는 기능은 프레젠테이션 앱, 금융 서비스 앱 등에서 매우 중요합니다.

API를 사용하려면 먼저 권한을 요청해야 합니다. 그렇지 않으면 브라우저를 처음 사용하려고 할 때 브라우저에서 사용자에게 메시지를 표시합니다.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

사용자가 권한을 부여한 다음 window.getScreens()를 호출하면 Screen 객체의 배열로 확인되는 프로미스가 반환됩니다.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

그러면 requestFullScreen()를 호출하거나 새 창을 배치할 때 이 정보를 사용할 수 있습니다. 톰은 web.dev의 멀티스크린 창 게재위치 API를 사용하여 여러 디스플레이 관리 도움말에서 자세한 내용을 확인할 수 있습니다.

기타

새로운 CSS 선택기 :focus-visible를 사용하면 브라우저에서 기본 포커스 표시기의 표시 여부를 결정할 때 사용하는 것과 동일한 휴리스틱을 선택할 수 있습니다.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

CSS ::marker 유사 요소를 사용하여 목록의 색상이나 크기, 숫자나 글머리기호 유형을 맞춤설정할 수 있습니다.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Chrome Dev Summit은 내 주변 화면에서 열릴 예정이니 YouTube 채널에서 자세한 정보를 확인하세요.

추가 자료

주요 특징 중 일부만 다룹니다. Chrome 86의 추가 변경사항은 아래 링크를 확인하세요.

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받거나 피드 리더에 RSS 피드를 추가할 수 있습니다.

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