지출 내역 리스트 기능 추가하기 : 5 - 1

기존 지출 내역 리스트에 기능 추가하기

구현 순서

1. 회원가입, 로그인 페이지 및 폼의 UI 생성
2. jwt 인증서버를 사용한 회원가입, 로그인 기능 추가 및 인증 상태 관리
3. 내비게이션 바 생성 및 라우터 설정
4. 프로필 수정 페이지 생성 및 프로필 수정 기능 추가
5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현
6. 이후 디테일한 부분 및 선택 구현 사항 다루기

5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현 - 1 (셋업)

 

기존 지출 데이터에는 누가 작성한 지출 데이터인지 알 수 없었음

이번에는 지출 데이터에 작성자 ID 데이터도 추가해 누가 작성했는지 알 수있게 하기

 

json-server와 Tanstack Query를 설치하고 루트 경로에 db.json 파일 생성 후 더미 데이터를 넣기

/db.json

{
  "expenses": [
    {
      "id": "46869445-5f9c-4650-941f-41bd9457bc07",
      "month": 1,
      "date": "2024-01-03",
      "item": "개인사업",
      "amount": 1000000,
      "description": "테슬라 모델 3",
      "createdBy": "Musk"
    },
    {
      "id": "a5c0d8de-d010-4d07-9934-29765051a7ea",
      "month": 2,
      "date": "2024-02-07",
      "item": "개인사업",
      "amount": 1000,
      "description": "X(구 트위터)",
      "createdBy": "Musk"
    },
    {
      "id": "0d0a966e-5c35-4bf0-aca4-f2b1265a432d",
      "month": 1,
      "date": "2024-01-13",
      "item": "식비",
      "amount": 2000,
      "description": "메가커피",
      "createdBy": "Rosie"
    },
    {
      "id": "9aba6d72-5ee7-4f02-a4d4-e8bbff9ded4b",
      "month": 1,
      "date": "2024-01-17",
      "item": "식비",
      "amount": 21000,
      "description": "대광참치",
      "createdBy": "Rosie"
    },
    {
      "id": "b82b213e-8164-4c89-94b0-7246cdcfc4f9",
      "month": 1,
      "date": "2024-01-21",
      "item": "식비",
      "amount": 412000,
      "description": "BBQ",
      "createdBy": "Me"
    },
    {
      "id": "d180194f-7c27-428a-8cd9-ad9114e58821",
      "month": 1,
      "date": "2024-01-22",
      "item": "도서",
      "amount": 23000,
      "description": "리액트 마스터",
      "createdBy": "Me"
    },
    {
      "id": "0abf06c3-8f0e-4ea1-9691-7facab0a91cb",
      "month": 1,
      "date": "2024-01-30",
      "item": "외식",
      "amount": 100000,
      "description": "세광양대창",
      "createdBy": "Me"
    }
  ]
}

더미데이터에는 createdBy에 이름이 들어가있지만 나는 작성자의 id를 넣어줄 것

그리고 json-server에 요청할 때도 일일이 URL쓰기 번거로우니 custom instance 추가

src/api/axios.js

export const jsonApi = axios.create({
  baseURL: 로컬호스트,
});

그리고 Tanstack-Query를 이용해 전역으로 지출데이터를 관리할 것이기 때문에

main.jsx에 새로운 QueryClient를 생성하고 넣어주고 데이터의 변화를 보기 편하게 Devtools도 삽입

 

src/main.jsx

 

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      <Provider store={store}>
        <App />
      </Provider>
    </QueryClientProvider>
  </React.StrictMode>
)

지출 데이터의 CRUD는 useQuery, useMutation내부에서 함수를 불러 사용함

=> 유지보수하기 편하게 따로 파일에 만들어서 관리

src/api/expense.js

import { jsonApi } from "./axios";

// 지출 데이터 불러오기
export const fetchExpenses = async () => {
  try {
    const response = await jsonApi.get("/expenses"); // GET요청으로 불러오기
    return response.data;	// 요청 성공시 데이터 반환
  } catch (error) {
    console.error(error);	// 실패시 에러
  }
};

// 특정 지출 데이터 불러오기
export const fetchExpense = async ({ queryKey }) => {
  try {
  	// GET요청 및 쿼리로 조건에 부합하는 특정 데이터만 불러오기
    const response = await jsonApi.get(`/expenses/${queryKey[1]}`);
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

// 지출 데이터 추가하기
export const addExpense = async (newExpense) => {
  try {
  	// 인자로 받은 새로운 지출 데이터를 POST요청으로 추가
    await jsonApi.post("/expenses", newExpense);
  } catch (error) {
    console.error(error);
  }
};

// 지출 데이터 수정하기
export const editExpense = async (editedExpense) => {
  const { id, ...rest } = editedExpense;
  try {
  	// 인자로 받은 수정된 지출 데이터를 PUT요청으로 동일한 id의 기존 지출 데이터에 넣어줌
    await jsonApi.put(`/expenses/${id}`, rest);
  } catch (error) {
    console.error(error);
  }
};

// 지출 데이터 삭제하기
export const deleteExpense = async (id) => {
  try {
  	// 인자로 받은 id와 동일한 지출 데이터를 DELETE 요청으로 제거
    await jsonApi.delete(`/expenses/${id}`);
  } catch (error) {
    console.error(error);
  }
};