📍 오늘배운내용

• 다양한 웹브라우저의 DB와 그중에서 IndexedDB에 대해서 배웠다.
• 수업 알아듣는게 너무 힘들었지만 나만 그런거 아니었다,, 다른분들의 질문을 보고 어느정도 해결되었다

IndexedDB (로컬 데이터베이스)

• 브라우저에 데이터를 저장하는 로컬DB, 장점 > 빠르다...
• 브라우저의 객체 저장 가능, 자바스크립트 객체, 파일, blobs등을 저장, Transaction을 지원
  • 관계형데이터베이스, sql 이 아니다!
• 결론! 자바스크립트 기반의 객체 지향 데이터 베이스 > 자료형과 객체 저장 가능

---

클라이언트 측 브라우저에 저장하기 위한 API

1. 쿠키 (cookies) : 문 서내부에 간단 문자열 데이터를 저장 (적은양의 데이터)
2. 로컬 저장소(Local Storage) : Json 데이터를 문자열로 변환하여 저장 (사용자가 지우지않는이상 지속)
3. 세션 저장소 (Sesscion Storage) : Json 데이터를 오직 탭 세션에 저장 (탭을 닫으면 제거됨)
4. IndexedDB : key를 이용해 Index되는 구조화된 데이터를 쉽게 저장
    1. JSON 형태 즉, Key-Value 형태의 데이터베이스
    2. transaction 기능 지원
    3. Key 범위의 쿼리와 Index를 지원
    4. localStorage에 비해 훨씬 많은 데이터 저장 가능
    5. 즉 Index를 지원하기 때문에 많은 양의 구조화된 데이터를 다룰때 적합하다

IndexedDB 작업순서

1️⃣ 데이터베이스 열기

let onRequest = indexedDB.open('myDB',1);

• let request = indexedDB.open(name, version);
  • name : 문자열, 데이터베이스 이름 / version - 기본적으로 양의 정수 버전 1
  • let request = indexedDB.open('myDB', 1);
  • IndexedDB 데이터베이스 수정시 Version을 같이 수정해줘야함

2️⃣ 데이터베이스에 ObjectStore(객체저장소, 테이블) 생성

1. createObjectStore() 메소드 사용해주기!
   • database.createObjectStore(’store name’, {keyPath: ‘id’})
   • database.createObjectStore(’store name’, {autoIncrement: true})
   • database.createObjectStore(’store name’, {autoIncrement: ‘id’, autoIncrement: true})
     • AutoIncrement : 데이터 고유번호를 자동으로 갱신
2. onpugradeneeded() 으로 DB가 업그레이드 될때 ObjectStore 생성 또는 수정 가능

	request.onsuccess = e => {
    	alert("upgraed is called");}
	}
 	
    request.onupgradeneeded = e => {
    	//2. 1단계에서 연결한 DB onRequset 객체를 사용해서
    	const database = onRequest.result;
    	database.createObjectStore('users', {autoIncrement: true})
    	database.createObjectStore('items', {autoIncrement: true})
 	}
    
    request.error = e => {
    	alert("Error creating or accessing db");}
	}
 

• onupgradeneeded
  • 데이터 베이스를 여는 코드를 작성했을때 사용한 name('myDB') 또는 version(1)과 일치하는 데이터베이스가 없는 경우 호출 -> 데이터베이스를 생성.
    이 이벤트 안에서 objectStore를 만들거나 삭제하고, 인덱스를 만들거나 지울 수 있음
• onsuccess
  • Name과 Version 모두 일치하는 데이터베이스가 있는 경우 호출
• error
  • DB 호출에 실패했을 때 error를 발생 또는 Name이 일치하지만 존재하는 DB의 Version 보다 낮은 Version을 호출하면 error를 발생

3️⃣ Transaction 시작 - 데이터 추가, 검색 작업 요청

💬 Transaction 시작하기

  //1.					database.transaction(객체저장소이름, transaction mode)
  const transaction = database.transaction("users", 'readwrite')
  
 //2. store에 값을 삽입하기 위해 objectStore() 함수로 테이블 선택
  const store = transaction.objectStore(storeName);
//이후 CRUD 작업시 store에 add, get, clear...메소드를 ㅅ용

1. 모든 데이터 읽기 및 쓰기는 Transacrtion 내에서 수행된다.

   • users : 객체 저장소 이름(2단계 객체저장소 생성시 입력한 이름)
   • Transaction Mode : readonly, readwrite, versionchange

2. 트랜잭션은 데이터베이스 객체 단위로 작동하므로 트랜잭션을 사용할 객체 저장소를 지정해줘야함

   • store 객체로 트랙잭션 사용

---

💬 ObjectStore에 데이터 추가하기 - CRUD

//'users(1)'라는 이름의 ObjectStore를 생성
database.createObjectStore('users', {autoIncrement: true})
function addUsers() {
		
		const user = {
          name: "Zeeyoon",
          about: "fontend Engineer"
		}
		//'users(1)' ObjectStore 에 readwrite(읽기,쓰기)권한으로 Transaction 시작하기
		// transaction을 시작한 객체를 transaction 이라는 변수에 저장 
		const transaction = database.transaction("users", 'readwrite')
		
		//objectStore() 함수로 users 테이블 선택
		// 여기서의 "usersOb"는 users라는 오브젝트스토어 객체!를 넣을 변수
		// *** 번거롭지만 또 users라는 오브젝트스토어를 찾아줘야한다. (그렇게 만들어졌음) ***
		const usersOb = transaction.objectStore("users")
		
		//원하는 객체 (user) 를 테이블에 추가
		// 테이블 객체를 저장한 usersOb에 add 메소드적용
		usersOb.add(user)
}

• ObjectStore.add()
  • transaction 을 complete 해줘야한다.

dbPromise.then(function(db){
	const transaction = db.transaction('users', 'readwrite')
  // 키값을 id라는 프로퍼티로 하겠다!
	const store = transaction.objectStore('users', {keyPath:'id'})
	store.add({id:3, name: 'Zeeyoon';, age: 27})

	return transaction.complete
}

---

• ObjectStore.get(key) , ObjectStore.getAll()

dbPromise.then (function(db) {
	const transaction = db.transaction(['users'], 'readwrite')
	const store = transaction.objectStore('users')
	return store.get('Zeeyoon') //{id:3, name: 'Zeeyoon';, age: 27}
	//=============
	return store.getAll(); //모든 데이터가 다 나옴 
}

---

• ObjectStore.put()

dbPromise.then (function(db) {
	const transaction = db.transaction(['users'], 'readwrite')
	const store = transaction.objectStore('users')
	
	return store.put('Zeeyoon')
}

---

• ObjectStore.delete()
  • transaction을 complete 해줘야한다.

dbPromise.then(function(db){
	const transaction = db.transaction(['users'], 'readwrite')
  // 키값을 id라는 프로퍼티로 하겠다!
	const store = transaction.objectStore('users', {keyPath:'id'})
	store.delete('Zeeyoon')

	return transaction.complete
}

4️⃣ 나머지 작업) index 마다 DOM 이벤트 수신해서 작업 > 결과 수행