1. json-server : DB와 API 서버를 생성해주는 패키지
2. axios : HTTP 요청(GET, POST 등)을 처리하기 위한 Javascript 라이브러리
3. TanStack Query : 서버상태 관리 라이브러리

1. json-server

• 아주 간단한 DB와 API 서버를 생성해주는 패키지
• Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함

1. 설치: yarn add json-server
2. root 경로에 db.json 파일 만들기

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

3. yarn json-server db.json --port 4000

---

2. axios

: HTTP 요청(GET, POST 등)을 처리하기 위한 Javascript 라이브러리

설치: yarn add axios

1. URL
2. Method
   1) GET : 데이터 조회
   2) POST : 데이터 생성
   3) PUT : 데이터 전체 수정(덮어쓰기)
   4) PATCH : 데이터 일부 수정(update)
   5) DELETE : 데이터 삭제

'크로스브라우징' 이슈를 해결하기 위해 리셋css 설정

---

3. TanStack Query

1. 형태 : TanStack Query = axios + useContext

main.jsx파일에서 QueryClientProvider를 이용하여 전역에서 queryClient를 사용 (-> 'invalidateQueries' 사용 가능)

2. 등장배경

(1) 비동기 로직의 복잡성 해결 필요
- 'useEffect'와 'useState'를 사용한 비동기 데이터 처리방식은 상태 관리가 복잡하고, 코드 중복이 많아 유지보수가 어려움
- 'Redux Thunk'와 같은 미들웨어를 사용해도, 비동기 로직의 테스트가 복잡하고, 보일러플레이트 코드가 많이 생김.
(2) 서버상태 관리의 어려움
- 서버상태는 클라이언트상태와 달리 캐싱, 동기화, 재검증 등 관리해야 할 요소가 많음.

3. 개념 : 서버상태 관리 라이브러리

• 캐싱, 동기화, 무효화 등의 기능을 제공
  - 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능 향상시킴
  - 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태 유지
  - 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 가져올 수 있음.
• 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있게 됨.

4. 사용방법

설치: yarn add @tanstack/react-query

1) useQuery(=get, 데이터 캐싱, 데이터를 가져오기 위함)

• 한개의 인자를 가지고, 그 인자는 객체
• 이 객체 안에는
  queryKey : 배열 [ ] / queryFn : 비동기(페칭)함수 ()=>{}

  const getPosts = async () => {
  	const response = await axios.get("http://localhost:5000/posts");
      return response.data;
  };
  const { data, isLoading, isError } = useQuery({
      queryKey: ["posts"], // 배열
      queryFn: getPosts, // 함수('getPosts'라는 페칭함수(axios사용)) 
  });
  if (isLoading) {
      return <div>로딩중입니다...</div>;
  }
  if (isError) {
      return <div>오류가 발생했습니다..</div>;
  }

=> 데이터를 가져오고, 로딩 상태(isLoading), 오류 상태(isError), 그리고 데이터를 반환(return response.data)

2) useMutation(=자동 리페칭, 데이터 갱신, CUD(수정/삭제))

  const addPost = async (newPost) => {
    await axios.post("http://localhost:5000/posts", {
      title: newPost.title,
      views: newPost.views,
    });
  };
  
  const mutation = useMutation({
    mutationFn: addPost,
    onSuccess: () => {/*invalidateQuerys 사용*/},
  });

return (
  <div>
  	<button
  		onClick={() => {
         	mutation.mutate({ title, views }),
		}}
  	>
    추가
    </button>
</div>)

3) invalidateQueries(=쿼리 무효화, 데이터의 최신화)

: queryKey가 더이상 유효하지 않다고 알려주는 것 (특정 쿼리를 무효화하여 데이터를 다시 패칭하게 하는 함수)
: 데이터를 캐싱하는 기준(서버에 계속 요청하지 않고 계속 가지고 있는 기준): queryKey

const queryClient = useQueryClient(); // main.jsx에서 queryClient 가져옴

const mutation = useMutation({
    mutationFn: addPost,
    onSuccess: () => {
    queryClient.invalidateQueries(["posts"]); // ["posts"]를 다시 패칭해줌.
    },
  });