<div id="readability-page-1" class="page"><div>
 <a href="/m/category/%EC%9B%B9%20%EC%A0%84%EB%B0%98%2C%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80/Web%20API">웹 전반, 브라우저/Web API</a><h3>IndexDB (1) : 간단한 개념을 알아보고 사용해보자</h3>
 </div><cite>DarrenKwonDev</cite>
 2021. 11. 28. 02:13
 <div>
 <blockquote data-ke-style="style2">IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다.&nbsp;IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다.&nbsp;<a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API">Web Storage</a>(localStorage나 sessionStorage)는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다. - https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API</blockquote>

결국 Web Storage보다 많은 양의 데이터를 저장하는데 더 적합한 저장소라는 것이다. 단순히 get, set만 지원하는 것이 아니라 좀 더 DB스럽게 사용할 수 있고 용량도 더 많다.&nbsp;

Web Storage는 간편하지만 기능이 많다고 할 수는 없다.&nbsp; 좀 더 강력한 기능을 위해 google web.dev의 <a href="https://web.dev/storage-for-the-web/" target="_blank" rel="noopener">storage for web</a>의 설명에 따르면 다음과 같은 저장소를 사용하도록 추천하고 있다.&nbsp;
<ul data-ke-list-type="disc">
<li>네트워크 요청을 통해 받아온 정보를 캐싱하기 위해서는, use the&nbsp;<a href="https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/cache-api">Cache Storage API</a>&nbsp;(part of&nbsp;<a href="https://developers.google.com/web/fundamentals/primers/service-workers">service workers</a>).</li>
<li>다른 경우에는, use&nbsp;<a href="https://developer.mozilla.org/docs/Web/API/IndexedDB_API">IndexedDB</a>&nbsp;(with a&nbsp;<a href="https://www.npmjs.com/package/idb">promises wrapper</a>).</li>
</ul>

<h4 data-ke-size="size20">IndexDB의 특성들</h4>
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology</a>)

IndexedDB는 많은 양의 데이터를 저장하는 애플리케이션이지만 작동을 위해 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 적합하다. 예로 들자면, 할 일이 2만개가 되는 앱은 굳이 서버와 통신할 이유가 없고 데이터를 클라이언트 단에서만 저장하면 된다.

클라이언트 단이라고 하면 정확히 어디에 저장되는건가?
Chrome 기본 경로라는 가정 하에, 다음과 같은 경로에 저장된다.
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
/Users/[USERNAME]/Library/Application&nbsp;Support/Google/Chrome/Default/IndexedDB/

기본적인 특성들은 무엇인가?
<ul data-ke-list-type="disc">
<li>키-밸류 값으로 저장되고 가져온다.</li>
<li data-ke-size="size16">빠른 검색과 정렬을 위해 개체의 속성을 사용하는 인덱스를 만들 수 있다.&nbsp;(WOW 이걸 웹에서?)</li>
<li>IndexedDB는&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology#transaction">트랜잭션</a>&nbsp;데이터베이스 모델을 기반으로 한다.</li>
<li>The&nbsp;IndexedDB&nbsp;API&nbsp;is&nbsp;mostly&nbsp;asynchronous</li>
<li>Full Text Searching 없음. (너무 당연한 거 아닌가;;)</li>
<li>SQL의 Like 문 류의 기능 없음.</li>
</ul>
<div id="translation">


브라우저가 IndexDB를 지우는 경우
<ul data-ke-list-type="disc">
<li>브라우저 설정에서 지우겠다고 선택하는 경우 (종종 브라우저 히스토리 지울 때 이것 저것 체크하는데 그 옵션인가 보다)</li>
<li>비공개 브라우저에서는 브라우저가 종료되면 IndexDB도 날아감</li>
<li>데이터가 손상되었을 때 (정확히 어떻게 손상되었을 때인지는 모르겠음)</li>
<li>컴퓨터 하드 드라이브 용량이 다 찼을 때</li>
</ul>
<div>즉, 정말로 중요한 데이터는 indexDB를 비롯하여 클라이언트에 저장하는 것이 좋지 않을 것으로 보인다.</div>
</div>

<h4 data-ke-size="size20">IndexDB를 사용하는 방법</h4>

Cursor, Index, TX 등 되게 많은 개념이 있어서 후딱 끝낼 수 없는 수준이다; 여기서는 일단 간단히 알아보자.
(<a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB</a>)

version, indexDB open

