기본 사용법

1
2
3
4
5
6
7

# 소스코드 구조
src --+-- database
      |     +-- index.ts
      +-- models
      |     +-- index.ts
      |     +-- user.ts
      +-- index.ts (진입점)

  • BoxDB 인스턴스 생성하기

    1
2
3
4
5
6
7

    // src/database/index.ts
import BoxDB from 'bxd';

export const DATABASE_NAME = 'database';
export const VERSION = 1;

export const database = new BoxDB(DATABASE_NAME, VERSION);

  • Box 정의하기

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

    // src/models/user.ts
import BoxDB, { BoxData } from 'bxd';
import { database } from '../database';

const schema = {
  _id: {
    type: BoxDB.Types.NUMBER,
    key: true,
  },
  name: BoxDB.Types.STRING,
  address: BoxDB.Types.STRING,
  hobby: BoxDB.Types.ARRAY,
  created_at: BoxDB.Types.DATE,
  updated_at: BoxDB.Types.DATE,
} as const;

const User = database.create('user', schema);

export type UserType = BoxData<typeof schema>;
export default User;

  • Box 의 엔트리 소스 작성하기

    1
2

    // src/models/index.ts
export { default as User } from './user';

  • Box 를 사용하기 전에 데이터베이스 열기

    1
2
3
4

    // src/index.ts
import { database } from './database';

await database.open();

  • 준비 끝!

    1
2
3
4

    import { User } from 'src/models';

await User.get(1);
...

React

  • 기본 사용법에 이어서 진행

  • React Context와 Provider 생성하기

    1
2
3
4
5
6
7
8

    // context.ts
import { createContext, ReactElement } from 'react';
import { database } from './index';

export const BoxContext = createContext(database);
export const BoxProvider = ({ children }: { children: ReactElement }) => {
  return <BoxContext.Provider value={database}>{children}</BoxContext.Provider>;
};

  • Provider 준비

    1
2
3

    <BoxProvider>
  ...
</BoxProvider>

  • BoxDB 컨텍스트 사용하기

    1
2
3
4

    import { useContext } from 'react';
import { BoxContext } from 'path/to/context.ts';

const db = useContext(BoxContext);

예제

  • Any Note: 심플 노트 웹 애플리케이션
  • Hash Worker: 웹 워커를 통해 해시값을 찾고, 작업 기록을 IndexedDB 에 저장하는 샘플