IndexedDB
IndexedDB (클라이언트 사이드 NoSQL)
IndexedDB는 브라우저 내부에 내장된 강력한 NoSQL 방식의 비동기 데이터베이스입니다. 단순한 키-값 쌍을 넘어, 파일, Blob, 객체 등 구조화된 대용량 데이터를 저장하고 인덱스를 이용해 고속으로 검색할 수 있습니다. Web Storage(5MB)의 용량 한계를 극복하고 오프라인 웹 애플리케이션(PWA)을 구축할 때 핵심적인 역할을 합니다.
Web Storage vs IndexedDB
핵심 개념
| 개념 (Concept) | 설명 및 역할 |
|---|---|
Database |
데이터베이스의 최상위 컨테이너입니다. 버전을 가지며, 버전이 올라갈 때만 구조를 변경할 수 있습니다. |
Object Store |
관계형 DB의 '테이블(Table)'에 해당합니다. 실제 데이터 레코드(JavaScript 객체)가 저장되는 공간입니다. |
Transaction |
DB를 읽거나 쓰는 모든 작업은 트랜잭션 내에서 이루어져야 합니다. (데이터 무결성 보장) |
Cursor |
Object Store 내의 데이터를 순회하며 읽어올 때 사용하는 반복자(Iterator)입니다. |
⚠️ 주의: 비동기 처리의 복잡성
IndexedDB는 순수 Promise 기반이 아닌 이벤트(DOM Event) 기반 비동기 API입니다. 요청 객체(Request)에 onsuccess, onerror 핸들러를 등록하여 결과를 처리해야 하므로 코드가 길어질 수 있습니다. 실무에서는 이를 Promise로 래핑한 idb 같은 라이브러리를 주로 사용합니다.
<div class="db-demo">
<h3>도서 관리 시스템 (IndexedDB)</h3>
<div class="input-group">
<input type="text" id="bookTitle" placeholder="도서 제목을 입력하세요">
<input type="text" id="bookAuthor" placeholder="저자 입력">
</div>
<div class="controls">
<button id="btnAdd" class="btn primary">책 추가하기</button>
<button id="btnRead" class="btn success">모든 책 불러오기</button>
<button id="btnClear" class="btn danger">DB 초기화 (삭제)</button>
</div>
</div>