프롤로그

이번 주엔 개인사로 일정이 빠듯해서 간단하게 어렴풋이 알고있던 지식을 짚고 넘어가는 시간으로 작성하려 합니다.

이번 포스팅에 선정된 주제는 IndexedDB인데요. 이 개념에 대해 처음 알게된 건 Apollo Client를 사용하면서 persistent cache에 대해 알게되었고, 이 내용에 대해 조사하던 중에 알게된 단어였습니다.

이 IndexedDB가 무엇인지, 어떤 용도로 사용할 수 있는지 간단하게 알아보도록 하겠습니다.

IndexedDB

IndexedDB는 자바스크립트 기반의 객체지향 데이터베이스입니다. ‘서버’에서 사용하는 데이터베이스가 아니라 브라우저에서 사용하는 데이터베이스라는 차이점이 있습니다.

그냥 저장소라는 면에서는 LocalStroage, SessionStroage와 같은 브라우저 저장소와 똑같습니다.

보통 Web Storage는 저장 가능한 용량이 제한적인데 비해 IndexedDB는 대용량 저장이 가능합니다. 브라우저마다 용량 제한은 다르지만 많은 사람들이 사용하는 크롬의 경우 하드디스크의 80%까지 사용할 수 있다고 합니다.

로컬 스토리지의 경우는 약 10MB라는 점을 떠올려보면 굉장한 차이입니다.

이 저장소는 오프라인에서도 동작하기 때문에 네트워크 연결이 불안정한 환경에서 더 효율적으로 사용할 수 있습니다.

IndexedDB를 사용하여 수행되는 작업은 애플리케이션이 중단되지 않도록 비동기적으로 동작합니다. 이에 반해 로컬 스토리지는 동기적으로 작동합니다.

로컬 스토리지의 경우 Key-Value 쌍으로 데이터를 저장하고, 이 Value는 문자열만 저장이 가능합니다. 그렇기 때문에 JSON.stringify, JSON.prase를 사용해서 구조화된 데이터를 저장합니다.

이와 달리 IndexedDB는 Object 형식의 데이터를 저장할 수 있습니다. 물론 로컬 스토리지도 간단한 메소드 한 두개로 처리 할 수 있지만요.

IndexedDB는 일반적인 경우가 아니라 음성, 영상 데이터를 처리하는 등의 기본적으로 용량이 큰 경우 활용하기가 좋습니다.

또한 데이터가 영구적으로 저장되고 사용되어야 하는 경우라면 용량이 제한 된 로컬 스토리지를 사용하지 않고, IndexedDB를 사용하여 차후 부족해질 수 있는 로컬 스토리지의 대안이 될 수도 있습니다.

IndexedDB를 사용하기 위해서는 데이터베이스를 여는 과정과 저장소 생성, 트랜잭션 등이 필요하기 때문에 기존 로컬 스토리지와 같은 저장소 보다는 사용방법이 복잡할 순 있습니다.

그렇다고 해도 한 번 커스텀해두면 사용하기도 쉽고, 용량도 넉넉한 저장소를 사용할 수 있는 셈이니 꼭 알아두면 좋은 저장소 인 것 같습니다.