Indexed DB는 브라우저에서 지원하는 DB 로 최근 엘리스 수업 중 배웠으나
비동기 개념 및 심화 부분 때문인지 indexed DB 는 체계적으로 배우지 않고 일부 코드 사용만을 보여주어
이해가 가지 않고, 그런 상태로 indexed DB를 엘리스 과정 중 꾸준히 마주치다보니 개인적으로 따로 공부가 필요하다고
생각하여 정리해보려 한다
indexed db의 구성 요소
Database
MariaDB 의 databse 와 같다
즉, db의 파일들이라고 보면 된다
여러개의 database를 만들 수 있다
Object Store
MariaDB의 table 과 같다
즉, 실제 데이터를 key-value로 입력할 곳이다
당연히 중복되는 Obeject Store 이름을 가지면 안되며, key를 생성할수 있는 key generator 와 key path(아래에 다시 설명) 는 선택하여 가지게 할 수 있다
key path 를 설정하면 in-line-key(내부 key)를 사용해야되고, 설정하지 않으면 out-of-line key(외부 key)를 사용해야 한다
저장된 각각의 데이터들을 record 라고 한다
Transaction
특정 데이터베이스에 대한 데이터 상호작용을 의미하며, 모든 데이터의 read / write 는 transaction 내에서 일어나야 한다
모드로는 아래의 3가지를 가지며, Object Store 와 Inexes 생성은 versionchange 모드의 transaction 을 통해야만 한다
- readwrite
- readonly
- versionchange
key path
key 의 경로를 말한다. 어디서 key를 추출해야하는지 정의하여 key를 가져올 수 있게 한다
Index
object store 간의 조회, 검색을 위해 object store 들의 데이터를 모아 저장하는 저장소
두 사이를 연결시키므로 Index 인터페이스라고도 한다
object store 의 key-value 값을 참조하여 인덱스에 value 값으로 저장된다
인덱스내의 데이터들은 각각 object store 내부의 데이터 하나만을 가리킬 수 있으며,
여러개의 인덱스가 동일 object store 를 참조하는 것이 가능하다
object store 가 변경되면 그 object store 를 참조하는 인덱스들도 자동으로 업데이트 된다
request
데이터 베이스에 읽고 쓰는 수행 명령을 의미한다
하나의 request 당 하나의 읽기 또는 쓰기 명령만 가질 수 있다
scope
해당 트랜잭션이 적용되는 object store 들과 index 들의 범위를 의미한다
read-only transaction 간에는 scope 가 겹칠 수 있고 동시 실행이 가능하지만
writing transaction 간에는 scope 가 겹칠 수 없다
같은 scope 의 여러 transaction 을 동시에 실행 가능하지만, 작업들은 queue up되어 하나씩 차례로 수행된다
cursor
key 를 순회하기 위한 매커니즘으로, 데이터간 순회, 반복 기능을 제공한다
DB 사용법
Indexed DB 지원 여부 확인
브라우저에서 사용하는 만큼, 브라우저에 따라 Indexed DB 가 지원이 되지 않을 수도 있다
그러니 Indexed DB 객체가 윈도우 객체에 있는지부터 확인하여 지원 여부를 체크한다
초기화
Indexed DB Wrapper 객체의 초기화 함수로 초기화를 시켜준다.
Database를 사용자 캐릭터 별로 생성하기 위해 함수 인자로 현재 선택되어 있는 사용자의 캐릭터 번호를 전달받으며,
이것이 Database의 이름으로 사용된다. 별도의 에러 콜백 함수 등록을 위해 해당 객체를 bind 합니다.
Database 및 Object Store 생성
OpenDB 함수는 Database open 결과를 promise 로 반환하여 Wrapper 객체 안에서 지속적으로 참조된다
resolve 함수는 Indexed DB의 open API 함수의 결과인 IDBDatabase 객체를 반환한다
DB 가 최초 생성될 경우 onupgradeneeded 콜백과 onsuccess 콜백이 차례로 호출되며,
이미 생성된 Database가 존재할 경우 onsuccess 콜백만 호출된다.
onupgradeneeded 콜백 함수는 Database가 새로 생성될 때 또는 DB 버전이 이전 버전보다 높은 버전으로 지정될 때 호출된다
동일한 이름의 object store 가 이미 존재하는지를 체크하고 없다면 object store 를 생성한다
onsuccess 콜백 함수에서는 Indexed DB open 결과를 resolve 함수를 사용해서 반환한다
onerror 콜백 함수는 open 한 Database의 모든 에러 발생시 에러 정보와 함께 호출된다
onblocked 콜백 함수는 하나의 database에 onversionchange 등을 통해 동시에 접근해서 transaction 시 실행된다
onversionchange 콜백 함수는 다른 탭이나 창(대부분 같은 컴퓨터 내) 에서 데이터베이스를 변경하려 할때 호출된다
데이터 읽기
데이터를 읽기 위해 Object Store 객체의 get API 함수를 사용한다
database의 transaction 을 readonly 모드로 열고, get 함수로 데이터를 읽게 된다
get 함수는 결과 정보를 가진 IDBRequest 객체의 onsuccess 콜백 함수에서 읽기 데이터를 반환하는 함수다
transaction 내 object store 를 지정해서 scope 중이 아닌 한 여러개의 transaction 을 동시 실행하게 한다
데이터 쓰기
데이터를 쓰기 위해서 set 과 put API 함수를 사용 가능하다고 하는데 set 은 사용예를 찾을 수 없으니 제외하자
put 은 값이 없을 경우 삽입하며, 업데이트 기능도 있다
위 예시에서는 key path를 별도로 설정하지 않아 put 함수 파라미터로 outline key를 사용하였다
readwrite 모드는 필요시에만 사용해야한다
readonly 모드는 scope 가 중복되어도 동시 실행 가능하지만,
readwrite 는 object store 당 한번에 하나의 요청만 처리 가능하기 때문이다. scope 의 중복이 허락되지 않는다
데이터 지우기
데이터 삭제는 delete API 함수를 사용한다
transaction 을 통해 모든 처리가 이루어지고, 콜백 함수에서 결과 정보를 반환받는다
Migration 함수
Migration 은 key-value 접근 방식을 이용한 방식으로,
Local Storage 에 저장된 value 값을 indexedDB 의 key를 순회하며 indexedDB에 존재하는지 체크하고
존재한다면 새로 write 한다
위 예시의 경우 promiseall 함수에 promise 배열을 넘겨주게 된다
참고 사이트 : https://www.blog-dreamus.com/post/indexed-db-%EC%A0%81%EC%9A%A9%EA%B8%B0
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
댓글