이제 권한을 반복적으로 부여하지 않고도 파일과 폴더에 대한 지속적인 읽기 및 쓰기 액세스 권한을 얻을 수 있습니다. 이 게시물에서는 작동 방식을 설명합니다. 자세히 살펴보기 전에 현재 상황과 해결되는 문제를 간략하게 요약합니다.
현재 방법의 문제
File System Access API를 사용하면 개발자가 읽기 및 쓰기(선택사항) 방식으로 사용자의 로컬 하드 디스크에 있는 파일에 액세스할 수 있습니다. 이 API를 활용하는 다른 여러 앱 중에서 인기 있는 앱은 브라우저에서 직접 실행되는 Microsoft의 IDE인 Visual Studio Code(VS Code)입니다. VS Code를 열면 새 파일을 만들거나 기존 파일 또는 폴더를 열 수 있는 Welcome 화면이 표시됩니다.
폴더 열기를 클릭하고 하드 디스크의 폴더 중 하나를 선택하면 VS Code에 이 폴더에 대한 보기 액세스 권한을 부여할지 묻는 메시지가 표시됩니다.
액세스 권한을 부여하면 폴더 계층 구조를 탐색하고 VS Code 편집기에서 파일을 열 수 있습니다. 파일을 수정하면 폴더에 대한 edit 액세스 권한을 부여할지 묻는 메시지가 브라우저에 표시됩니다.
이렇게 하면 주소 표시줄의 파일 아이콘이 변경되고 작은 아래쪽 화살표가 추가되어 앱에 읽기 및 쓰기 권한이 있음을 나타냅니다. 권한을 변경하려면 아이콘을 클릭한 후 액세스 권한 삭제를 클릭합니다. 그러면 앱에서 더 이상 파일을 수정할 수 없습니다.
액세스는 출처의 마지막 탭을 닫을 때까지 유지됩니다. 앱을 닫았다가 다시 열면 VS Code종류을 통해 중단한 부분부터 이어서 진행할 수 있습니다. 최근 열기를 클릭하면 VS Code는 이전에 열었던 폴더를 다시 열 수 있도록 제공합니다.
하지만 이전에 폴더에 쓰기 권한을 부여했더라도 이제는 액세스 권한을 다시 부여해야 합니다. 진짜 빨리 피곤해. 솔루션, 즉 File System Access API의 영구 권한에 관해 알아보기 전에 VS Code는 어떻게 최근 폴더를 기억하나요?
File System Access API에서 파일 및 폴더 액세스는 FileSystemHandle 객체(파일의 경우 FileSystemFileHandle 객체, 폴더(디렉터리)의 경우 FileSystemDirectoryHandle 객체)를 통해 관리됩니다. 둘 다 IndexedDB에 저장할 수 있으며, 이것이 VS Code가 하는 일입니다. 이를 확인하려면 Chrome DevTools를 열고 Application 탭에서 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 객체가 프롬프트에 나열됩니다. 일회성 권한에서 작동하는 방식에 맞춰 사용자가 메시지를 3번 이상 거부하거나 닫으면 더 이상 트리거되지 않으며 대신 일반 권한 메시지가 표시됩니다.
새로운 동작 사용해 보기
지원되는 Chrome 버전이 있거나 필요한 플래그가 설정된 경우 웹의 VS Code에서 새 동작을 테스트할 수 있습니다. 폴더를 열고 액세스 권한을 부여한 다음 탭을 닫았다가 다시 열고 최근 항목 열기를 클릭합니다. 프롬프트를 트리거하기 위해 즉시 새로고침할 수 없으므로 모든 탭을 닫아야 합니다. 이전 폴더를 선택하면 새 프롬프트가 표시됩니다. 보다 간단한 테스트 사례는 영구 파일 시스템 액세스 데모와 소스 코드를 확인하세요.
결론
File System Access API의 영구 권한은 API에서 가장 많이 요청되는 기능 중 하나이며 구현 버그도 큰 인기를 누리며 많은 개발자들이 이 기능을 활용하고 있습니다. 이 기능을 개발자, 그리고 무엇보다 사용자가 손에 맡기면서 플랫폼별 앱과 비교하여 기능 격차가 크게 좁혀졌습니다.
감사의 말
이 게시물은 크리스틴 홀링스워스, 오스틴 설리반, 레이첼 앤드류가 리뷰했습니다.