IndexedDB2 Next.js 시작하기 - Drag and Drop 만들기 (2) MSW + indexedDB 시작하기...지난 시간에 indexedDB에 샘플 데이터가 저장되는 것 까지 세팅을 했다. 오늘은 indexedDB에서 데이터를 가져오는 get API와 데이터를 추가하는 post API 두 개를 만들어 실제로 데이터가 추가되는 것을 해볼 예정이다. indexedDB 데이터를 가져와보자먼저, useQuery를 통해 todoList 데이터를 가져오는 get API 호출 함수를 만들어야 한다.import { useQuery } from "react-query";import axios from "axios";const todoList = async () => { const response = await axios.get("/todoList"); return response.data;};export cons.. 2024. 8. 5. Next.js 시작하기 - Drag and Drop 만들기 (1) IndexedDB 시작하기...Trello 클론 코딩의 가장 메인 기능이라고 할 수 있는 드래그앤드롭 기능을 구현할 차례다. 라이브러리를 사용하는 방법도 있지만, 사용하지 않고 개발을 해볼 예정이다. 그냥 Drag and Drop은 간단하지만, Trello에서 제공하는 Drag and Drop 기능은 생각보다 복잡하다. 각각의 카드별로 드래그앤드롭이 가능한 것 뿐만 아니라 내부에 있는 카드 또한 자유롭게 이동이 가능한 구조로 되어있다. 우선, 간단하게 UI를 만들어보자. Draggable"use client";import React, { useState, useEffect } from "react";import { Card, Button } from "@mui/material";import { useMutation } f.. 2024. 8. 4. 이전 1 다음 728x90 반응형
