이제 권한을 반복적으로 부여하지 않고도 파일 및 폴더에 대한 지속적인 읽기 및 쓰기 액세스 권한을 얻을 수 있습니다. 이 게시물에서는 작동 방식을 설명합니다. 세부정보를 살펴보기 전에 현재 상태와 해결하려는 문제를 간단히 복습해 보겠습니다.
현재 방법의 문제점
File System Access API를 사용하면 개발자가 사용자의 로컬 하드 디스크에 있는 파일에 읽기 및(선택사항) 쓰기 방식으로 액세스할 수 있습니다. 이 API를 사용하는 다양한 인기 앱 중 하나는 브라우저에서 직접 실행되는 Microsoft의 IDE인 Visual Studio Code(VS Code)입니다. VS Code를 열면 새 파일을 만들거나 기존 파일 또는 폴더를 열 수 있는 Welcome(시작) 화면이 표시됩니다.
폴더 열기를 클릭하고 하드 디스크의 폴더 중 하나를 선택하면 브라우저에서 VS Code에 이 폴더에 대한 보기 액세스 권한을 부여할지 묻는 메시지가 표시됩니다.
액세스 권한을 부여하면 폴더 계층 구조를 탐색하고 VS Code 편집기에서 파일을 열 수 있습니다. 파일을 수정하면 브라우저에서 폴더에 수정 액세스 권한을 부여할지 묻는 메시지가 표시됩니다.
이를 허용하면 주소 표시줄의 파일 아이콘이 변경되고 작은 아래쪽 화살표가 추가되어 앱에 읽기 및 쓰기 권한이 있음을 나타냅니다. 권한을 변경하려면 아이콘을 클릭한 다음 액세스 권한 삭제를 클릭하여 앱이 더 이상 파일을 수정할 수 없도록 합니다.
액세스 권한은 출처의 마지막 탭을 닫을 때까지 유지됩니다. 그런 다음 앱을 닫았다가 다시 열면 VS Code에서 어느 정도 이전에 중단한 부분부터 계속할 수 있습니다. 최근 항목 열기를 클릭하면 VS Code에서 이전에 연 폴더를 다시 열 수 있습니다.
하지만 이전에 폴더에 쓰기 권한을 부여했더라도 이제 액세스 권한을 다시 부여해야 합니다. 이렇게 하면 금방 지치게 됩니다. 해결 방법인 File System Access API의 영구 권한을 자세히 살펴보기 전에 VS Code는 어떻게 최근 폴더를 기억할 수 있을까요?
File System Access API에서 파일 및 폴더에 대한 액세스는 FileSystemHandle 객체(파일의 FileSystemFileHandle 객체, 폴더(디렉터리)의 FileSystemDirectoryHandle 객체)를 통해 관리됩니다. 둘 다 IndexedDB에 저장할 수 있으며 VS Code는 정확히 이를 실행합니다. Chrome DevTools를 열고 애플리케이션 탭에서 IndexedDB 섹션으로 이동한 다음 vscode-web-db 데이터베이스에서 관련 테이블 vscode-filehandles-store를 선택하면 이를 확인할 수 있습니다.
새로운 방식: 변경되는 사항 및 시점
Chrome에서는 사용자가 원하는 경우 파일 및 폴더에 대한 영구 액세스 권한을 부여할 수 있는 새로운 동작을 출시하여 사용자에게 계속 메시지를 다시 표시하지 않아도 됩니다.
이 새로운 동작은 Chrome 122부터 확인할 수 있습니다. 이 기능을 더 일찍 테스트하려면 Chrome 120부터 두 플래그 chrome://flags/#file-system-access-persistent-permission 및 chrome://flags/#one-time-permission를 사용 설정으로 전환합니다.
첫째, 새로운 동작은 사용자가 선택한 파일 및 폴더에 앱의 액세스 권한을 부여할 수 있는 새로운 3가지 권한 메시지로 구성됩니다.
이 새로운 3가지 옵션 프롬프트에는 다음과 같은 옵션이 있습니다.
- 이번만 허용: 앱이 현재 세션의 파일에 액세스할 수 있도록 허용합니다. 이는 기존 동작과 일치합니다.
- 방문할 때마다 허용: 액세스가 취소되지 않는 한 앱이 무기한 액세스할 수 있도록 허용합니다. 앱에 영구 액세스 권한이 부여되면 새로 연 파일과 폴더에도 영구적으로 액세스할 수 있습니다.
- 허용 안 함: 앱이 파일에 액세스할 수 없습니다. 이는 기존 동작과 일치합니다.
둘째, 새 동작에는 사이트 설정에 새 섹션이 포함되며, 사용자는 파일 수정 전환 버튼 옆에 있는 실행 아이콘을 통해 이 섹션에 도달할 수 있습니다.
이 실행 아이콘을 클릭하면 해당 앱의 개인 정보 보호 및 보안 설정이 열리고 여기에서 사용자가 앱에 액세스할 수 있는 모든 파일 및 폴더의 항목 목록을 확인할 수 있습니다. 휴지통 아이콘을 클릭하여 항목별로 액세스 권한을 취소할 수 있습니다. 항목별 액세스 권한을 삭제해도 앱에 일반적으로 파일에 대한 액세스 권한이 부여될 수 있습니다. 일반적으로 액세스 권한을 취소하려면 앞서 설명한 대로 사용자가 주소 표시줄의 아이콘을 클릭하면 됩니다.
새 동작을 트리거하는 방법
File System Access API에는 개발자를 대상으로 하는 변경사항이 없습니다. 영구 권한으로 새 동작을 트리거하려면 충족해야 하는 서로 다른 사전 조건이 있는 세 가지 방법이 있습니다.
- 사용자가 마지막으로 출처를 방문할 때 파일 또는 폴더 (또는 여러 파일 또는 폴더)에 권한을 부여해야 하며 앱이 상응하는
FileSystemHandle객체를 IndexedDB에 저장해야 합니다. 출처를 다음에 방문할 때 앱은 IndexedDB에서 저장된FileSystemHandle객체 중 하나를 가져온 다음FileSystemHandle.requestPermission()메서드를 호출해야 합니다. 이러한 전제조건이 충족되면 새로운 3가지 옵션 프롬프트가 표시됩니다. - 출처는 이전에 액세스 권한이 부여되었지만 탭이 잠시 백그라운드로 전환되어 액세스 권한이 자동으로 취소된
FileSystemHandle에서FileSystemHandle.requestPermission()메서드를 호출해야 합니다. 자동 권한 취소는 Chrome의 일회성 권한 도움말에 설명된 것과 동일한 로직을 기반으로 작동합니다. 이러한 전제조건이 충족되면 새로운 3가지 옵션 메시지가 표시됩니다. - 사용자가 앱을 설치해야 합니다. 설치된 앱은 사용자가 액세스 권한을 부여하면 자동으로 권한을 유지합니다. 이 경우 3가지 옵션 메시지가 표시되지 않고 대신 앱이 기본적으로 새 동작을 가져옵니다.
첫 번째와 두 번째 경우에는 requestPermission() 메서드가 호출되는 FileSystemHandle 객체뿐만 아니라 앱이 이전에 액세스할 수 있었던 모든 FileSystemHandle 객체가 프롬프트에 표시됩니다. 일회성 권한에서 작동하는 방식에 따라 사용자가 메시지를 세 번 이상 거부하거나 닫으면 더 이상 메시지가 트리거되지 않고 대신 일반 권한 메시지가 표시됩니다.
새로운 동작 사용해 보기
지원되는 Chrome 버전이 있거나 필요한 플래그가 설정된 경우 웹에서 VS Code로 새 동작을 테스트할 수 있습니다. 폴더를 열고 액세스 권한을 부여한 다음 탭을 닫았다가 다시 열고 최근 항목 열기를 클릭합니다. 즉시 새로고침해도 메시지가 표시되지 않으므로 모든 탭을 닫아야 합니다. 이전 폴더를 선택하면 새 메시지가 표시됩니다. 더 간소화된 테스트 사례를 보려면 지속형 파일 시스템 액세스 데모를 확인하고 소스 코드를 확인하세요.
결론
File System Access API의 영구 권한은 API의 가장 요청된 기능 중 하나이며 구현 버그도 많은 개발자가 별표표시할 정도로 인기가 높습니다. 이 기능을 개발자와 무엇보다도 사용자에게 제공함으로써 이제 플랫폼별 앱과 비교할 때 중요한 기능 격차가 해소되었습니다.
감사의 말
이 게시물은 크리스틴 홀링스워스, 오스틴 설리번, 레이첼 앤드루가 검토했습니다.