새로운 유형의 웹 애플리케이션을 위한 새로운 API

이 글을 쓰는 시점에서 Chrome 86은 몇 주 안에 출시될 예정이며 흥미로운 새 기능인 기본 파일 시스템 API를 제공합니다. 이 API를 사용하면 브라우저에서 JavaScript를 사용하여 파일을 읽고/하거나 파일 시스템에 저장하는 웹 페이지를 작성할 수 있습니다. 지금까지는 HTMLinput이 있는 파일만 읽을 수 있었고 브라우저에서는 저장이 불가능했습니다. 이제 애플리케이션이 웹 브라우저의 파일을 처리하는 경우 향상된 사용자 경험을 제공할 수 있습니다.

아직 모든 브라우저에서 구현되지 않은 새로운 API이므로 주의하십시오. 현재 브라우저 지원here 을 확인할 수 있습니다. W3C Draft이 있지만 표준 트랙에는 없습니다. Google은 Chrome에서 여러 실험을 통해 이 작업을 수행했으며 API가 변경될 수 있습니다. 지금은 이러한 기능을 Google Chrome 사용자에게만 제공할 수 있으며 방법이 있는지 확인해야 합니다.

This article on web.dev 많은 설명이 있지만 이 글을 쓰고 있는 지금은 완전히 최신 정보가 아닙니다. 다른 많은 사이트에서도 이전 구문을 사용합니다. 이 블로그 게시물은 2020년 10월 Chrome 86에서 제공되는 구문과 함께 간단한 소개 및 코드 예제를 제공해야 합니다.

디렉토리에서 파일 읽기

내 첫 번째 사용 사례는 처리, 업로드 등을 위해 웹 앱에 로드하려는 파일 디렉터리가 컴퓨터에 있다는 것입니다. 따라서 web.dev의 게시물을 사용하고 Chrome 86의 최신 메서드 이름으로 업데이트합니다. 이 작은 기능을 생각해 냈습니다.

async openDirectory() {
    const handle = await window.showDirectoryPicker();
    const entries = await handle.getEntries();
    const files = [];
    for await (const entry of entries) {
        const file = await entry.getFile();
        files.push(file);
    }
    return files;
}

내 웹 앱은 표준 JavaScriptFile interface와 함께 작동합니다. 배열files은 이제 File 개체의 배열이며 이전 구현처럼 사용할 수 있습니다. 이전 방식은 HTML<input type="file" />을 사용하여 사용자가 파일을 선택하고 내 앱에 로드할 수 있도록 했습니다. 이제 showDirectoryPicker 메서드를 사용하여 사용자가 파일과 함께 감독을 선택할 수 있도록 합니다. 하나의 파일만 선택해야 하는 경우 메서드가 showOpenFilePicker 호출됩니다.

이제 사용자에게 브라우저가 선택한 디렉토리에서 읽을 수 있는지 확인하는 권한 프롬프트가 표시되는 변경 사항이 포함된 최신 버전의 구현이 있습니다. 보안 및 권한 항목에 대한 추가 정보가 필요한 경우 이전에 언급한 web.dev 게시물 및 W3C 사양을 확인하십시오. W3C 사양에는 웹 개발자를 위한 좋은 예도 있습니다.

디렉토리에 파일 쓰기

더 중요한 사용 사례는 파일을 디스크/파일 시스템에 쓰는 것입니다. 이것은 이전에는 실제로 불가능했습니다. 다운로드와 같은 해결 방법을 찾을 수 있지만 이제 사용자가 디렉터리를 선택하고 거기에 파일을 저장할 수 있는 멋진 API가 있습니다. 다음은 예제 코드를 업데이트한 후 생각해낸 방법입니다.

async exportToFiles() {
    const directoryHandle = await window.showDirectoryPicker();

    const all = getAllFiles(); // This is again an array of 'File' objects
    for (const file of all) {
      const fileHandle = await directoryHandle.getFile(file.name, {create: true});
      const writable = await fileHandle.createWritable();
      await writable.write(file.content);
      await writable.close();
    }

    alert('Done');
  }

이 예에서는 사용자가 여러 파일을 저장할 디렉토리를 선택하기를 원하기 때문에 showDirectoryPicker()를 다시 사용하고 있습니다. 디렉토리에 대한 핸들을 얻고 다시 File 개체의 배열을 갖게 됩니다. 디렉토리에 파일 핸들을 만들고 여기에 파일 내용을 씁니다. 하나의 파일만 저장하려면 다음과 같은 옵션과 함께 showSaveFilePicker(options)를 사용할 수 있습니다.

  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };

결론

저는 개인적으로 현재 형태의 Native File System API를 정말 좋아합니다. 사용하기 쉽고 브라우저에서 새로운 종류의 응용 프로그램을 구축할 수 있습니다. 이것이 곧 표준이 되고 Firefox 및 Safari와 같은 다른 브라우저에서 이 API를 구현하기를 진심으로 바랍니다.