File System API 권한 확인

브라우저 File System API 권한을 확인하고 요청한다.

현재 권한이 허용돼 있으면 바로 true를 반환한다. 허용되지 않았다면 권한을 요청한다. 권한 요청은 반드시 사용자 클릭 이벤트 안에서 호출해야 한다.

async function verifyPermission(handle: FileSystemHandle, readWrite: boolean) {
  const options = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }

  // 1. Check current permission
  if ((await handle.queryPermission(options)) === 'granted') {
    return true;
  }

  // 2. Request permission if not granted
  if ((await handle.requestPermission(options)) === 'granted') {
    return true;
  }

  return false;
}

구현에서 잘 먹히는 장면

이 helper는 queryPermission에서 requestPermission으로 이어지는 흐름을 매번 다시 쓰고 싶지 않을 때 잘 맞는다. 같은 handle을 재사용하는 UI일수록 판정 로직을 한곳에 모아 두는 편이 클릭 처리도 읽기 쉽다.

주의할 점은 권한 요청이 여전히 user gesture를 전제로 한다는 점과 readonly, readwrite 흐름을 함부로 섞지 않는 것이다. 사전 확인은 뒤에서 할 수 있어도, 실제 요청은 click handler 안에 두는 편이 안전하다.

실무 메모

이 스니펫은 typescript, browser, file-system-api 주변에서 같은 조작이나 판정을 매번 다시 쓰고 싶지 않을 때 잘 맞는다. 작은 보조 단위로 빼 두면 호출부에서는 의도만 읽기 쉬워진다.

반대로 분기와 전제조건이 늘어나 책임이 커진다면, 하나의 스니펫에 전부 넣지 않는 편이 낫다. 절차와 helper를 나누거나 역할별로 쪼개 두는 편이 유지보수에 유리하다.