IndexedDB를 어떻게 사용하나요? 완전한 CRUD 작업에 대한 가이드

IndexedDB에 대한 종합 가이드: 클라이언트측 스토리지를 위한 브라우저의 최강자

웹 애플리케이션이 더욱 정교해짐에 따라 효율적인 클라이언트측 스토리지 솔루션에 대한 필요성도 커졌습니다. 대량의 구조화된 데이터를 저장하기 위한 하위 수준 API인 IndexedDB는 강력한 오프라인 지원 애플리케이션을 만들려는 웹 개발자, 소프트웨어 엔지니어 및 웹 애호가를 위한 강력한 도구입니다.

이번 블로그에서는 IndexedDB가 무엇인지, 어떻게 작동하는지, 어떻게 효과적으로 사용하는지 실제 사례를 통해 살펴보겠습니다. PWA(Progressive Web App), 복잡한 대시보드, 게임 등 무엇을 구축하든 IndexedDB는 데이터를 원활하게 관리하는 데 도움이 될 수 있습니다.

---

IndexedDB란 무엇인가요?

IndexedDB는 파일 및 Blob을 포함하여 대량의 구조화된 데이터를 저장하도록 설계된 브라우저 기반 NoSQL 데이터베이스입니다. 쿠키나 localStorage와 달리 IndexedDB를 사용하면 구조화된 형식으로 데이터를 저장하고 인덱스를 사용하여 쿼리할 수 있으므로 복잡한 사용 사례에 이상적입니다.

IndexedDB의 주요 기능:

• 비동기 작업: IndexedDB와의 상호 작용은 차단되지 않으며 원활한 성능을 보장합니다.
• 구조화된 데이터 저장소: 데이터를 키-값 쌍으로 저장하여 인덱스를 사용한 효율적인 쿼리가 가능합니다.
• 오프라인 기능: 데이터가 로컬에 저장되므로 인터넷 연결 없이도 액세스할 수 있습니다.
• 큰 저장 용량: 쿠키나 localStorage에 비해 더 많은 저장 용량을 제공합니다.

IndexedDB 사용 사례:

• 프로그레시브 웹 앱: 원활한 경험을 위해 오프라인 데이터를 저장합니다.
• 대용량 데이터 저장: 사용자 기본 설정이나 애플리케이션 상태 등 대용량 데이터 세트를 저장합니다.
• 캐싱: 성능 향상을 위해 API 응답을 캐시합니다.

---

IndexedDB 시작하기

IndexedDB는 어떻게 작동하나요?

IndexedDB는 다음으로 구성된 데이터베이스 구조에서 작동합니다.

• 데이터베이스: 데이터를 위한 최상위 컨테이너입니다.
• 객체 저장소: 데이터가 저장되는 테이블이며 각각 고유한 이름으로 식별됩니다.
• 인덱스: 객체 저장소 내에서 쿼리를 최적화하는 구조.

IndexedDB API: 기본 작업

IndexedDB의 주요 작업은 다음과 같습니다.

1. 데이터베이스 열기: 데이터베이스를 생성하거나 액세스합니다.
2. 객체 저장소 생성: 데이터 저장소를 정의합니다.
3. CRUD 작업 수행: 데이터 추가, 읽기, 업데이트 및 삭제
4. 트랜잭션 사용: 데이터 작업을 원자적으로 관리합니다.

---

예 1: 데이터베이스 생성 및 열기

객체 저장소 사용자를 사용하여 MyDatabase라는 IndexedDB 데이터베이스를 생성하는 방법은 다음과 같습니다.

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

설명:

• indexedDB.open 메소드는 데이터베이스를 열거나 생성합니다.

• 새 데이터베이스를 생성하거나 버전을 업그레이드할 때 onupgradeneeded 이벤트가 트리거됩니다.

• id를 기본 키로 사용하여 users라는 객체 저장소가 생성됩니다.

---

예제 2: 객체 저장소에 데이터 추가

트랜잭션을 사용하여 객체 저장소에 데이터를 추가할 수 있습니다.

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

설명:

• 데이터를 수정하기 위해 읽기/쓰기 모드로 트랜잭션을 생성합니다.

• add 메소드는 사용자 객체 저장소에 데이터를 삽입합니다.

---

예제 3: 객체 저장소에서 데이터 읽기

get 메소드를 사용하여 데이터를 검색하거나 모든 항목을 반복합니다.

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readonly");
    const objectStore = transaction.objectStore("users");

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

설명:

• get 메소드는 키로 특정 레코드를 가져옵니다.

• 데이터 검색은 비동기식이므로 성공 및 오류 핸들러가 사용됩니다.

---

예 4: IndexedDB에서 데이터 업데이트

put 메소드를 사용하여 기존 레코드를 업데이트합니다.

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

---

예 5: IndexedDB에서 데이터 삭제

삭제 메소드를 사용하여 레코드를 제거합니다.

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

  request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const objectStore = transaction.objectStore("users");

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

---

IndexedDB와 기타 스토리지 솔루션 비교

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

---

IndexedDB 사용 모범 사례

• 트랜잭션을 올바르게 사용: 원자성을 보장하기 위해 항상 트랜잭션 내의 데이터 작업을 관리하세요.

• 정상적으로 오류 처리: 더 나은 디버깅과 사용자 피드백을 위해 오류 처리기를 구현합니다.

• 버전 제어: 스키마 변경 사항을 관리하려면 데이터베이스 버전을 신중하게 올리세요.

• 오프라인 시나리오 테스트: IndexedDB는 오프라인 기능에 자주 사용됩니다. 인터넷 연결 없이 예상대로 작동하는지 확인하세요.

---

결론

IndexedDB는 클라이언트 측 데이터 저장을 위한 강력한 도구로, localStorage와 같은 기존 저장 방법을 훨씬 능가하는 기능을 제공합니다. 구조화된 데이터, 대용량 저장 용량 및 오프라인 기능을 지원하는 IndexedDB는 최신 웹 애플리케이션을 구축하는 데 필수적인 기술입니다.

주요 시사점:

• IndexedDB는 크고 복잡한 데이터 세트를 로컬에 저장하는 데 이상적입니다.

• IndexedDB에서 데이터 작업 관리의 핵심은 트랜잭션입니다.

• 강력한 오프라인 지원을 제공하여 프로그레시브 웹 앱의 초석이 됩니다.

IndexedDB를 마스터하면 뛰어난 성능과 사용자 경험을 갖춘 확장 가능한 오프라인 우선 애플리케이션을 구축할 수 있습니다. 지금 프로젝트에서 IndexedDB를 실험해 보세요!

위 내용은 IndexedDB를 어떻게 사용하나요? 완전한 CRUD 작업에 대한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!