IndexedDB API 조사

🎇IndexedDB 세미나를 위한 자료조사한 내용 입니다. 🎇

IndexedDB 란?

• 브라우저에 데이터를 저장하는 로컬DB
• SQL 을 사용하는 관계형 데이터 베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터 베이스 시스템
  • 트랜잭션이란?
    • 트랜잭션은 DB의 상태를 변화 시키기 위해 수행하는 작업 단위
    • 데이터베이스 객체 단위로 작동하며, 그렇기 때문에 사용할 객체 저장소 지정 필요
• RDBMS 의 고정 column 테이블 대신 Javascript 기반의 객체 지향 데이터 베이스
• 인덱스 key 를 사용해 저장 및 검색 구조화된 복사 알고리즘 지원 객체라면 모두 저장 가능(많은양의 구조화된 데이터를 다룰 때 적합)
• 사용 시 데이터 베이스 스키마 지정하여 dB 와 연결 트랜잭션 통해 데이터 가져오고 업데이트
• SOP 정책을 따라서 도메인 내에 저장된 데이터에 접근 할 수 있지만 다른 도메인 데이터는 액세스 할 수 없음
• localStorage 에 비해 훨씬 많은 데이터 저장 가능
  • localStoage의 경우: 적은 양의 데이터를 저장할 때 유용하고, 동기적으로 작동하기에 오직 문자열 타입의 key & value 만을 사용할 수 있다. 그렇기 때에 JSON.stringify, JSON.parse와 같은 함수가 꼭 필요하다.

🖥IndexedDB 사용 이유

• View 화면에서 Editor 가 이루어졌던 기존 방식에서 , View 와 Editor 분리, 이를 router 로 화면 전환이 이루어지며 사용
• 그렇기 때문에 수정 완료하고 뒤로가기 했을 시에 선택 정보가 무엇이었는지, 어떤 트리거를 선택 했는지를 동일하게 보여주어야 하기 때문

📚관련 Library

1. ZangoDB :

   • 웹 브라우저 에서 사용하기 위해 MongoDB의 익숙한 필터링, 프로젝션, 정렬, 업데이트 및 집계 기능을 대부분 지원하는 HTML5 IndexedDB 용 MongoDB와 유사한 인터페이스
   • publish 2년 전

2. localForage

   • localStorage API 와 동일한 형태로 사용됨

    localforage.setItem('key', 'value', function (err) {
     // if err is non-null, we got an error
     localforage.getItem('key', function (err, value) {
       // if err is non-null, we got an error. otherwise, value is the value
     });
   });

   • 타입스크립트 사용 가능
   • 릴리스 1년 전

3. Dexie.js

   • SQL사용하지는 않지만 , 간단한 구문으로 이루어져 있음 , docs 가 설명이 잘되어 있는 편
   • 차별 점

     • 간단한 쿼리

     • ex ) ✔ select 문을 적용하는 방법

       Select * From Table_Name
       Where
       Column1=some_value
       and
       Column2=some_another_value;

       await db.friends
           .where("name").equalsIgnoreCase("josephine")
           .each(friend => {
               console.log("Found Josephine", friend);
           });
       
       // 체이닝 형식으로 조건을 적용 

   • 릴리스 날짜 2달 전
   • 참고할만한 블로그
     • https://sub0709.tistory.com/87
     • http://labs.brandi.co.kr/2021/04/19/leejm3.html

4. JsStore

   • IndexedDB 의 래퍼, 배우고 사용하기 쉬운 api와 같은 간단한 SQL을 제공

   
   var results = await connection.select({
       from: "Table_Name",
       where: {
           column1: some_value,
           column2: some_another_value
       }
   });
   //results will contains no of rows deleted.
   console.log(results);
   // 객체 형태로 조건을 지정해서 typescript 와 사용하기에 알맞은거 같음 

   • 특징
     • 1) 간단하게 읽을 수 있는 API
     • 2) 타입스크립트 지원
     • 3) 복잡한 쿼리 지원
     • 4) API 동기화 지원
     • 5) IDBStudio 라는 Jsstore 용 관리 및 디버깅 도구 존재
   • 릴리스 하루 전

5. minimongo

   • Http를 통한 서버 동기화가 있는 클라이언트 측 mongo DB
   • Minimongo는 browserify 또는 Webpack과 함께 사용하도록 설계
   • Promise 인터페이스 사용 가능

     await db.collection["sometable"].find(selector, options).fetch()

   • 행 집합을 로컬 데이터베이스에서 캐시 가능,
   • 릴리스 12일전

6. idb

   • IE 는 지원하지 않음

7. idb-keyval

   • 간단한 promise 기반 key-val 저장소
   • get/set만 사용하는 경우 라이브러리는 ~250바이트로 작고 가볍다
   • localForage 와 유사한 기능을 제공

8. Lovefield

   • 구글에서 만든 라이브러리
   • 순수 javascript 로 작성된 관계형 데이터 베이스
   • SQL 과 유사한 구문을 제공, 크로스 브라우징 가능
   • 테이블 생성하는 방법

   schemaBuilder.createTable('Item').
       addColumn('id', lf.Type.INTEGER).
       addColumn('description', lf.Type.STRING).
       addColumn('deadline', lf.Type.DATE_TIME).
       addColumn('done', lf.Type.BOOLEAN).
       addPrimaryKey(['id']).
       addIndex('idxDeadline', ['deadline'], false, lf.Order.DESC);

   • 마지막 릴리스 5년전

   결과

   mySQL 을 사용하는 중인 우리와 잘 맞는 JsStore 와 유사한 규칙을 가진 Dexie.js 두개를 다 사용해서 적용해 본 결과 사실 이 둘다 비동기 방식으로 동작하기 때문에 초기로드 속도에 영향을 줄수있는 것으로 판단되어 그냥...localStorage 을 사용하였습니다 🤣
   하지만 이러한 다양한 라이브러리를 찾고 적용해보면서 재밌고 좋은 경험을 해봤습니다 공부하고 적용해볼수있는 충분한 시간을 주신 팀원분들께 감사의 말씀을 드리며 마무리..~