IndexedDB의 모든 것: 클라이언트 측 데이터 저장의 새로운 기준

2024-10-30 22:28:39

javascripttypescriptopensourceindexeddb

IndexedDB 개요

우리는 웹 애플리케이션에서 클라이언트 측 데이터 저장을 관리하기 위해 다양한 방법들을 활용합니다. 그중 IndexedDB는 대용량의 구조화된 데이터를 클라이언트 측에 저장할 수 있는 저수준 API로, 비동기 데이터 처리가 가능합니다. 이번 시간에는 IndexedDB의 주요 기능, 필요성, 그리고 사용법에 대해 살펴보고, 기존에 많이 사용되던 localStorage와의 차이점을 알아보겠습니다.

IndexedDB의 주요 개념

IndexedDB는 브라우저 내에서 대량의 데이터 저장을 지원하며, 비동기적 작업 처리를 통해 데이터 저장 및 검색 작업의 효율성을 높일 수 있습니다. 이 API는 트랜잭션 기반으로 작동하며, 데이터의 일관성과 무결성을 보장합니다.

여기서 Мы индексы можно использовать для реализации быстрого поиска данных. 이는 대규모 웹 애플리케이션에서 특히 유용합니다. IndexedDB는 key-value 저장소라는 점에서 NoSQL과 비슷한 성격을 가집니다.

MDN을 통한 IndexedDB 설명

Mozilla의 MDN 웹 문서에서는 IndexedDB를 클라이언트 측에서 대량의 구조화된 데이터를 저장하기 위한 저수준 API로 설명하고 있습니다. MDN IndexedDB 문서에서는 IndexedDB의 구조와 기능적 특성에 대해 자세히 다루고 있습니다.

IndexedDB 설정 및 사용법

IndexedDB를 사용하기 위해선 데이터베이스를 열고, 객체 저장소를 생성하여 데이터를 추가해야 합니다. 예제 코드를 통해 이러한 과정을 단계별로 살펴보겠습니다.

데이터베이스 열기

먼저, 데이터베이스를 열기 위한 요청을 만듭니다. indexedDB.open() 메소드를 사용하며, 두 번째 인자는 데이터베이스의 버전을 나타냅니다.

const DBOpenRequest = window.indexedDB.open('toDoList', 4);

이 요청은 비동기적으로 처리되며, 성공 또는 실패에 따른 이벤트 핸들러를 등록해야 합니다.

성공 및 실패 여부 확인

데이터베이스 연결 성공 시, onsuccess 이벤트 핸들러가 호출되며, 데이터베이스 객체를 전역 변수에 저장하여 이후의 데이터 처리에 활용합니다.

DBOpenRequest.onsuccess = (event) => {
  console.log('Database initialised.');
  db = DBOpenRequest.result;
  // 기존 데이터 베이스의 데이터를 통해 인터페이스를 업데이트
  displayData();
};

DBOpenRequest.onerror = (event) => {
  console.error('Error loading database.');
};

데이터 추가

IndexedDB에 데이터를 추가호 데이터를 트랜잭션을 열어야 합니다. 다음 예시는 toDoList라는 객체 저장소에 새로운 아이템을 추가하는 예제입니다.

const transaction = db.transaction(['toDoList'], 'readwrite');
const objectStore = transaction.objectStore('toDoList');
const objectStoreRequest = objectStore.add(newItem[0]);

objectStoreRequest.onsuccess = (event) => {
  console.log('New item added.');
};

transaction.oncomplete = () => {
  console.log('Transaction completed: database modification finished.');
  displayData();
};

transaction.onerror = () => {
  console.error(`Transaction not opened due to error: ${transaction.error}`);
};

IndexedDB의 가장 주요한 특징은 비동기적으로 데이터를 관리함으로써 큰 데이터셋을 다룰 수 있다는 점입니다. 이는 localStorage와는 다른 효율성을 제공합니다.

IndexedDB vs localStorage

localStorage는 대량의 데이터를 다루기에 적합하지 않으며, 모든 작업이 동기적으로 처리되어 대규모 데이터 관리에서는 효율적이지 않습니다. 이에 비해 IndexedDB는 대규모 데이터 처리를 염두에 두고 비동기 작업을 통해 성능을 최적화하였습니다. IndexedDB는 무겁고 복잡한 API로 느껴질 수 있지만, Dexie와 같은 라이브러리들을 통해 복잡성을 줄일 수 있습니다.

Dexie를 통한 데이터 처리 간소화

Dexie는 IndexedDB의 복잡성을 줄여주기 위한 Wrapper API입니다. 이에 대한 대표적인 예시는 데이터 추가 작업을 훨씬 간소화 시킵니다.

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
  const [name, setName] = useState('');
  const [age, setAge] = useState(defaultAge);
  const [status, setStatus] = useState('');

  async function addFriend() {
    try {
      const id = await db.friends.add({ name, age });
      setStatus(`Friend ${name} successfully added. Got id ${id}`);
      setName('');
      setAge(defaultAge);
    } catch (error) {
      setStatus(`Failed to add ${name}: ${error}`);
    }
  }

  return (
    <>
      <p>{status}</p>
      Name: <input type="text" value={name} onChange={(ev) => setName(ev.target.value)} />
      Age: <input type="number" value={age} onChange={(ev) => setAge(Number(ev.target.value))} />
      <button onClick={addFriend}>Add</button>
    </>
  );
}

이처럼 Dexie를 활용하면 복잡한 작업을 간단하게 처리할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.

결론

IndexedDB는 클라이언트 측에서 대용량 데이터를 효율적으로 관리할 수 있는 강력한 도구입니다. 다만 복잡한 API로 인해 초기 진입 장벽이 있지만, Dexie 등의 라이브러리를 활용하여 이를 극복할 수 있습니다. 이번 블로그에서는 IndexedDB의 기본 구조와 사용법, 그리고 Dexie를 통해 코드의 복잡성을 줄이는 방법에 대해 살펴보았습니다.

R_11