[TIL] IndexedDB API

์ตœ์†Œํฌยท2022๋…„ 9์›” 19์ผ
0

ํ”„๋ก ํŠธ์—”๋“œ ํ•™์Šต

๋ชฉ๋ก ๋ณด๊ธฐ
1/9

๐Ÿค” IndexedDB API์— ๋Œ€ํ•ด ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

IndexedDB API

IndexedDB๋Š” ๋งŽ์€ ์–‘์˜ ๊ตฌ์กฐํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํด๋ ˆ์ด์–ธํŠธ์— ์ €์žฅํ•˜๊ธฐ ์œ„ํ•œ ํด๋ผ์ด์–ธํŠธ ์Šคํ† ๋ฆฌ์ง€์ด๋‹ค.

๐Ÿ™‹โ€โ™€๏ธ ํด๋ผ์ด์–ธํŠธ ์Šคํ† ๋ฆฌ์ง€

localStorage, cookies, indexedDB๊ฐ€ ํด๋ผ์ด์–ธํŠธ ์Šคํ† ๋ฆฌ์ง€์— ์†ํ•œ๋‹ค.

ํ•ต์‹ฌ ๊ฐœ๋…

  • SQL์„ ์‚ฌ์šฉํ•˜๋Š” ๊ด€๊ณ„ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค(RDBMS)์™€ ๊ฐ™์ด ํŠธ๋žœ์žญ์…˜์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹œ์Šคํ…œ์ด๋‹ค.
  • ๊ณ ์ •์ปฌ๋Ÿผ ํ…Œ์ด๋ธ”์„ ์‚ฌ์šฉํ•˜๋Š” RDBMS์™€ ๋‹ฌ๋ฆฌ, IndexedDB๋Š” Javascript๊ธฐ๋ฐ˜์˜ ๊ฐ์ฒด์ง€ํ–ฅ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์ด๋‹ค.
  • ์—”๋”•์Šค ํ‚ค๋ฅผ ์‚ฌ์šฉํ•ด ์ €์žฅ ๋ฐ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์‚ฌ์šฉ ์ˆœ์„œ : ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์Šคํ‚ค๋งˆ ์ง€์ • -> ํ†ต์‹  ์˜คํ”ˆ(windpw -> ํŠธ๋žœ์žญ์…˜์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ ํ˜น์€ ์—…๋ฐ์ดํŠธ
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ธ”๋ก์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋‘ ๋น„๋™๊ธฐ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.

IDB

IndexedDB๋ฅผ ๊ฐœ์„ ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
IDB ๊ณต์‹Github
openDB
๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์—ฌ๋Š” ๋ฉ”์„œ๋“œ๋กœ, ํ–ฅ์ƒ๋œ IDBDatabase๋ฅผ ์œ„ํ•œ promise๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

onst db = await openDB(name, version, {
  upgrade(db, oldVersion, newVersion, transaction) {
    // โ€ฆ
  },
  blocked() {
    // โ€ฆ
  },
  blocking() {
    // โ€ฆ
  },
  terminated() {
    // โ€ฆ
  },
});
  • name : ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ์ด๋ฆ„
  • version (optional) : ์Šคํ‚ค๋งˆ ๋ฒ„์ „, ํ˜„์žฌ ๋ฒ„์ „์„ ์—ด๋ ค๋ฉด undefined๋กœ ์„ค์ •
  • upgrade (optional) : ๊ณผ๊ฑฐ์— ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ํ•ด๋‹น ๋ฒ„์ „์ด ์—ด๋ฆฐ ์  ์—†๋‹ค๋ฉด ํ˜ธ์ถœ๋œ๋‹ค. IndexDB์˜ upgradeneeded event(ํ˜„์žฌ ๋ฒ„์ „๋ณด๋‹ค ๋†’์€ ๋ฒ„์ „์„ ์˜คํ”ˆํ•  ๋•Œ ํ˜ธ์ถœ๋จ)์™€ ์œ ์‚ฌํ•˜๋‹ค.
  • blocked (optional) : ๊ธฐ์กด๋ณด๋‹ค ๋” ์˜ค๋ž˜๋œ ๋ฒ„์ „์ด ์žˆ์„ ๋•Œ ํ˜ธ์ถœ๋˜์–ด ์˜ค๋ž˜๋œ ๋ฒ„์ „์€ ๋”์ด์ƒ ์—ด๋ฆฌ์ง€ ์•Š๋Š”๋‹ค.
  • blocking (optional) : ๋งŒ์•ฝ ์—ฐ๊ฒฐ์ด ๋ฏธ๋ž˜ ์ƒ์œ„ ๋ฒ„์ „์˜ DB๊ฐ€ ์—ด๋ฆฌ๋Š” ๊ฒƒ์„ ๋ง‰์„ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋‹ค๋ฉด ํ˜ธ์ถœ๋œ๋‹ค.
  • terminated (optional) : db.close()์™€ ๊ฐ™์€ ์ผ๋ฐ˜์ ์ธ ๋Š๊น€์ด ์•„๋‹Œ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋น„์ด์ƒ์ ์œผ๋กœ ์—ฐ๊ฒฐ์„ ๋๋‚ผ๋•Œ ํ˜ธ์ถœ๋œ๋‹ค.

๊ณต์‹ ๋ฌธ์„œ ์ฝ”๋“œ ๋ถ„์„

  • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ํƒ€์ž…์„ ์ •์˜ํ•˜๋ ค๋ฉด ๊ฐ์ฒด ์ €์žฅ์†Œ์˜ ์ด๋ฆ„๋“ค์„ ํ‚ค๊ฐ’์œผ๋กœ ํ•˜๋Š” interface์—์„œ DBSchema๋ฅผ extendsํ•œ๋‹ค.
  • (์„ ํƒ์‚ฌํ•ญ) indexes๋Š” ์ธ๋ฑ์Šค ์ด๋ฆ„๋“ค์„ ๋งคํ•‘ํ•œ ์ง‘ํ•ฉ์ฒด์ด๋‹ค.
import { openDB, DBSchema } from 'idb';

interface MyDB extends DBSchema {
  'favourite-number': {
    key: string;
    value: number;
  };
  products: {
    value: {
      name: string;
      price: number;
      productCode: string;
    };
    key: string;
    indexes: { 'by-price': number };
  };
}

async function demo() {
  const db = await openDB<MyDB>('my-db', 1, {
    upgrade(db) {
      // ๊ฐ์ฒดํ˜• ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ ๋‹ค
      db.createObjectStore('favourite-number');

      const productStore = db.createObjectStore('products', {
        // ๊ฐ์ฒด์˜ prodcutCode๋ฅผ key๋กœ ์ง€์ •
        keyPath: 'productCode',
      });
      //  ๊ฐ์ฒด์˜ 'by-price'์— ์ธ๋ฑ์Šค ์ƒ์„ฑ
      productStore.createIndex('by-price', 'price');
    },
  });

  // ํƒ€์ž…์— ๋งž์œผ๋ฏ€๋กœ ์ž‘๋™ํ•œ๋‹ค.
  await db.put('favourite-number', 7, 'Jen');
  // ์ปดํŒŒ์ผ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. 'favourtie-number' store๋Š” ์ˆซ์žํƒ€์ž…์„ ์˜ˆ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  await db.put('favourite-number', 'Twelve', 'Jake');
}
profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€