[JavaScript] 리액트에 indexedDB 사용하기

일전에 사이드프로젝트를 진행하면서 로컬스토리지와 세션스토리지 그리고 쿠키를 이용했었고

지금도 회사업무를 진행하면서 세션과 로컬스토리지, 쿠키를 이용하고있습니다.

 

하지만.... 사이드프로젝트를 진행할 당시 뭔가... 뭔가가 부족했었는데...

요즘이야 백, 프론트 상관없이 올포지션을 다 다룰수 있어야하지만... 난 아직도 부족하기 때문에

백엔드 프로젝트를 혼자서 구현하기가 아직도 버거워요. 그러다가 문득 찾은 것이 indexedDB!!!

 

이름 그대로 DB이다! mdn web docs 에서는 이렇게 설명하고 있습니다.

 

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다.

 

라고 설명하고 있습니다! 조금 더 자세한 설명은 아래의 링크로 접속하시면 볼 수 있습니다!

 

https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API

IndexedDB API - Web API | MDN

 

1. React에 indexedDB 살짝 끼얹어보기

이제 진짜로 indexedDB를 React 프로젝트에 적용시켜보겠습니다.

일단 프로젝트의 root 파일에 indexedDB를 열어준다고(?) 작성을 해줍니다.

 

MDN 문서에서는 아래와 같이 나와있습니다.

// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction =
  window.IDBTransaction ||
  window.webkitIDBTransaction ||
  window.msIDBTransaction;
window.IDBKeyRange =
  window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)

다만 TypeScript를 사용하면 window.indexedDB 만 인식되고 있었습니다.

 

저는 작성할 때 root 파일에 indexedDB를 초기화 하고 필요한 객체 저장소를 생성하는 함수를 실행시키게 설정해놨습니다.

 

export const indexedDBStart = () => {
  const indexedDB = window.indexedDB;
  const dbName = "tableName";
  const request = indexedDB.open(dbName, 1);
  request.onupgradeneeded = (e: any) => {
    const db = e.target.result;
    const articleStore = db.createObjectStore("article", {
      keyPath: "id",
      autoIncrement: true,
    });
    const memberStore = db.createObjectStore("member", {
      keyPath: "id",
      autoIncrement: true,
    });
  };
  request.onsuccess = (e: any) => {
  	console.log("성공");
  };
  request.onerror = (e: any) => {
    console.error("실패 : ", e.target.error);
  };
};

 

indexedDBStart 가 실행되면 dbName 이라는 이름의 DB, 그리고 버전은 1인 indexedDB 를 열어달라고 요청합니다. 그리고 만약 해당 indexedDB가 없으면 dbName, 버전 1 이라는 indexedDB를 생성하게 됩니다.

 

request.onupgradeneeded 를 통해 데이터베이스 객체를 가져온 후 article 과 member 란 객체 저장소를 생성하게 됩니다.

 

그리고 객체 저장소 생성에 성공하면 console.log에 '성공' 이라는 메시지가 출력되고

만약 실패한다면 '실패 : error' 가 출력됩니다.

 

자 이제 개발자모드를 켜서 확인해보시면 아래와 같이 브라우저 저장소가 생성되어있습니다!

2. indexedDB에 데이터 저장해보기

이제 저장소를 만들었으니 해당 저장소에 post 하는 방법을 알아보겠습니다.

먼저 article 에 게시글을 저장해보겠습니다.

 

