🍑 Components

• render()를 통해 html 요소를 반환하는 함수
• 독립적이고, 재사용이 가능한 작은 UI조각
• Javascript함수와 동일한 용도로 사용
• component단위로 쪼개면 코드의 재사용이 쉽고 효율적으로 관리할 수 있다.
• 항상 대문자로 시작
• 클래스형 컴포넌트보다 함수형 컴포넌트가 더 발전된 기술이다.

🍑 Templete Literal

• `${내용}`을 사용해 표현하는 표현방법
• 사용하고 싶은 변수명을 ${}로 감싸면 된다.

const name = 'Circlewee';
const age = 26;

console.log(`name: ${name}, age: ${age}`); // name: Circlewee, age: 26

🍑 Indexed DB

• JS기반의 객체 지향 데이터베이스 -> 자료형과 객체 저장 가능
• 브라우저 객체, JS 객체, 파일, blobs등을 저장

1. key-value형태의 데이터베이스
2. Transaction 기능을 지원
3. localstorage에 비해 훨씬 더 많은 데이터 저장 가능

• 작업 순서
  1. 데이터베이스 열기
  DB 수정시 version을 수정해야 한다.

    let request = indexedDB.open('name', version);

  2. 데이터베이스에 ObjectStore 생성
  3. Transaction 시작 - 데이터 추가, 검색 작업 요청
  4. index마다 DOM 이벤트 수신해서 작업
  5. 결과 수행

🍉 ObjectStore

• 데이터를 담은 공간이며 여러개의 key-value 값으로 생성
• ObjectStore의 이름은 고유해야함

const usersStore = database.createObjectStore('users', {keyPath: 'id'})
const usersStore = database.createObjectStore('users', {autoIncrement: true})
const usersStore = database.createObjectStore('users', {keyPath: 'id', autoIncrement: true})

• userStore 저장소에 users라는 테이블이 생성됨

onRequest.onupgradeneeded = () => {
  const database = onRequest.result;
  const objectStore = database.createObjectStore('store name', {keyPath: 'id});
}

• .onupgradeneeded()로 데이터베이스가 업그레이드 될 때 ObjectStore 생성 또는 수정

• ObjectStore 생성하기

const initializeDB = indexedDB.open('myDB', 1)
initializeDB.onupgradeneeded = () => {
  const database = initializeDB.result;
  database.createObjectStore('users', {keyPath: 'id});
}

🍉 Transaction

const transaction = database.transaction('objectStore Name', 'Transaction Mode');

• 모든 데이터 읽기 및 쓰기는 transaction 내에서 수행됨
• objectStore Name: 객체 저장소 이름
• Transaction Mode: readonly, readwrite, versionchange

// users 테이블에서 transaction을 instance화
const transaction = database.transaciton('users', 'readwrite').objectStore('users');

1. transaction은 데이터베이스 객체 단위로 작동하므로 transaction을 사용할 객체 저장소를 지정해줘야 함
2. 'readwrite'모드 사용: 이미 존재하는 objectStore의 데이터를 읽고 다시 쓸 때

const todos = database.createObjectStore('todos', {sutoIncrement: true});
function addTodos() {
  const todo = {title: 'todo1', text:'no.1 thing to do'};
  const transaction = database.transaction('todos', 'readwrite');
  const todos = transaction.objectStore('todos');
  todos.add(todo);
}