노트

IndexedDB와 idb

IndexedDB

프런트엔드#browser#db · 연결된 개념 4개

쉽게 말하면

IndexedDB는 브라우저 안에 둔 큰 창고 같은 데이터베이스예요. 그런데 문 여닫는 절차가 번거로워서, idb가 그 절차를 async/await 한 줄로 줄여 주는 얇은 손잡이 역할을 해요.

비유가 깨지는 곳 창고라고 늘 좋은 건 아니에요. 문자열 몇 개면 동기 API인 localStorage가 더 간단하고, IndexedDB는 용량이 크거나 객체·Blob을 다룰 때 써요.

IndexedDB는 브라우저에 구조화된 데이터를 대량으로 저장하는 트랜잭션 기반 키-값 데이터베이스다. idb는 이벤트·콜백 방식인 네이티브 API(Application Programming Interface)를 Promise로 감싼 1KB 남짓의 얇은 래퍼다.

// 네이티브: request마다 onsuccess/onerror
const req = indexedDB.open('myDB', 1)
req.onsuccess = e => {
  const tx = e.target.result.transaction('store', 'readonly')
  tx.objectStore('store').get('key').onsuccess = ev => console.log(ev.target.result)
}
 
// idb: async/await
const db = await openDB('myDB', 1)
console.log(await db.get('store', 'key'))
  • idb는 단일 작업의 트랜잭션을 알아서 열어 주고(db.get·put·delete), 에러를 try/catch로 잡게 해 주며, 커서를 for await로 돈다(idb/with-async-ittr로 import할 때). TypeScript 스키마 타입도 지원한다
  • 의존성을 최소화해야 하거나 트랜잭션을 아주 세밀하게 다뤄야 하면 네이티브를 쓴다
  • 문자열 몇 개를 저장하는 정도라면 동기 API인 localStorage가 더 간단하다. IndexedDB는 용량이 크거나 객체·Blob을 다룰 때 쓴다
  • 오프라인 우선 앱(로컬 퍼스트 아키텍처)이나 Electron 렌더러의 로컬 저장소로도 쓰인다. Promise 동작은 Promise

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • DB 인덱스와 트레이드오프

    DB 인덱스는 특정 컬럼 값으로 행을 빨리 찾도록 테이블 옆에 따로 유지하는 보조 자료구조(auxiliary data structure)다. 관계형 DB의 기본 인덱스는 정렬된 균형 트리(B-tree 계열)라서, 전체를 훑지 않고 트리를 따라 내려가 원하는 행에 닿는다.

  • 저장소 역할 분담 (DB·캐시·큐·검색)

    서버 애플리케이션 옆에는 거의 늘 관계형 DB, 인메모리 캐시, 메시지 브로커(message broker), 검색 엔진이 붙는다. 하나로 다 하지 않는 이유는 데이터의 성격(영구성·속도·전달·검색)마다 잘하는 도구가 다르기 때문이다.

  • 역색인과 검색 엔진

    역색인(inverted index)은 "각 문서에 어떤 단어가 있나" 대신 거꾸로 "이 단어가 어느 문서들에 있나"를 미리 만들어 둔 자료구조다. 책 뒤의 찾아보기와 같다. OpenSearch·Elasticsearch 같은 검색 엔진은 이 구조로 전문 검색(full-text search)을 빠르게 한다.

  • CDC (변경 데이터 캡처)

    CDC(Change Data Capture)는 데이터베이스의 변경 로그를 읽어 "어떤 행이 어떻게 바뀌었다"는 이벤트로 바꿔 내보내는 기법이다. 애플리케이션 코드가 아니라 DB가 이미 남기는 기록에서 변경을 뽑아내므로, 다른 저장소와 동기화할 때 누락 위험이 가장 낮다.

  • ACID

    ACID는 DB 트랜잭션이 보장해야 할 네 가지 성질이다. 트랜잭션은 "계좌 이체의 출금 + 입금"처럼 함께 성공하거나 함께 실패해야 하는 논리적 작업 단위다.

보기 옵션