Chrome 86의 새로운 기능

Pete LePage

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

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

• 이제 File System Access API가 안정화 버전으로 제공됩니다.
• Web HID 및 멀티스크린 창 배치 API의 새로운 출처 체험판이 있습니다.
• CSS에 몇 가지 새로운 기능이 추가되었으며 이 외에도 다양한 기능이 있습니다.

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 86에서 개발자를 위해 새로 제공되는 기능을 살펴보겠습니다.

파일 시스템 액세스

이제 <input type="file"> 요소를 사용하여 디스크에서 파일을 읽을 수 있습니다. 변경사항을 저장하려면 앵커 태그에 download를 추가합니다. 그러면 파일 선택 도구가 표시되고 파일이 저장됩니다. 열어둔 파일에 쓸 방법은 없습니다. 그 워크플로는 불편합니다.

File System Access API (이전의 Native File System API)는 초기 체험판을 마쳤으며 이제 안정화 버전으로 제공됩니다. 이 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은 사용자가 쓰기 권한을 부여했는지 확인합니다. 쓰기 권한이 부여되지 않은 경우 Chrome에서 먼저 사용자에게 메시지를 표시합니다.

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

API에는 더 많은 기능이 있으므로 web.dev의 파일 시스템 액세스 도움말을 확인하세요.

오리진 트라이얼: WebHID

인간 인터페이스 기기(일반적으로 HID라고 함)는 인간으로부터 입력을 받거나 인간에게 출력을 제공합니다. 인간 인터페이스 기기의 롱테일은 너무 새롭거나 너무 오래되었거나 시스템의 기기 드라이버가 액세스할 수 없을 정도로 흔하지 않습니다.

현재 오리진 트라이얼으로 제공되는 WebHID API는 JavaScript에서 이러한 기기에 액세스하는 방법을 제공하여 이 문제를 해결합니다. 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 기기에 연결을 참고하세요.

오리진 트라이얼: 멀티스크린 창 배치 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
// }

멀티스크린 창 배치 API는 Chrome 86에서 시작 버전 체험판을 시작합니다. 이를 통해 머신에 연결된 화면을 열거하고 특정 화면에 창을 배치할 수 있습니다. 프레젠테이션 앱, 금융 서비스 앱 등에는 특정 화면에 창을 배치할 수 있는 기능이 매우 중요합니다.

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의 Multi-Screen Window Placement 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 DevTools의 새로운 기능 (86)
• Chrome 86 지원 중단 및 삭제
• Chrome 86의 ChromeStatus.com 업데이트
• Chrome 86의 JavaScript 관련 새로운 기능
• Chromium 소스 저장소 변경사항 목록

구독

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

제 이름은 Pete LePage입니다. Chrome 87이 출시되는 대로 Chrome의 새로운 기능에 대해 알려드리겠습니다.