🗣 프로젝트 진행 시, axios를 통해 데이터를 가져와야 하는데 데이터가 없을 때 유용하게 사용할 수 있는 사이트를 소개하고 이를 이용해 json을 만들어 보겠습니다.
저는 포트폴리오용 dummy data를 만들어 볼 예정입니다.

사이트 소개

ObjGen - Live Code Generation for the Web

사용 방법

1. JSON Generator 클릭
   
2. Demo 버튼을 눌러보면 어떻게 작성해야 하는지 알 수 있습니다. 이를 바탕으로 필요한 형식의 json을 만들어 보겠습니다.
3. 데모를 참고하여 저는 아래와 같이 데이터를 만들어 보았습니다.
   
4. Copy 버튼을 눌러 사용하면 됩니다!

useQuery 이용하여 dummy data 뿌려보기

1. 더미데이터를 불러와서 axios를 이용해 데이터를 fetch 합니다.

// fetchData 

const jsonUrl = "../../iib/api/projectList.json"; // 더미 데이터 불러오기
import axios from "axios";

export const fetchData = async () => {
  const response = await axios.get(jsonUrl)
  return response.data.data
}

1. useQuery를 사용하여 data, error, isLoading 등을 불러옵니다.

// useQuery 

import { useQuery } from "@tanstack/react-query";
import { fetchData } from "../../api/index";

const useAPI = () => {
  const { isLoading, error, data } = useQuery({
    queryKey: ["projects"],
    queryFn: fetchData,
  })
  
  return { isLoading, error, data }
}

export { useAPI }

1. 화면에 데이터를 뿌려줍니다.

import { useId } from "react";
import { useAPI } from "../../iib/api/react-query/project";

const Projects = () => {
  const {isLoading, error, data} = useAPI();
  const id = useId();
  
  return (
    <ul>
      {isLoading && <>Loading ...</>}
      {error && <>에러가 발생했습니다! 잠시후 다시 시도해주세요.</>}
      {data && data.map((item: any, index: any) => (
        <li key={item.id + id}>
          1. {item.copy}
          2. {item.title}
          3. {item.description}
          4. {item.tag.map((tag) => <span>#{tag}</span>)}
        </li>
      ))} 
    </ul>
  )
}

export default Projects;

아래 사진을 통해 dummy data가 정상 출력 됨을 확인했습니다. 👏