DB (4) 썸네일형 리스트형 IndexedDB 예제 IndexedDB 종합 예제 코드펜 예제 See the Pen IndexedDB Sample by shinhs9423 (@shinhs9423) on CodePen. IndexedDB 예제 분석 IndexedDB 사용하기 let db; // DB를 전역에서 사용하기 위한 변수 const DBRequest = indexedDB.open('DataBaseName',1); // 식별자 = indexedDB.open('DB이름', 버전); // 버전으로 addEventListener('upgradeneeded',function(event){ });를 실행시킬 수 있다. // 브라우저가 리로드 되면서 버전을 확인하고, 버전이 같지 않을때 실행된다. DBRequest.addEventListener('success',.. IndexedDB IndexedDB Web Browser Storage이다. Transaction Database를 사용하며, Key : Value 로 데이터를 관리한다. Transaction Model을 따르며, 모든 변경은 Transaction 안에서 일어난다. Transaction내에서 오류가 생긴다면 모든 변경사항을 폐기하고, 이전 상태로 돌아간다. same-origin policy를 따른다. ( http 와 https 는 다른 indexedDB를 이용한다.) IndexedDB 구조 Database > Object Store > Object 의 구조를 갖는다. Object 를 Object Store로 그룹화한다. Object Store를 DataBase로 그룹화한다. IndexedDB 요소 Database Data.. Web Browser Storage Web Browser Storage란? 개발자도구 > Application 에서 확인할 수 있다. DataBase를 서버에 두지 않고 웹브라우저가 제공하는 공간에 구축한다. Web Browser Storage 종류 Local Storage, Session Storage, IndexedDB 등 다양한 종류가 있다. Storage의 특징을 파악하고, 사용하는 것이 좋다. Storage의 특징 Cookie LocalStorage IndexedDB 저장공간 적음 약 5mb 브라우저와 사용자 환경에 따라 차이가 있다. 네트워크 서버와 통신한다 포함하지 않는다 포함하지 않는다 데이터 타입 문자열 문자열 제한받지 않음 (blob을 이용한다) 동작방법 동기 동기 비동기 난이도 쉬움 쉬움 어려움 데이터베이스(DataBase) 데이터베이스(DataBase) 데이터베이스(DB : DataBase)는 데이터(Data)가 그룹화 되어 저장된 집합체라고 생각할 수 있다. 자료 중복을 없애고 구조화하여, 효율적인 처리를 위해 DB를 사용한다. 데이터관리(CRUD) 데이터를 관리하는 CRUD Create (생성) : 데이터 저장 > 새로운 데이터를 추가할 수 있어야 한다. Read (읽기) : 데이터 인출 > 저장된 데이터를 사용할 수 있어야 한다. Update (갱신) : 데이터 수정 > 저장된 데이터를 가공(재사용/수정)할 수 있어야 한다. Delete (삭제) : 데이터 삭제 > 저장된 데이터를 삭제할 수 있어야 한다. 데이터관리시스템(DBMS : DataBase Management System) DB를 조작하는 소프트웨어를 'DB.. 이전 1 다음