개발자는 File System Access API 및 Origin Private File System API를 사용하여 사용자 기기의 파일과 디렉터리에 액세스할 수 있습니다. 전자를 사용하면 개발자가 사용자가 볼 수 있는 일반 파일 시스템에서 읽고 쓸 수 있고, 후자는 사용자 파일 시스템에 숨겨져 있는 특수 파일을 열 수 있으며, 이는 각 사이트의 원본에만 공개되며 특정한 성능 이점을 제공합니다. 두 경우 모두 개발자가 파일 및 디렉터리와 상호작용하는 방법은 파일의 경우 FileSystemHandle 객체, 구체적으로는 파일의 경우 FileSystemFileHandle, 디렉터리의 경우 FileSystemDirectoryHandle를 사용하는 것입니다. 지금까지는 파일 시스템 중 하나에서 파일이나 디렉터리의 변경 사항을 통지받으려면 일종의 폴링 및 lastModified 타임스탬프 또는 파일 콘텐츠 자체를 비교해야 했습니다.
Chrome 129의 오리진 트라이얼에 포함된 File System Observer API는 이를 변경하고 변경사항이 발생하면 개발자에게 자동으로 알림을 보낼 수 있도록 지원합니다. 이 가이드에서는 이 기능의 작동 방식과 기능을 사용하는 방법을 설명합니다.
사용 사례
가능한 파일 시스템 변경사항이 발생하는 즉시 알려야 하는 앱에서는 File System Observer API를 사용합니다.
- 프로젝트의 파일 시스템 트리를 표시하는 웹 기반 통합 개발 환경 (IDE)입니다.
- 파일 시스템 변경사항을 서버와 동기화하는 앱 예: SQLite 데이터베이스 파일
- 작업자 또는 다른 탭의 파일 시스템 변경사항을 기본 스레드에 알려야 하는 앱
- 예를 들어 이미지를 자동으로 최적화하기 위해 리소스 디렉터리를 관찰하는 앱
File System Observer API 사용 방법
특성 감지
File System Observer API가 지원되는지 확인하려면 다음 예와 같이 기능 테스트를 실행하세요.
if ('FileSystemObserver' in self) {
// The File System Observer API is supported.
}
파일 시스템 관찰자 초기화
new FileSystemObserver()를 호출하고 인수로 callback 함수를 제공하여 File System Observer를 초기화합니다.
const observer = new FileSystemObserver(callback);
파일 또는 디렉터리 관찰 시작
파일이나 디렉터리 관찰을 시작하려면 FileSystemObserver 인스턴스의 비동기 observe() 메서드를 호출합니다. 선택한 파일 또는 디렉터리의 FileSystemHandle를 이 메서드에 인수로 제공합니다. 디렉터리를 관찰할 때는 디렉터리 변경사항을 재귀적으로 (즉, 디렉터리 자체와 포함된 모든 하위 디렉터리 및 파일) 알림을 받을지 선택할 수 있는 선택적 options 인수가 있습니다. 기본 옵션은 디렉터리 자체와 직접 포함된 파일만 관찰하는 것입니다.
// Observe a file.
await observer.observe(fileHandle);
// Observe a directory.
await observer.observe(directoryHandle);
// Observe a directory recursively.
await observer.observe(directoryHandle, {recursive: true});
콜백 함수
파일 시스템이 변경되면 콜백 함수가 파일 시스템 변경 records 및 observer 자체를 인수로 사용하여 호출됩니다. 예를 들어 관심 있는 파일이 모두 삭제되면 observer 인수를 사용하여 관찰자의 연결을 해제할 수 있습니다 (파일 시스템 관찰 중지 참고).
const callback = (records, observer) => {
for (const record of records) {
console.log('Change detected', record);
}
};
파일 시스템 변경 레코드
각 파일 시스템 변경 기록의 구조는 다음과 같습니다. 모든 필드는 읽기 전용입니다.
root(FileSystemHandle):FileSystemObserver.observe()함수에 전달되는 핸들입니다.changedHandle(FileSystemHandle): 파일 시스템 변경의 영향을 받는 핸들입니다.relativePathComponents(Array):root를 기준으로 한changedHandle의 경로입니다.type(String): 변경 유형입니다. 다음과 같은 유형이 있을 수 있습니다. <ph type="x-smartling-placeholder">- </ph>
"appeared": 파일 또는 디렉터리가 생성되었거나root로 이동되었습니다."disappeared": 파일 또는 디렉터리가 삭제되거나root외부로 이동했습니다."modified": 파일 또는 디렉터리가 수정되었습니다."moved": 파일 또는 디렉터리가root내에서 이동되었습니다."unknown": 0개 이상의 이벤트가 누락되었음을 나타냅니다. 개발자는 이에 대한 응답으로 감시 디렉터리를 폴링해야 합니다."errored": 관찰이 더 이상 유효하지 않습니다. 이 경우 파일 시스템 관찰을 중지하는 것이 좋습니다.
relativePathMovedFrom(Array, 선택사항): 이동한 핸들의 이전 위치입니다.type이"moved"인 경우에만 사용할 수 있습니다.
파일 또는 디렉터리 관찰 중지
FileSystemHandle 관찰을 중지하려면 unobserve() 메서드를 호출하여 핸들을 인수로 전달합니다.
observer.unobserve(fileHandle);
파일 시스템 관찰 중지
파일 시스템 관찰을 중지하려면 다음과 같이 FileSystemObserver 인스턴스의 연결을 해제합니다.
observer.disconnect();
API 사용해 보기
File System Observer API를 로컬에서 테스트하려면 about:flags에서 #file-system-observer 플래그를 설정합니다. 실제 사용자를 대상으로 API를 테스트하려면 오리진 트라이얼에 가입하고 Chrome 오리진 트라이얼 가이드의 안내를 따르세요. 오리진 트라이얼은 Chrome 129 (2024년 9월 11일)부터 Chrome 134 (2025년 2월 26일)까지 진행됩니다.
데모
삽입된 데모에서 File System Observer API의 실제 동작을 확인할 수 있습니다. 소스 코드를 확인하거나 Glitch에서 데모 코드를 리믹스하세요. 데모는 관찰된 디렉터리에서 무작위로 파일을 생성, 삭제 또는 수정하고 앱 창 상단에 해당 활동을 기록합니다. 그런 다음 앱 창 하단에 변경사항이 발생하면 이를 기록합니다. File System Observer API를 지원하지 않는 브라우저에서 이 내용을 읽는 경우 데모 스크린샷을 참고하세요.
의견
File System Observer API의 형태에 대한 의견이 있으면 WhatWG/fs 저장소의 문제 #123에 대한 의견을 남겨 주세요.