미니프로젝트 2️⃣주차 회고

🗓 일주일 간 작업한 내용

미니 프로젝트는 약 2주간 진행되는 프로젝트였고 백엔드와 프론트엔드가 동시에 개발을 시작했습니다. 따라서 지난주는 '디자인, 목업 데이터로 마크업'을 진행을 했고, 이번주에는 백엔드에서 만들어주신 api를 붙이는 작업을 했습니다.

✏️ 새롭게 공부하게된 점

📍 useMutation 사용

지난 프로젝트에서는 useQuery를 사용해 상품 데이터를 불러오는 작업을 했었는데요. 이번 프로젝트에서는 useMutation을 이용해 장바구니의 제품을 추가, 삭제하는 로직을 구현했습니다.

  // 상품 추가
  const addCartList = useMutation((id: string) => addToCart(id), {
    onSuccess: () => {
      queryClient.invalidateQueries(["cart"]);
    },
  });

addCartList는 장바구니에 상품이 추가되는 함수로 mutationFn에 비동기 처리가 이루어지는 addToCart 함수를 넣었습니다.

데이터 변경 요청이 성공적으로 수행되었다면 onSuccess에서 성공한 경우에 대한 액션을 추가할 수 있습니다. 저의 경우 invalidateQueries를 사용해 queryKey의 유효성을 제거했습니다. 이렇게 하면 캐싱되어 있는 데이터가 아닌 서버에 새롭게 요청한 데이터를 불러와 변동사항을 즉시 확인할 수 있습니다.

const handleAddCart = () => {
    if (auth.email) {
      addCartList.mutate(id as string);
  };

mutate는 useMutation에 작성한 내용들이 실행되도록 trigger 역할을 합니다. 장바구니 추가 버튼을 클릭할 경우, mutate를 사용해 장바구니에 상품이 추가되도록 했습니다.

📍 모달창 수정

  const addCart = () => {
    if (auth.email) {
      cartItems?.forEach((item: IDetail) =>
        item.productId === id
          ? setOpenModal("already")
          : setOpenModal("selected"),
      );
      if (openModal === "selected") {
        return;
      }
      addCartList.mutate(id as string);
    } else {
      setOpenModal("notLoggedIn");
    }
  };

대출 상품 추천 서비스에서는 장바구니의 상품 수량을 추가하는 로직이 불필요하다고 판단했습니다. 따라서 장바구니에 상품이 담긴 경우 상품이 담겼음을 공지하는 메시지, 장바구니에 선택한 상품이 추가되어 있는 경우 이미 추가된 상품임을 공지하는 메시지, 로그인이 되지 않은 경우 로그인을 권하는 메시지를 담은 모달창을 띄웠습니다. 또한 장바구니에 해당 상품이 없는 경우에만 상품을 추가할 수 있도록 조건문을 추가했습니다.

<CartModal
                setOpenModal={setOpenModal}
                text={
                  openModal === "selected"
                    ? "선택한 상품이 장바구니에 담겼습니다."
                    : openModal === "notLoggedIn"
                    ? "로그인 후 이용 가능합니다."
                    : "이미 장바구니에 담긴 상품입니다"
                }
              />

모달창은 state값에 따라 내용을 지정해 메시지가 보이도록 했습니다.

📍 axios의 request body

// 장바구니 상품 추가
export const addToCart = async (productId: string) => {
  const res = await client.post(
    "/cart",
    {
      headers: addHeaders,
    },
    data {
		productId

	}
  );
  return res.data.data;
};

장바구니에 상품을 추가할 때 request body에 담을 데이터인 productId를 data에 담아 api에 요청을 보냈습니다다. 하지만 401 에러가 발생하며 상품이 추가되지 않았습니다.

// 장바구니 상품 추가
export const addToCart = async (productId: string) => {
  const res = await client.post(
    "/cart",
    {
      productId,
    },
    {
      headers: addHeaders,
    },
  );
  return res.data.data;
};

https://rapidapi.com/guides/request-body-axios를 참고해보니 request body를 data가 아닌 객체 또는 배열로 작성하는 방법이 있어 이 방법으로 함수를 수정했더니 성공적으로 api가 호출되었습니다.

✍️ 프로젝트 회고

프론트와 백이 동시에 개발을 시작하다 보니 api 작업이 많이 늦어져 거의 하루 이틀만에 로직을 구현해야 했습니다 .. 백엔드와의 협업이 처음이다 보니 의사소통이 어려웠고 회의를 거듭해 의견을 맞추어 나가야 했습니다. 결과적으로는 지속적인 소통을 통해 합의점을 찾았지만 요구사항을 더 명확하게 말했더라면, 서버에 대한 지식이 더 있었다면 훨씬 수월하게 작업했을 것 같아 아쉬움이 남습니다 .. (덕분에 공부해야할 부분이 명확해지기도 했습니다 ㅎㅎ) 개발 뿐 아니라 기획과 디자인도 신경써야 했기 때문에 생각할 것이 많았고 .. 의욕만큼 미감이 따라오지를 못 해 슬프기도 했지만 ㅜㅜ 최종적으로 계획했던 로직들을 모두 구현해 프로젝트를 마무리할 수 있어 기쁩니다 ㅎㅎ