어렵게 정리했는데 몇마디로 요약하자면
"현재 indexDB의 version 보다 낮은 version을 open하려고 하면 에러가 발생한다"
"upgrade할 때 schema를 생성하고 success할 때 활용한다"
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1502" data-origin-height="1610">
 
 <img src="https://k.kakaocdn.net/dn/cpjKdh/btrmjcrR5I9/WIxkLnykxbmDCnlDrrMu2K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="500" height="536" data-origin-width="1502" data-origin-height="1610">
 
 
</figure>
<pre id="code_1638030858798" data-ke-language="javascript" data-ke-type="codeblock"><code>const INDEXDB_NAME='mydb'

// IDBFactory
const indexedDB =
 window.indexedDB ||
 window.mozIndexedDB ||
 window.webkitIndexedDB ||
 window.msIndexedDB ||
 window.shimIndexedDB;

const request = indexedDB.open(INDEXDB_NAME, 1)

request.onupgradeneeded = e =&gt; {
 console.log("upgrade called")
}

request.onsuccess = e =&gt; {
 console.log("success")
}

request.onerror = e =&gt; {
 alert("error")
}</code></pre>
위 플로우 차트에서 주의할 점은 upgrade만 트리거 되고 끝나는게 아니라 연이어 success event가 트리거 된다는 점이다.
indexDB를 삭제한후 리로드해보면 upgrade 이벤트가 발생한 후 success 이벤트가 발생하는 것을 확인할 수 있다.

생성된 결과는 다음에서 확인할 수 있다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="2050" data-origin-height="880">
 
 <img src="https://k.kakaocdn.net/dn/vSJrQ/btrmiqKyPnl/GTuqKm884MktdTzeuYokq0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="2050" data-origin-height="880">
 
 
</figure>


IDBObjectStore 만들고 Transaction을 통해 데이터 추가하기
<pre id="code_1638031334865" data-ke-language="javascript" data-ke-type="codeblock"><code>// IDBObjectStore
const store = IDB.createObjectStore(storeName, { keyPath: key });</code></pre>
주의할점은 indexDB의 대부분의 API는 비동기적이라는 것이다. store가 만들어진 직후에 사용할 수 있지 않다.
그래서 upgrade 이벤트가 발생할 때 schema를 생성하고 테이블을 만드는 등의 작업을 진행한다.

여튼 이제 store를 만들었으니 tx를 생성하여 store에 넣어보자.
<pre id="code_1638032163340" data-ke-language="javascript" data-ke-type="codeblock"><code>// readwrite IDBTransaction 생성
const tx = db.transaction("storeName", "readwrite");
tx.onerror = (e) =&gt; alert(`Error! ${e.target.error}`);

// 생성된 IDBObjectStore 불러오기
const store = tx.objectStore("storeName");

// IDBObjectStore에 추가!
store.add(yourObject);</code></pre>

Cursor를 통해 store에 저장된 데이터 읽기
<pre id="code_1638032612301" data-ke-language="javascript" data-ke-type="codeblock"><code>// readonly한 IDBTransaction 생성
const tx = db.transaction("storeName", "readonly");

const store = tx.objectStore("storeName");
const request = store.openCursor();
request.onsuccess = (e) =&gt; {
 const cursor = e.target.result;
 if (cursor) { 
 // 다음 커서 진행
 cursor.continue();
 }
};</code></pre>


ref)
<a href="https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener">https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API</a>


<a href="http://labs.brandi.co.kr/2021/04/19/leejm3.html">http://labs.brandi.co.kr/2021/04/19/leejm3.html</a>
<a href="https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614">https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614</a>
 
 
 </div></div>

HotHandCoding

DarrenKwon

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage(localStorage나 sessionStorage)는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다.
- https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API
 
결국 Web Storage보다 많은 양의 데이터를 저장하는데 더 적합한 저장소라는 것이다. 단순히 get, set만 지원하는 것이 아니라 좀 더 DB스럽게 사용할 수 있고 용량도 더 많다. 
 
Web Storage는 간편하지만 기능이 많다고 할 수는 없다.  좀 더 강력한 기능을 위해 google web.dev의 storage for web의 설명에 따르면 다음과 같은 저장소를 사용하도록 추천하고 있다. 
네트워크 요청을 통해 받아온 정보를 캐싱하기 위해서는, use the Cache Storage API (part of service workers).
다른 경우에는, use IndexedDB (with a promises wrapper).
 
IndexDB의 특성들
(https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology)
 
