어느 때와 같이 온라인 vscode를 써서 뭔가 끄적이려고 하다가 이상한 걸 발견했다.
사이트가 파일을 보도록 허용하시겠습니까?
(사이트 이름) 에서 (폴더 이름) 에 있는 파일을 볼 수 있게 됩니다.
이런 기능이 있었던가... 하고 써봤다.
놀랍게도, 단순히 폴더 전체를 가져오는 게 아니었다.
파일 n개를 이 사이트에 업로드하시겠습니까?
'(폴더 이름)' 의 모든 파일이 업로드됩니다. 사이트를 신뢰할 수 있을 때만 실행하세요.
얘랑 다르다!
얘는 심지어 로컬에서의 수정사항을 실시간으로 반영한다!
이거 파일 열어봤자 저장하면 zip 파일로 받아지고 다시 압축 풀고... 원본 지우고.. 그러리라 생각했던 내 비웃음을 철저히 배신했다.
엄청 신기했다!
이제 내 신기함은 모두 표현했으니 찾아본 링크만 남기고 떠나겠다.
https://chromestatus.com/feature/6284708426022912
Chrome Platform Status
chromestatus.com
이 기능은 2018년에 초안이 나온 기능으로, 브라우저 기반 에디터 앱이 네이티브 앱과 비슷한 효율을 내게 하려 했다.
https://developer.chrome.com/docs/capabilities/web-apis/file-system-access?hl=ko
File System Access API: 로컬 파일 액세스 간소화 | Capabilities | Chrome for Developers
개발자는 File System Access API를 사용하여 IDE, 사진 및 동영상 편집기, 텍스트 편집기 등 사용자 로컬 기기의 파일과 상호작용하는 강력한 웹 앱을 빌드할 수 있습니다. 사용자가 웹 앱에 액세스 권
developer.chrome.com
진입점은 window.showOpenFilePicker(), window.showSaveFilePicker(), window.showDirectoryPicker() 이다.
https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker
Window: showOpenFilePicker() method - Web APIs | MDN
The showOpenFilePicker() method of the Window interface shows a file picker that allows a user to select a file or multiple files and returns a handle for the file(s).
developer.mozilla.org
PC에서는 크롬, 에지, 오페라에서만 지원하며 모바일에서는 모바일 크롬에서만 지원한다.
https://developer.chrome.com/docs/capabilities/browser-fs-access?hl=ko
브라우저-fs-access 라이브러리로 파일과 디렉터리 읽기 및 쓰기 | Capabilities | Chrome for Developer
모든 최신 브라우저는 로컬 파일과 디렉터리를 읽을 수 있습니다. 그러나 진정한 쓰기 액세스, 즉 파일 다운로드 이상의 권한은 File System Access API를 구현하는 브라우저로 제한됩니다. 이 게시물
developer.chrome.com
지원 범위가 많이 작아서, 직접 사용하는 것보단 browser-fs-access 라이브러리를 사용하라고 한다.