# Web Locks API

> Clean Markdown view of GeekNews topic #17727. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17727](https://news.hada.io/topic?id=17727)
- GeekNews Markdown: [https://news.hada.io/topic/17727.md](https://news.hada.io/topic/17727.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-11-13T10:02:01+09:00
- Updated: 2024-11-13T10:02:01+09:00
- Original source: [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API)
- Points: 20
- Comments: 0

## Summary

Web Locks API는 비동기적으로 락을 획득하고 해제하여 여러 탭이나 웹 워커에서 리소스를 안전하게 조율할 수 있도록 돕습니다. 기존의 localStorage나 IndexedDB의 동기화 이슈를 해결하는 대안으로 활용될 수 있는데, Secure Context(HTTPS)에서만 사용 가능하며, 데드락 방지를 위해 락 요청 순서를 지키고 타임아웃을 설정하는 등의 주의가 필요합니다. Shared 모드를 통해 읽기 전용 작업의 성능을 높일 수 있지만 경쟁 조건에 대한 철저한 검토가 필요합니다.

## Topic Body

-	Web Locks API는 하나의 탭이나 웹 워커에서 비동기적으로 락을 획득하고, 작업을 수행한 후 락을 해제할 수 있게 해줌  
-	락이 유지되는 동안 동일한 origin 내에서 다른 스크립트는 동일한 락을 획득할 수 없으므로 여러 탭이나 워커에서 리소스를 안전하게 조율할 수 있음  
-	**Secure Context(HTTPS)** 에서만 사용 가능하며, Web Workers 에서 사용 가능  
  
### 주요 개념 및 사용 방법  
  
-	**락(Lock)** 은 웹 애플리케이션에서 정의한 이름으로 식별되는 추상적인 리소스  
-	예를 들어, 여러 탭에서 IndexedDB와 네트워크 동기화를 할 때, “my_net_db_sync”라는 락을 사용하여 한 번에 하나의 탭만 동기화를 수행할 수 있음  
-	사용 흐름:  
	1.	락 요청  
	2.	비동기 작업 수행  
	3.	작업 완료 후 자동으로 락 해제  
  
### 예제 코드  
  
navigator.locks.request("my_resource", async (lock) => {  
  await do_something();  
  await do_something_else();  
});  
  
-	락이 유지되는 동안 동일한 락에 대한 다른 요청은 대기열에 추가되며, 락이 해제되면 첫 번째 요청이 처리됨  
  
### 옵션  
  
-	mode: 기본 모드는 “exclusive”(단독), “shared”(공유) 모드도 가능. “exclusive”는 하나의 요청만 허용, “shared”는 다수 허용 가능  
-	ifAvailable: 즉시 락을 획득할 수 없는 경우 요청 실패, 콜백은 null 반환  
-	steal: 동일한 이름의 기존 락을 해제하고 새로운 요청을 우선 처리  
-	signal: AbortSignal을 통해 요청을 중단할 수 있음 (예: 타임아웃 구현)  
  
### 모니터링  
  
-	navigator.locks.query()를 사용하여 현재 origin의 락 상태를 조회할 수 있음  
-	이는 디버깅 시 유용하며, 어떤 락이 유지되고 있는지, 요청된 락이 무엇인지 확인 가능  
  
### 고급 사용법  
  
-	비동기 작업의 완료 시점을 명시적으로 제어하려면 Promise를 반환 가능  
  
let resolve;  
const p = new Promise((res) => { resolve = res });  
  
navigator.locks.request("my_resource", (lock) => p);  
  
-	resolve() 호출 시 락이 해제됨  
  
### 데드락(Deadlock) 방지  
  
-	데드락은 서로 다른 요청이 순서 문제로 충돌하여 진행이 불가능한 상황  
-	예를 들어, 탭 1이 락 A를 가지고 있고, 탭 2가 락 B를 가진 상황에서, 탭 1이 락 B를 요청하고 탭 2가 락 A를 요청하면 서로 기다리게 됨  
-	이를 방지하려면:  
-	락 요청은 중첩되지 않도록 함  
-	락 요청은 순서를 지켜서 진행  
-	타임아웃을 설정하여 요청을 중단  
  
### 인터페이스  
  
-	Lock: 요청된 락의 이름과 모드를 제공  
-	LockManager: 새로운 락을 요청하거나 기존 락을 조회할 수 있는 메서드 제공  
-	navigator.locks로 인스턴스 획득 가능  
-	WorkerNavigator.locks는 Web Workers에서 사용 가능  
  
### 스펙 및 브라우저 지원  
  
-	스펙: Web Locks API  
-	브라우저 호환성: 일부 브라우저에서만 지원되며, 최신 브라우저에서의 지원 여부는 MDN에서 확인 가능  
  
### GN⁺의 의견  
  
-	Web Locks API는 비동기 환경에서 리소스 동기화 문제를 해결하는 데 유용함  
-	데드락 발생 가능성이 있으므로 사용 시 주의가 필요하며, 타임아웃 설정과 같은 안전 장치를 고려해야 함  
-	Shared mode는 읽기 전용 작업에서 성능을 높일 수 있으나, 여전히 경쟁 조건에 대한 철저한 검토가 필요함  
-	이 API는 기존의 localStorage나 IndexedDB의 동기화 이슈를 해결하는 대안으로 활용될 수 있음

## Comments



_No public comments on this page._