IndexedDB란?
- IndexedDB는 서버에 데이터를 저장하는 것이 아닌, 웹 브라우저, 클라이언트 단에 데이터를 저장할 수 있는 DB이다.
장점
웹브라우저에 db를 저장하면 클라이언트와 서버와 모두 좋은 점이 있다.
-
네트워크를 통하지 않기 때문에 빠르게 데이터를 가지고 올 수 있어 속도가 빠르다.
-
별도의 서버 없이 오프라인에서 사용 가능하다.
-
속도가 빠르기 때문에 비용이 절약된다라는 장점이 있다.
-
사용자의 정보가 서버로 전송 되지 않기 때문에 안전하게 클라이언트 단에 보관된다.
웹 브라우저에 저장하는 데이터들
=> 브라우저에 정보를 저장하는 방법은 Cookie, LocalStroage, IndexedDB 가 있다.
Cookie
- Cookie는 정보를 브라우저에 저장을 해놓으면 브라우저에 접속할 때마다 서버로 Cookie를 전송한다. 그래서 서버 쪽의 사용자 데이터와 대조하여 인증과 같은 방법에 사용된다.
=> 그렇기 때문에 Cookie는 데이터의 양이 많으면 많을수록 서버와의 통신속도가 느려진다.
- Cookie는 데이터를 문자열로만 받으며 동기식으로 작동한다.
LocalStorage
- LocalStorage도 Cookie와 같이 정보를 웹 브라우저에 저장한다. 그러나 Cookie와 다르게 데이터를 Cookie보다는 많이 넣을 수 있고 저장한 데이터를 가지고 서버와 통신을 하지 않는다. 데이터는 문자열로 받으며 Cookie와 동일하게 동기식으로 작동한다.
IndexedDB
- IndexedDB도 LocalStorage와 동일하게 저장된 정보를 가지고 서버와 통신하지 않는다.
=> 그러나 Cookie와 LocalStorage와 다른 점은 데이터를 저장하는데에 있어서 데이터의 타입이 제한이 없고 저장할 수 있는 데이터의 양이 많다는 것이다. (그러나 이 것은 브라우저의 환경마다 다르다.) 그리고 비동기식으로 작동한다.
코드 리팩토링
- 부트캠프 강의를 수강하다 IndexedDB 관련 클론코딩 구현을 했었다. 그러나 한 눈에 보기에 알아보기도 힘들었고 처음 접하는 개념이라 어떤 함수가 무슨 역할을 하고 어떻게 해야 DB안에 컬럼을 추가하고 기존에 알고있던 기본키의 개념은 어떻게 적용되는 것인지 알 수 없었다.
메소드 정리
| Method | 설명 |
|---|---|
| indexedDB.open | DB를 생성할 때 쓰며 DB 명과 버전을 인자로 받음. |
| upgradeneeded | 버전이 업데이트 될 때마다 (ex-> 1 => 2) 실행된다. |
| success | IndexedDB에 대한 코드가 성공적으로 수행되었을 때 실행하는 메소드이다. |
| error | 에러가 발생하면 에러 객체를 호출한다. |
| transaction | 하나의 transaction을 생성하며 테이블 명과 / readwrite, readonly 등 어떻게 하는 용도로 쓸 것인지 인자로 준다. |
| createObjectStore | 서버 DB로 치면 테이블을 생성해주는 것이다. IndexedDB에선 objectStore라고 부른다. 테이블 명과 { keyPath: 'id', autoIncreament: true } 와 같이 기본키 및 옵션을 객체 인자로 받는다. |
| add | 데이터를 인자로 받으며 보통 데이터는 객체 상태의 데이터이다. |
리팩토링
- 다음은 생활코딩 IndexedDB를 보고 정리한 후, 리팩토링 해 본 코드이다!
other
function createModal() {
// 지시사항에 맞춰 shareBtn 요소에 이벤트를 추가하세요.
shareBtn.addEventListener("click", function () {
if (window.indexedDB) {
const databaseName = "instagram";
const version = 1;
const requst = indexedDB.open(databaseName, version);
const data = {
content: document.querySelector(".modal__write > textarea").value,
image: imageBase64,
}
requst.onupgradeneeded = function() {
requst.result
.createObjectStore("posts", {autoIncrement: true})
}
requst.onsuccess = function () {
const store = requst.result
.transaction("posts", "readwrite")
.objectStore("posts");
console.log(store);
store.add(data)
}
}
})
};
reader.onerror = function (error) {
alert('Error: ', error);
document.querySelector('body').removeChild(modalEl);
};
});
}
my
//db생성
const dbReq = indexedDB.open('instagram', 1); //db생성(1)
let db;
dbReq.addEventListener('success', function (event) {
db = event.target.result; //db 생성 및 접근권한 획득.
console.log('success');
});
//error handling
dbReq.addEventListener('error', function (event) {
const error = event.target.error;
console.log('error', error.name); // 콘솔에 Error 객체의 name value값 출력.
});
//ubgradeneeded(2)
dbReq.addEventListener('upgradeneeded', function (event) {
//db 버전 업데이트 시 실행
db = event.target.result;
let oldVersion = event.oldVersion;
if (oldVersion < 1) {
// 처음 default = 0. 버전이 1보다 작을 시 테이블과 기본키 생성
db.createObjectStore('posts', { keyPath: 'id', autoIncreament: true });
}
});
//공유버튼 클릭시
shareBtn.addEventListener('click', function (event) {
//테이블에 등록되는거까지만.
const store = db.transaction('posts', 'readwrite').objectStore('posts');
const post = {
id: 2, // generate a unique ID for each post
content: document.querySelector('.modal__write > textarea').value,
image: imageBase64,
};
const addReq = store.add(post);
addReq.addEventListener('success', function (event) {
console.log('success:', post);
});
addReq.addEventListener('error', function (event) {
console.error('error:', event.target.error);
});정보 출처 - 생활코딩 유튜브
자대고 css 하는 프론트엔드 개발자