MSW7 Next.js 시작하기 - Drag and Drop 만들기 (4) Draggable 지난 시간...지난 시간에는 draggable을 활용해서 list 카드 간 이동이 가능하게 만들어보았다. 이번에는 동일하게 todo 카드들이 자유롭게 draggable 할 수 있도록 만드는 방법을 시도해볼 것이다. 방법은 list 카드 이동과 동일한 방식이지만, 서로 다른 list 카드간 이동 또한 고려해야 하는 것이 차이점이다. todo draggable이번에도 우리가 해야 할 일은 draggable에 해당하는 함수들을 만들어주는 것이다. 기존에 handle 함수를 만들었던 것 처럼, 이번에는 todo handle 함수를 만들어보자. 먼저 아래의 state 함수를 만든다. 해당 state들은 list때와 같이 이동 전 위치와 이동 후 위치를 저장하는 용도이다. const [draggingTodoId,.. 2024. 8. 26. Next.js 시작하기 - Drag and Drop 만들기 (3) Draggable 시작하기...지난 시간에 indexedDB와 MSW를 활용하여 프론트엔드의 Todo를 추가할 수 있게 해보았다. 같은 방법으로 빠르게 List를 추가할 수 있는 기능을 만든 뒤, 대망의 Drag and Drop 기능을 구현해보자. 해당 DnD 기능은 라이브러리를 사용하지 않고 만들 예정이다. 어지간하면 라이브러리를 쓰는게 맞다. 빠르게 List 추가 기능 만들어보기Todo를 만들었을 때 사용법을 설명하였으니, List는 자세한 설명을 생략하겠다.//list를 추가하는 mutation 함수const list = async (data: { title: string }) => { const response = await axios.post("/list", data); return response.data.. 2024. 8. 18. 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. Next.js 시작하기 - 간단한 Login 페이지 만들기 (3) React-Query React-Query 사용하기지금부터 간단한 Login api를 React-query를 사용하여 구현해볼 예정이다. 앞서 언급했듯이, React-Query는 프론트엔드 api 사용에 있어 다양한 편의기능을 제공해 준다. 대표적으로 data가 갱신되면 useState를 사용할 필요 없이, 해당 data의 상태 변화를 확인하고 랜더링이 되는 기능부터, 페이지별 데이터 호출, loading 감지 등의 기능을 제공한다. 더 자세한 내용은 아래의 카카오 기술 블로그를 참고하면 좋을 것 같다. 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편:.. 2024. 7. 6. Next.js 시작하기 - 프로젝트 세팅 (2) React Hook Form 설치하기https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-hook-form.com React Hook Form은 기존의 form 테그를 리액트에서 훨씬 편리하게 사용할 수 있도록 기능을 제공해준다. 또한 html form 테그를 사용할 때 submit을 한 뒤 페이지가 refresh 되는 현상이 발생하지 않는다. 이외에도 에러 문구를 처리하거나 submit 충족 조건을 설정하는 것 등에 대하여 다양한 기능을 제공해준다. (성.. 2024. 5. 19. 이전 1 2 다음 728x90 반응형
