모르는 개념은 생활코딩 강의를 들으며 보충했는데.. 아직도 명확하게 개념이 잘 잡히지 않는다. 트랜잭션이라는 것을 통해서 데이터의 레퍼런스를 가져오고, 그것을 통해서 CRUD 작업을 한다는 것 같은데, 타겟과 변수, 함수 활용같은 부분이 조금 어려운 듯 하다.
엘리스 강의에서도 같은 내용을 다루고는 있는데, 강의에서 거의 설명이 없고 코딩만 하는 것 밖에 없어서 이해하기 매우 힘들었다. callBack 콜백함수
- 일급시민, 일급 객체
val = 1; // 숫자는 변수의 값이 될 수 있음. 일급 시민
val = if(){} // 조건문은 변수로 불가 > 이급시민
val = function(){} // 함수는 변수로 가능 > 일급 시민
//
<script>
function fn(){
val = function(){
}
return val;
// 함수가 다른 함수의 리턴값이 될 수 있다면 일급 시민임
val = function(){
return
}
fn()
// 함수가 다른 함수의 입력값이 될 수 있다면 일급시민임.
</script>
- 콜백함수 : 다른 함수의 입력값으로 전달되어 다른 함수에 의해서 나중에 호출되는 것.
- array.filter 내부에 있는 부분도 콜백함수.
<script>
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
//word => word.length > 6 이것이 콜백함수
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
</script>- 콜백함수는 한 번만 사용하는 경우가 많고, 떨어져있으면 응집력이 낮아져서 파라미터 내부 안에 익명함수 형태로 작성하는 경우가 많음.
IndexedDB
IndexedDB의 특징 (장점)
- 서버 저장이 아닌 클라이언트 저장이기 때문에 속도가 훨씬 빠름
- 오프라인에서 데이터 사용 가능
- 비용 절약
- 사용자의 정보가 안전하게 클라이언트에 저장됨
| Cookie | LocalStorage | IndexedDB | |
|---|---|---|---|
| 저장공간 | 소량 | 5MB | 브라우저마다 다름 |
| 네트워크에 포함 | 포함됨 | 포함 안됨 | 포함안됨 |
| 데이터타입 | 문자열 | 문자열 | 제한없음 |
| 동작방법 | 동기식 | 동기식 | 비동기식 |
| 난이도 | 쉬움 | 쉬움 | 어려움 |
indexedDB 구조
- object들이 모여 objectStore
- object Store들이 모여 Database
indexedDB 생성
<script>
const dbReq = indexedDB.open('opentutorials',1);
let db ;
// (DB 이름, 버전)
//dbReq는 대기번호 같은것.
dbReq.addEventListener('success', function(event){
db = event.target.result;
}); //데이터 오픈(대기벨에 넣어둔 것이 로드가 성공하면, 콜백함수 불러오기). 이때 이벤트 타겟은 dbReq. dbReq의 result를 통해서 생성된 데이터베이스에 엑세스 할 수 있는
레퍼런스를 얻을 수 있음. 그 레퍼런스는 애플리케이션에서 전역적으로 사용함. 그래서 let db 로 변수 만들고 db = event.target.result;로 선언
dbReq.addEventListener('error', function(event){
const error = event.target.error;
console.log('error', error.name);
});
//에러가 생겼을때의 상황 핸들 가능. add, get, put 과 같은 작업에서도 사용 가능!!!
</script>indexedDB 확인
- 브라우저 개발자 도구 > 애플리케이션 > IndexedDB > Opentutorials
ObjectStore
- 서로 연관된 데이터 (객체)를 그룹핑하는 수납상자임.
- 만들어서 재사용함
- success안에서 objectStore을 만들면 안됨. 왜냐면 실행될때마다 실행되기 때문 > 따라서 upgradeneeded가 호출될 때 그 안에 ObjectStore을 만드는 것이 좋음.
- IndexedDB는 오라클, sql과는 달리 각각의 데터베이스가 서버가 아닌 클라이언트(사용자의 브라우저)에 저장됨. 그말인 즉슨, 사용자의 브라우저에 흩어져 저장되어 있는 데이터는 업데이트,변화,업그레이드 하기 쉽지 않음 >>그래서 버전이라는 개념이 있음.
//upgradeneeded는 버전이 바뀔때만 실행됨!!! 따라서 ObjectStore을 만들기 아주 적절.
<script>
dbReq.addEventListener('upgradeneeded', function(event){
db = event.target.result;
let oldVersion = event.oldVersion;
if(oldVersion < 1){ // 업그레이드니디드가 최초로 실행되었을때는 0인데, 오픈이 되면 1로 바뀜.
db.createObjectStore('topics', {keyPath:'id', autoIncrement:true});
}
//keyPath, autoIncrement는 우리가 저장하려고 하는 객체의 식별자로 ID를 사용하겠다는 뜻. autoIncrement는 ObjectStore의 값이 자동으로 1씩 증가해서 중복되지 않는 식별자를 만들어줌
</script>ADD (추가)
- objectStore을 만들었으니, 이 objectStore이라는 곳에 객체를 추가하는 과정
- transaction이라는 장벽을 넘어야함.어려움... 후속 수업 듣기~
- 패턴화해서 기억하는 것에 집중하기!
<script>
let store = db.transaction('topics', 'readwrite').objectStore('topics');
//topics 오브젝트에 대한 레퍼런스를 얻는 과정
//쓰기기능 : readwrite , 읽기만 : readonly
let addReq = store.add({
title:prompt('title?'),//사용자한테 입력 받는것
body:prompt('body?') //사용자한테 입력받는것
});
//레퍼런스를 얻어온 오브젝트에 대해서 add 해서 add 파라미터 안의 객체를 저장해주는 과정.
// 다만, 이 객체가 즉각적으로 추가되는 것이 아니라 대기 벨 같은 개념임.
addReq.addEventListener('success', function(event){
console.log(event.target.result);
});
//쓰기 작업이 끝났을 떄(success) 했을 때, 이 대기벨이 울리게 됨.
//이때의 event.target은 addReq, 즉 대기벨임. 그때의 Result라 하면
//토픽스 오브젝트스토어에 저장된 다음 생긴 식별자,즉 id 값임 .
</script>get(읽기)
- 과정은 비슷. 우선 트랜잭션을 통해서 토픽스의 레퍼런스를 찾아와야함.
<script>
let id = Number(prompt('?id')); //프롬프트로 아이디값 물어보는것 필요. 사용자가 입력한 것은 기본적으로 문자기때문에 숫자로 바꾸는 컨버팅.
let store = db.transaction('topics', 'readonly').objectStore('topics');
// 읽기 전용으로 했을 때 성능이 더 좋음.
let getReq = store.get(id); // 스토어(레퍼런스)에 겟을 하면 getReq(대기벨)획득
getReq.addEventListener('success', function(event){
console.log(event.target.result);
// 데이터 로드에 성공했을 떄, 이때 event.target.result는 입력받은 id의 객체를 가져옴.
</script>
load (여러건의 목록을 가져오기)
<script>
let store = db.transaction('topics', 'readonly').objectStore('topics');
let getAllReq = store.getAll();
//getAll이라는 api로 호출하면 모든 데이터를 가져옴.
getAllReq.addEventListener('success', function(event){
console.log(event.target.result);
});
</script>update
<script>
let store = db.transaction('topics', 'readwrite').objectStore('topics');
let putReq = store.put({
id:Number(prompt('id?')), // 아이디값 입력받고, 아래에 내용들 입력받기.
title:prompt('title?'),
body:prompt('body?')
});
putReq.addEventListener('success',function(event) { // putReq라는 대기벨을 받고, success되었을 때
console.log(event);
});
</script>delete
<script>
let store = db.transaction('topics', 'readwrite').objectStore('topics');
let deleteReq = store.delete(Number(prompt('id?')));
deleteReq.addEventListener('success', function(event){
console.log(event);
});
</script>
백엔드개발자