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

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

HID 기기 선택 도구

물론 이와 같이 강력한 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의 새로운 기능에 대해 알려드리겠습니다.