240705 TIL_개인 프로젝트6 (나만의 포켓몬 도감 웹사이트 제작) 종료, 개인 프로젝트 트러블 슈팅

미밍·2024년 7월 5일
0

우당탕탕 개발 일기

목록 보기
72/108

24070 ~ 240705

개인 과제

포켓몬 도감 완료!

넥스트 프로젝트긴 한데 페이지네이션을 제외하고선 과제 자체는 어렵지 않았다~! 페이지네이션은 좀 더 공부할 것.

전설의 포켓몬과 환상의 포켓몬이 빤짝거리는 선으로 했는데, 역시 테일윈드 컨피그 파일을 더 잘 다루는 방법을 알아야 할 듯 하다.

개인 프로젝트

트러블 슈팅...

import { useQuery } from "@tanstack/react-query";
import { getAbandonmentData } from "../api/PetApi";

const usePetQuery = (id = null) => {
  const fetchAbandonmentData = async () => {
    const response = await getAbandonmentData();
    const allData = response.response.body.items.item;

    if (id) {
      return allData.find((item) => item.desetionNo === id || null);
    }

    return allData;
  };

  return useQuery({
    queryKey: id ? ["ourPets", id] : ["outPets"],
    queryFn: fetchAbandonmentData,
  });
};

id를 조건문으로 달아서 활용하기. 처음 값을 null 으로 넣기...! 신기했다.

유즈쿼리를 커스텀 훅으로 만드는 법 + 활용하는 법을 조금씩 더 알게 되는 듯

API 연결

url과 key 모두 안 되는 상황 발생... 🧐
key가 인코딩된 것으로 썼는데 그래서 그런가 싶어서 여러 시도를 해봤더니 됐다. 혼자 api 연결할 때는 좀 더 많은 시도를 하면 경험이 늘 듯 하다,,,,^-^

profile
프론트앤드; Frontend

0개의 댓글