[ Vue ] IndexDB 저장 및 수정

프론트만 사용하여 프로젝트를 진행할려고하다보니 데이터 저장을 활용하기 위해 indexDB를 활용하여 관리

indexDB는 데이터를 객체단위로 쉽게 저장하고 관리할 수 있어서 편하게 데이터를 관리할 수 있다.

 

보통은 indexDB에 저장할때는 보안을 위해 암호화를 해야하지만 지금 진행하는 프로젝트는 암호화까지는 굳히 할 필요가 없을것같아 제외

---

Installment

 npm install idb

 

처음 indexDB를 공부할때는 라이브러리를 따로 설치안하고 했었는데 암호화까지 해보면서 점점 복잡해져서 이번엔 그냥 idb라이브러리를 설치해서 진행

---

Init Database

우선 기본적으로 database를 만들어준 후 그 안에 테이블을 생성한다.

각 테이블별로 ts파일을 만들어서 관리를 진행

 

우선 openDB를 하고 각 파라미터에는 데이터베이스 이름, 버전, 테이블 정보 작성

import { openDB } from 'idb';
import {STORE_NAME_PAD} from "@/indexdb/padIndex.ts";

const STORE_VERSION = 1

export async function initDB() {
    return await openDB('AppDB', STORE_VERSION, {
        upgrade(db) {
            if (!db.objectStoreNames.contains(STORE_NAME_PAD)) {
                db.createObjectStore(STORE_NAME_PAD, { keyPath: 'id' });
            }
        },
    });
}

 

indexDB는 버전으로 관리를 하므로

데이터베이스의 구조가 바뀌면 버전을 업데이트를 해주거나 메모리에서 직접 indexDB 데이터베이스를 삭제해줘야한다.

 

AppDB라는 데이터 베이스를 만들고 이후 STORE_NAME_PAD의 테이블을 만들고 key값으로는 id값을 줬다.

key값은 해당 key값이 들어오면 자동으로 알아서 key를 잡아준다.

 

여기서 keyPath는 pk를 어떤 값으로 할지 정한다고 생각하면 된다.

추후 검색을 고려할경우에는 indexing처리를 하기위해 index key를 추가로 설정할 수 있다.

---

INDEX DB

데이터 관리는 store를 활용하여 관리하며,

모든 데이터는 해당 component -> store -> indexDB.ts 로 처리하여 관리

 

저장

 

저장할 데이터를 만들어주고 addPad로 데이터 저장

order를 계산하는 함수를 따로만들어서 order의 값을 적용

const onClickAdd = async (data: {tabName: string, color: string}) => {
  const newPad:Pad = {
    id: getRandomId(6),
    label: data.tabName,
    color: data.color,
    order: getMaxOrder(pads.value) + 1,
    timestamp: Date.now()
  }

  await addPad(newPad)
}

 

데이터를 저장할때 initDB를 호출하여 db를 열어준다.

이후 db.add로 데이터를 넣을 수 있으며 

파라미터로 테이블과, 저장할 데이터를 넣어준다.

export async function addPad(pad: Pad) {
    const db = await initDB()
    try {
        const id = await db.add(STORE_NAME_PAD, pad);
        return id
    } catch(error) {
        console.log(error)
    }
}

 

그럼 개발자도구에서 aplication > storage > indexDB에 해당 테이블에 데이터가 저장되는 것을 볼 수 있다.

 

데이터 가져오기

이후 마찬가지로 db오픈 해준 후 getAll로 해당 테이블의 데이터를 전부 가져온다.

export async function getAllPads() {
    const db = await initDB();
    try {
        const pads = await db.getAll(STORE_NAME_PAD);
        return buildTree(pads);
    } catch (error) {
        console.error('데이터 조회 실패:', error);
        return [];
    }
}

 

수정 & 삭제

수정과 삭제도 간단히 수정은 put으로 삭제는 delete로 하면 되며,

put은 수정할 데이터만 다시 넣어주면 된다. 이때는 id가 달라지면 다른 값으로 판단하므로 key값인 id는 무조건 고정으로 가야한다.

 

삭제는 이전에 keyPath를 id로 만들었기때문에 id값으로 해당 key값의 데이터를 삭제할 수 있다.

export async function updatePad(pad: MemoPad) {
    const db = await initDB()
    try {
        console.log(pad)
        await db.put(STORE_NAME_PAD, pad)
    } catch (error) {
        console.error('update Fail', error)
    }
}

export async function deletePad(id: string) {
    const db = await initDB()

    try {
        await db.delete(STORE_NAME_PAD, id)
    } catch (error) {
        console.error('delete Fail', error)
    }
}