[TIL] Today I Learned (2022.05.27)

IndexedDB 써보기 도전
근데 왜 안될까?

함께 즐거운 삽질시간 가져보았다.
의미있었어...
@lumpenop @hsw824 @Seung-wan

IndexedDB

use-indexeddb

"use-indexeddb": "^1.0.9",

npm

import React from "react";
import IndexedDBProvider, { useIndexedDBStore } from "use-indexeddb";

// Database Configuration
const idbConfig = {
  databaseName: "fruity-db",
  version: 1,
  stores: [
    {
      name: "fruits",
      id: { keyPath: "id", autoIncrement: true },
      indices: [
        { name: "name", keyPath: "name", options: { unique: false } },
        { name: "quantity", keyPath: "quantity" },
      ],
    },
  ],
};

// Wrap your child component into Provider
const Container = () => (
  <IndexedDBProvider config={idbConfig}>
    <Example />
  </IndexedDBProvider>
);

const Example = () => {
  const { add } = useIndexedDBStore("fruits");

  const insertFruit = () => {
    add({ name: "Mango 🥭", quantity: 2 }).then(console.log);
  };

  return <button onClick={insertFruit}>Insert</button>;
};

export default Container;

삭제

import { useIndexedDBStore } from "use-indexeddb";

function Example() {
  const { deleteByID } = useIndexedDBStore("fruits");

  const onClick = () => {
    deleteByID(1)
      .then(console.log)
      .catch(console.error);
  };

  return <button onClick={onClick}>Delete Fruit with ID 1</button>;
}

크롬에서 직접 지워주기

indexedDB.deleteDatabase("moadata-db")

꿀 크롬 익스텐션

React Developer Tools
Redux DevTools

8팀짱

오늘도 새벽까지 개발해버렸다 🔥🔥

이제 손목이 아파

손도 쉬어줘야 한다는 것을
어째서 아파서야 알게되는걸까
검지 손가락이랑 손목이 계속 뻐근하다.
버티컬 마우스 고장나서 안쓰니까 티가 확난다.

허리 스트레칭! 손목 스트레칭! 목 스트레칭!