IndexedDB는 많은 양의 데이터를 저장하는 애플리케이션이지만 작동을 위해 지속적인 인터넷 연결이 필요하지 않은 애플리케이션에 적합하다. 예로 들자면, 할 일이 2만개가 되는 앱은 굳이 서버와 통신할 이유가 없고 데이터를 클라이언트 단에서만 저장하면 된다.
 
클라이언트 단이라고 하면 정확히 어디에 저장되는건가?
Chrome 기본 경로라는 가정 하에, 다음과 같은 경로에 저장된다.
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
/Users/[USERNAME]/Library/Application Support/Google/Chrome/Default/IndexedDB/
 
기본적인 특성들은 무엇인가?
키-밸류 값으로 저장되고 가져온다.
빠른 검색과 정렬을 위해 개체의 속성을 사용하는 인덱스를 만들 수 있다. (WOW 이걸 웹에서?)
IndexedDB는 트랜잭션 데이터베이스 모델을 기반으로 한다.
The IndexedDB API is mostly asynchronous
Full Text Searching 없음. (너무 당연한 거 아닌가;;)
SQL의 Like 문 류의 기능 없음.
 
 
브라우저가 IndexDB를 지우는 경우
브라우저 설정에서 지우겠다고 선택하는 경우 (종종 브라우저 히스토리 지울 때 이것 저것 체크하는데 그 옵션인가 보다)
비공개 브라우저에서는 브라우저가 종료되면 IndexDB도 날아감
데이터가 손상되었을 때 (정확히 어떻게 손상되었을 때인지는 모르겠음)
컴퓨터 하드 드라이브 용량이 다 찼을 때
즉, 정말로 중요한 데이터는 indexDB를 비롯하여 클라이언트에 저장하는 것이 좋지 않을 것으로 보인다.
 
IndexDB를 사용하는 방법
 
Cursor, Index, TX 등 되게 많은 개념이 있어서 후딱 끝낼 수 없는 수준이다; 여기서는 일단 간단히 알아보자.
(https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
 
version, indexDB open
 
어렵게 정리했는데 몇마디로 요약하자면
"현재 indexDB의 version 보다 낮은 version을 open하려고 하면 에러가 발생한다"
"upgrade할 때 schema를 생성하고 success할 때 활용한다"
const INDEXDB_NAME='mydb'
// IDBFactory
const indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB ||
  window.shimIndexedDB;
const request = indexedDB.open(INDEXDB_NAME, 1)
request.onupgradeneeded = e => {
  console.log("upgrade called")
}
request.onsuccess = e => {
  console.log("success")
}
request.onerror = e => {
  alert("error")
}
위 플로우 차트에서 주의할 점은 upgrade만 트리거 되고 끝나는게 아니라 연이어 success event가 트리거 된다는 점이다.
indexDB를 삭제한후 리로드해보면 upgrade 이벤트가 발생한 후 success 이벤트가 발생하는 것을 확인할 수 있다.
 
생성된 결과는 다음에서 확인할 수 있다.
 
 
IDBObjectStore 만들고 Transaction을 통해 데이터 추가하기
// IDBObjectStore
const store = IDB.createObjectStore(storeName, { keyPath: key });
주의할점은 indexDB의 대부분의 API는 비동기적이라는 것이다. store가 만들어진 직후에 사용할 수 있지 않다.
그래서 upgrade 이벤트가 발생할 때 schema를 생성하고 테이블을 만드는 등의 작업을 진행한다.
 
여튼 이제 store를 만들었으니 tx를 생성하여 store에 넣어보자.
// readwrite IDBTransaction 생성
const tx = db.transaction("storeName", "readwrite");
tx.onerror = (e) => alert(`Error! ${e.target.error}`);
// 생성된 IDBObjectStore 불러오기
const store = tx.objectStore("storeName");
// IDBObjectStore에 추가!
store.add(yourObject);
 
Cursor를 통해 store에 저장된 데이터 읽기
// readonly한 IDBTransaction 생성
const tx = db.transaction("storeName", "readonly");
const store = tx.objectStore("storeName");
const request = store.openCursor();
request.onsuccess = (e) => {
  const cursor = e.target.result;
   if (cursor) {    
    // 다음 커서 진행
    cursor.continue();
  }
};
 
 
ref)
https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API
 
 
http://labs.brandi.co.kr/2021/04/19/leejm3.html
https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614

IndexDB (1) : 간단한 개념을 알아보고 사용해보자

댓글