하루하루 공부한 모든 내용을 블로그에 정리하긴 힘들겠지만 하루에 하나씩은 정리해서 공유해보도록 노력하겠습니다!
1. 쿠키와 세션
쿠키와 세션에 대해서는 내가 예전에 정리해놓은 글이 있어 따로 다시 정리하지는 않고 내가 쓴 글을 다시 보며 복습하는 계기가 되었다!!!
https://judahhh.tistory.com/46
[Web] 쿠키와 세션의 차이점, 인증과 인가, 세션 기반 인증 방식
쿠키와 세션의 차이점을 알아보기 전에 먼저 쿠키와 세션이 무엇인지부터 알아보자(나한테 하는 말) 쿠키와 세션의 사용 이유, 배경 쿠키와 세션을 사용하는 이유는 서버와 클라이언트의 통신
judahhh.tistory.com
2. 웹 스토리지 (Web Storage)
웹 스토리지는 두 가지 저장소를 제공한다.
개발자 도구 메뉴에 Application 탭을 누르면 쿠키 정보와 함께 스토리지 정보를 확인할 수 있다.
아래와 같이 key, value 쌍으로 저장된다
2.1) localStorage
- local에 도메인(사이트) 별로 지속되는 저장소
- 저장한 데이터를 명시적으로(개발자가 직접) 지우지 않는 이상 영구적으로 보관이 가능하다.
- 시간제한이 없고 브라우저를 종료해도 죽지 않는다.
localStorage 사용 예시)
localStorage.setItem("jwt_accessToken", "토큰blahblah")
localStorage.getItem("jwt_accessToken") // "토큰blahblah"
2.2) sessionStorage
-세션(브라우저, 탭)이 종료될 때까지 지속되는 저장소
- localStorage와 비슷하게 사용되지만 sessionStorage는 브라우저를 종료하면 데이터는 삭제된다!
sessionStorage 사용 예시)
기본적인 문법은 localStorage와 크게 다르지 않다.
sessionStorage.setItem("domain", "naver.com"); // domain이라는 키(key) 값을 사용하여 해당 텍스트(value)를 저장함
sessionStorage.getItem("domain"); // naver.com
localStorage와 sessionStorage의 차이점 : 데이터 소멸타이밍
3. IndexedDB
프론트엔드 개발을 하다보니 서버 없이 데이터를 영구저장 할 수 있는 방법을 찾아보다가
웹스토리지 외에 IndexedDB가 있다는 것을 알게 되었다!
클라이언트가 처리해야할 데이터 양은 앞으로도 계속 증가할 것이라고 생각된다.
강의를 들으며 멘토님이 한번 더 언급해주셔서 이번 기회에 글로 한번 더 정리하게 되었다 🤩
1) IndexedDB란?
IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API
데이터를 저장할 때 새로고침 시 데이터를 날아가는 문제를 해결하기 위해서는 브라우저가 제공하는 localStorage만 이용해도 충분할 것 같은데 IndexedDB를 왜 사용할까?
--> 많은 양의 데이터를 저장하기에 적합하다는 것이 localStorage 대비 가장 큰 특징으로 다가왔다.
2) IndexedDB의 특징
- 많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다.
(Local Storage의 용량은 겨우 10MB 밖에 안된다고 한다.) - Javascript 기반의 객체지향 데이터베이스이다.
- 즉, Javascript가 인식할 수 있는 자료형과 객체를 저장할 수 있다!
(Local Storage는 String 형태만 저장할 수 있다.)
- 즉, Javascript가 인식할 수 있는 자료형과 객체를 저장할 수 있다!
- 트랜잭션을 사용하며 Key-Value 데이터베이스이다.
- IndexedDB는 비동기 API이다.
3) IndexedDB를 사용해보자!
1. Database 만들기 - open 함수로 데이터베이스를 연다.
// 지원여부확인
if (!window.indexedDB) {
window.alert("browser doesn't support IndexedDB");
} else {
let db;
let request = window.indexedDB.open("myDataBase");
request.onerror = function (event) {
alert("failed");
};
request.onsuccess = function (event) {
db = this.result;
};
}
2. Object store를 생성한다.
-데이터를 담는 공간
- 여러 개의 key-value 쌍을 가진다.
- Object Store 의 이름은 고유해야 한다.
- createObjectStore() 함수로 Object Store 생성
// 지원여부확인
if (!window.indexedDB) {
window.alert("browser doesn't support IndexedDB");
} else {
let db;
let request = window.indexedDB.open("myDataBase");
// 새로만들거나 버전이 높을때만 발생하는 이벤트
// ObjectStore를 만들거나 수정할때 이 이벤트내에서 진행
request.onupgradeneeded = function (event) {
let db = event.target.result;
// person 이라는 이름으로 ObjectStore를 만듬, key를 따로 만들지 않고 자동생성함.
let objectStore = db.createObjectStore("person", { keyPath: "id" });
};
request.onerror = function (event) {
alert("failed");
};
request.onsuccess = function (event) {
db = this.result;
};
}
3. Transaction을 시작하고 데이터 생성, 조회, 수정, 삭제 등의 작업을 요청한다.
데이터 생성
function addData(people) {
let request = window.indexedDB.open("myDataBase");
request.onerror = function (event) {
alert("Database error: " + event.target.errorCode);
};
request.onsuccess = function (event) {
let db = this.result;
// person ObjectStore에 readwrite(읽기,쓰기) 권한으로 Transaction 생성
let transaction = db.transaction(["person"], "readwrite");
// 완료 및 실패 이벤트 제어
transaction.oncomplete = function (event) {
console.log("done");
};
transaction.onerror = function (event) {
console.log("fail");
};
let objectStore = transaction.objectStore("person");
for (const person of people) {
let request = objectStore.add(person);
request.onsuccess = function (event) {
console.log(event.target.result);
};
}
};
}
let user = [
{
id: 1,
name: "gildong",
age: 33,
},
{
id: 2,
name: "judy",
age: 25,
},
{
id: 3,
name: "tom",
age: 28,
},
];
addData(user);
데이터 조회
- db를 열고 transaction을 통해 ObjectStore에 접근하여 조회
- key를 통해 value를 get
function getData(key) {
let request = window.indexedDB.open("myDataBase");
request.onerror = function (event) {
console.log(event.target.errorCode);
};
request.onsuccess = function (event) {
let db = this.result;
let transaction = db.transaction(["person"]);
transaction.onerror = function (event) {
console.log("fail");
};
transaction.oncomplete = function (event) {
console.log(result);
console.log("done");
};
let objectStore = transaction.objectStore("person");
request = objectStore.get(key);
request.onsuccess = function (event) {
result = event.target.result;
};
};
}
getData(2); //{id: 2, name: 'judy', age: 25}
데이터 수정
- db를 열고 transaction을 통해 ObjectStore에 접근하여 수정
- key를 통해 value를 update
function updateData(key, value) {
let request = window.indexedDB.open("myDataBase");
request.onerror = function (event) {
console.log(event.target.errorCode);
};
request.onsuccess = function (event) {
let db = this.result;
let transaction = db.transaction(["person"], "readwrite");
transaction.onerror = function (event) {
console.log("fail");
};
transaction.onsuccess = function (event) {
console.log("done");
};
let objectStore = transaction.objectStore("person");
request = objectStore.get(key);
request.onsuccess = function (event) {
let data = event.target.result;
data = value;
let updateRequest = objectStore.put(data);
updateRequest.onerror = function (event) {
console.log("update error");
};
updateRequest.onsuccess = function (event) {
console.log("update success");
};
};
};
}
updateData(1, { id: 1, name: "haha", age: 30 });
데이터 삭제
- db를 열고 transaction을 통해 ObjectStore에 접근하여 삭제
- key를 통해 delete
- clear() 함수를 통해 데이터 전체 삭제 가능
function deleteData(key) {
let request = window.indexedDB.open("myDataBase");
request.onerror = function (event) {
alert(event.target.errorCode);
};
request.onsuccess = function (event) {
let db = this.result;
let transaction = db.transaction(["person"], "readwrite");
transaction.onerror = function (event) {
console.log("fail");
};
transaction.onsuccess = function (evnet) {
console.log("done");
};
let objectStore = transaction.objectStore("person");
let deleteReqeust = objectStore.delete(key);
deleteReqeust.onsuccess = function (event) {
console.log("deleted");
};
};
}
deleteData(3);
참고자료
MDN IndexedDB 공식문서
https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API
IndexedDB API - Web API | MDN
IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage는
developer.mozilla.org
브라우저 별 IndexedDB 지원여부
https://caniuse.com/?search=indexeddb
"indexeddb" | Can I use... Support tables for HTML5, CSS3, etc
IndexedDB 2.0 Improvements to Indexed DB, including getAll(), renaming stores and indexes, and binary keys.
caniuse.com