프로젝트23 [프로젝트][React] 예약 사이트 기능 구현하기 (when to meet) 목차이번 기능을 구현하면서 비대화형 이벤트에 대해서 많이 알아갔다.또한 비대화형 이벤트가 생각이상으로 까다로워서 당황스러웠다... 그래서 이번 기회에 한번 정리해보려고 한다. 완성한 모습대충 주요 기능만 완성하였다... 구현 시 고민했던 부분들1. 컴포넌트의 merge 컴포넌트가 합쳐지는 것이 너무 까다로워서 display의 여부로 만들었고 첫인덱스의 배열크기를 늘렸다.처음에는 배열을 늘리고 줄이는 식으로 했는데 그렇게 하면 인덱스 다루는 것이 너무 까다로워 배열의 크기는 바꾸지 않는 선으로 다시 진행했다. 각 배열 아이템의 타입 정의export interface ReservationInterface { content: string; //내용을 담을 곳 time: number; display:.. 2024. 9. 12. [재활용 프로젝트][리액트] 재활용 플랫폼 완성 https://sejong-reuse-hub.vercel.app/ Sejong Reuse Hub sejong-reuse-hub.vercel.app재활용 플랫폼 링크 한 학기 하면서 드디어 프로젝트를 끝냈다. 초반에 느슨하게 하다가 막판에 몰아 달린 것 같다. 프로젝트를 하면서 많은 것을 배웠고 아직도 갈길이 멀지만 나름 완성하고 보니 성장한 것 같아 뿌듯하다. 메인 페이지 지도 화면 게시물 등록하는 페이지 게시물 페이지 2024. 6. 11. [재활용 프로젝트][리액트] post edit page 구현 목차 완성된 모습 PostEditPage 코드 구현이미지 파일 수정은 추후 수정 예정import { useNavigate, useParams } from 'react-router-dom';import { useCallback, useEffect, useState } from 'react';import { Button } from '@mui/material';import { useRecoilState } from 'recoil';import { UserInterface } from 'configs/interface/UserInterface';import { userState } from 'store/atom/UserAtom';import { Position } from 'configs/interface/K.. 2024. 6. 7. [리액트][재활용 프로젝트] 댓글 crud 구현 목차 완성된 모습 crud를 위한 로직 코딩 (usequery이용)시험기간이라 급하게 하다보니 조잡하다.. const { data } = useQuery({ //read 구현 queryKey: [`comments/${boardId}`], //쿼리키 queryFn: ({ signal }) => getData(`boards/${boardId}/comments`, signal), }); const { mutate } = useMutation({ //create 구현 mutationFn: postComment, onSuccess: () => { queryClient.invalidateQueries({ //데이터가 즉각 stale 상태(데이터가 만료된 상태)가 되어.. 2024. 6. 7. 이전 1 2 3 4 ··· 6 다음 728x90
