idb 라이브러리 간단 정리

idb는 IndexedDB에 약간의 편의성을 더해주는 라이브러리다.

핵심적으로는 Promise를 쓸 수 있게 해준다.

npm i idb

가장 핵심적인 메서드와 기능들만 정리해보자.

데이터베이스 열기

const db = await openDB(name, version, {
  upgrade(db, oldVersion, newVersion, transaction, event) {
    // IDBOpenDBRequest: upgradeneeded 이벤트에 대응됨
  },
  blocked(currentVersion, blockedVersion, event) {
    // IDBOpenDBRequest: blocked 이벤트에 대응됨
  },
  blocking(currentVersion, blockedVersion, event) {
    // IDBDatabase: versionchange 이벤트에 대응됨
  },
  terminated() {
    // IDBDatabase: close 이벤트에 대응됨
  },
})

window.indexedDB.open() 대신에 openDB() 메서드로 데이터베이스를 열 수 있다.

Promise로 IDBDatabase를 돌려준다.

이벤트 핸들러 대신에 Promise 사용

데이터베이스를 열고난 이후의 작업들에서, API 사용에 있어서는 큰 변화는 없다.

하지만 IDBRequest를 돌려주는 메서드들이 Promise로 결과값을 바로 돌려준다.

request를 받아서 success 이벤트로 처리해서 event.target.result로 결과에 접근하는 과정을 간략화시켜주는거다.

const store = db.transaction(storeName).objectStore(storeName)
const value = await store.get(key)

IDBDatabase shortcuts

Object Store shortcuts

db
  .transaction(["storeName"], "readwrite")
  .objectStore("storeName")
  .get("key").onsuccess = (event) => {
  console.log(event.target.result)
}

이 코드처럼, 하나의 액션을 위해 트랜잭션을 만드는 경우가 종종 있다.

이런 경우에 대한 shortcut들을 제공한다.

const value = await db.get("storeName", "key")

맨 앞에 Object Store의 이름을 받고, 이후에는 원래 메서드와 똑같은 argument들을 받을 수 있다고 한다.

shortcut들의 리스트는 다음과 같다고 한다 :

• get()
• getKey()
• getAll()
• getAllKeys()
• count()
• put()
• add()
• delete()
• store()

Index shortcuts

db
  .transaction(["storeName"], "readwrite")
  .objectStore("storeName")
  .index("indexName")
  .get("key").onsuccess = (event) => {
  console.log(event.target.result)
}

마찬가지로 Index 접근에 대한 트랜잭션에 대해서도 shortuct을 제공한다고 한다.

const value = await db.getFromIndex("storeName", "indexName", "key")

• getFromIndex()
• getKeyFromIndex()
• getAllFromIndex()
• getAllKeysFromIndex()
• countFromIndex()

IDBTransaction

tx.store

트랜잭션을 만들 때 Object Store 이름에 1개만 받았다면, store 프로퍼티로 Object Store를 바로 접근하게 해준다고 한다.

const objectStore = db.transaction("storeName").store

만약에 여러 개의 Object Store에 대해 트랜잭션을 만들었다면, 원래대로 objectStore()로 선택해야 한다고 한다.

IDBCursor

let cursor = await db.transaction(storeName).store.openCursor()

while (cursor) {
  console.log(cursor.key, cursor.value)
  cursor = await cursor.continue()
}

advance(), continue(), continuePrimaryKey()가 cursor로 resolve되는 Promise를 돌려준다고 한다.

Iteration

const tx = db.transaction(storeName)

for await (const cursor of tx.store) {
  // …
}

store, index, cursor를 iterate 할 수 있다고 한다.

const index = db.transaction("books").store.index("author")

for await (const cursor of index.iterate("Douglas Adams")) {
  console.log(cursor.value)
}

참고

• 생략한 내용이 많으므로 자세한 내용은 문서(github README) 참고
• jakearchibald/idb (github.com)