export const indexedDBPost = (postDatas: any) => {
  const idb = window.indexedDB;
  return new Promise((resolve, reject) => {
    const dbOpen = idb.open("tableName", 1);
    dbOpen.onsuccess = () => {
      const db = dbOpen.result;
      const transaction = db.transaction("article", "readwrite");
      const tableNameDB = transaction.objectStore("article");

      const postData = tableNameDB.put({
        title: postDatas.title,
        contents: postDatas.contents,
        createDt: postDatas.createDt,
        writer: postDatas.writer,
      });

      postData.onsuccess = (e) => {
        transaction.oncomplete = () => {
          db.close();
        };
        resolve(e.type);
      };

      postData.onerror = (e) => {
        console.error("error : ", e);
        reject(e);
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
};

해당 함수를 통해 글 작성 버튼을 누르면 아래의 캡처화면과 같이 indexedDB에 게시글 정보가 저장됩니다.

 

해당 캡쳐에서는 샘플용으로 간단하게 작성해서 데이터를 작성했지만 실제로는 쿠키나  스토리지보다 더 많은 데이터를 저장시킬 수 있습니다.

 

해당 캡쳐는 제가 사이드프로젝트를 하면서 indexedDB를 활용하여 작성 한 데이터 샘플입니다. 캡쳐본처럼 다양한 데이터를 저장시킬 수 있는 장점이 있습니다.

 

3. indexedDB에 저장된 데이터 불러오기

그럼 간단하게 데이터를 저장해봤는데 이번에는 저장된 데이터를 불러오는 방법을 알아보겠습니다!

 

export const getAllDataFromIndexedDB = () => {
  const idb = window.indexedDB;
  return new Promise((resolve, reject) => {
    const dbOpen = idb.open("tableName", 1);

    dbOpen.onsuccess = () => {
      let db = dbOpen.result;
      const transaction = db.transaction("article", "readonly");
      const reviewDB = transaction.objectStore("article");
      const review = reviewDB.getAll();

      review.onsuccess = (e: any) => {
        const data = e.srcElement.result;
        console.log('성공 데이터 불러오기',data);
        resolve(data);
      };

      review.onerror = (e) => {
        console.log("error", e);
        reject(e);
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
};

 

indexedDB에 저장된 데이터를 불러오는 코드입니다. 기본적은 구조는 post와 비슷합니다.

먼저 오픈 할 테이블을 선택해준 후 dbOpen 이 성공하면 해당 db안의 컬럼을 선택해주고 컬럼안의 데이터들을 불러와주면 끝입니다.

 

정상적으로 console에 찍히는 모습을 볼 수 있습니다.

 

만약 저장된 데이터가 여러개라면 아래의 캡쳐와 같이 console에 찍히게 됩니다!

 

이제 컴포넌트에서 불러온 데이터를 state애 저장 후 사용하면 됩니다!

 

만약 특정한 값의 데이터만 불러오고 싶은 경우가 있는데 저는 filter를 통해 특정 데이터를 선택한 후 resolve에 넣어주어 사용하고 있습니다.

 

// 특정 데이터 선별해서 사용하기

export const getAllDataFromIndexedDB = (postWriter:string) => {
  const idb = window.indexedDB;
  return new Promise((resolve, reject) => {
    const dbOpen = idb.open("tableName", 1);

    dbOpen.onsuccess = () => {
      let db = dbOpen.result;
      const transaction = db.transaction("article", "readonly");
      const reviewDB = transaction.objectStore("article");
      const review = reviewDB.getAll();

      review.onsuccess = (e: any) => {
        const data = e.srcElement.result;
        const filterData  = data.filter((item) => item.writer === postWriter)
        console.log('필터 불러오기',filterData);
        resolve(filterData);
      };

      review.onerror = (e) => {
        console.log("error", e);
        reject(e);
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
};

 

 

4. indexedDB에 저장된 데이터 삭제하기

삭제또한 매우 간단합니다. indexedDB에 저장 시 자동으로 생성되는 id값으로 데이터 삭제를 진행합니다.

 

export const indexedDBDelete = (id: number) => {
  const idb = window.indexedDB;
  return new Promise((resolve, reject) => {
    const dbOpen = idb.open("tableName", 1);
    dbOpen.onsuccess = () => {
      const db = dbOpen.result;
      const transaction = db.transaction("article", "readwrite");
      const tableNameDB = transaction.objectStore("article");

      const deleteRequest = tableNameDB.delete(id);

      deleteRequest.onsuccess = () => {
        transaction.oncomplete = () => {
          db.close();
          resolve(true);
        };
      };

      deleteRequest.onerror = (e) => {
        console.error("error : ", e);
        reject(e);
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
};

삭제 함수를 통해 삭제를 진행하는데 만약 id =2 인 값을 삭제하면 아래와 같이 해당 id를 가진 컬럼이 삭제됩니다.

 

 

이상 간단하게 indexedDB사용법을 정리해봤습니다.

indexedDB를 메인으로 사용하기에는 다방면으로 무리가 있을 듯 하지만 그래도 로컬환경에나서 프론트 기준에서 백엔드 작업이 진행되지 않았을 때에는 필요한 데이터를 최대한 비슷한 환경에서 테스트해보기에는 좋을 것 같습니다.

 

잘못된 부분 지적은 언제나 감사합니다.