minstudio

IndexedDB

강력한 클라이언트 사이드 데이터베이스

IndexedDB는 사용자의 브라우저 내에 대량의 구조화된 데이터(객체, 파일, Blob 등)를 저장하고 관리하기 위한 로우 레벨 API입니다. Web Storage(localStorage)가 단순한 문자열 키-값 쌍과 적은 용량 제한을 가지는 것에 비해, IndexedDB는 인덱스를 활용한 고성능 검색과 트랜잭션을 지원하는 진정한 비동기 NoSQL 데이터베이스 역할을 합니다.

인터넷 연결이 끊긴 상태에서도 작동해야 하는 오프라인 퍼스트(Offline-first) 웹 애플리케이션이나 프로그레시브 웹 앱(PWA)에서 데이터를 로컬에 동기화할 때 핵심적으로 사용됩니다.

IndexedDB

Database 생성/오픈

Object Store 생성 (테이블 개념)

Transaction 시작

데이터 추가/수정/삭제/조회

인덱스를 통한 빠른 검색

 
// IndexedDB 기본 사용 절차 예제

// 1. 데이터베이스 오픈 (이름: 'MyStore', 버전: 1)
const request = window.indexedDB.open('MyStore', 1);

// 2. 최초 생성 또는 버전이 올라갈 때 스키마 설정 (Object Store 생성)
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 'id'를 기본 키(Key Path)로 하는 'users' 스토어 생성
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  // 검색을 위한 인덱스 생성
  objectStore.createIndex('name', 'name', { unique: false });
  console.log("데이터베이스 스키마가 구성되었습니다.");
};

// 3. 성공적으로 열렸을 때 데이터 조작
request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 트랜잭션 시작 및 쓰기 권한 획득
  const transaction = db.transaction(['users'], 'readwrite');
  const objectStore = transaction.objectStore('users');
  
  // 데이터 추가
  const addRequest = objectStore.add({ id: 1, name: 'Alice', email: 'alice@example.com' });
  
  addRequest.onsuccess = function() {
    console.log("데이터가 성공적으로 IndexedDB에 저장되었습니다.");
  };
};

request.onerror = function(event) {
  console.error("데이터베이스 에러:", event.target.error);
};
IndexedDB | Minstudio