Hot Fix

토큰이 있을때만 API에 요청하기

문제 인식

• 어느정도 기능구현이 완료되었을 쯤, 테스트용 새로운 브랜치를 만들어 각 기능 브랜치들을 통합하였다.
• 이 테스트 브랜치로 백엔드와 실질적인 통신을 해보려고 했는데, 메인 페이지에 들어서자마자 콘솔에 에러가 찍히면서 화면에 아무것도 나오지 않았다. ⇒네비게이션 바의 카트 모달창 컴포넌트에서 발생한 에러였고, undefined 값에 대해 map 메서드를 적용할 수 없다는 에러였다.
  

원인 파악

map 메서드를 적용할 배열의 값이 왜 undefined인지 로직을 살펴보았다. 메인페이지에 들어서자마자 네브바 컴포넌트가 호출되고 네브바 안의 카트 컴포넌트는 카트에 담긴 데이터리스트를 요청하게 되는데, 사실 백엔드에서는 카트에 담긴 데이터를 보낼 때 토큰이 있는 경우에만 데이터를 보내던 것이었다.

⇒ 즉, API에 호출해서 받은 값은 없는데 이 값을 가지고 map함수를 돌리다가 에러가 난것이었다.

문제 해결

로그인이 되어 있지 않을 때, 즉 로그인 토큰이 발급되어 있지 않을 때는 카트 데이터를 요청하지 않도록 로직을 수정하였다. ⇒ 데이터를 가져오는 함수에 조건문 추가.

const getCartData = () => {
    if (token) {
      fetch('http://10.58.3.49:8000/orders/cart', {
        method: 'GET',
        headers: {
          AUTHORIZATION: token,
        },
      })
        .then(res => res.json())
        .then(res => {
          if (res.message === 'EMPTY CART') {
            return;
          } else {
            setCartData(res.result[0].product);
            let sum = 0;
            res.result[0].product.forEach(product => {
              sum = sum + product.quantity;
            });
            setTotalOrderNum(sum);
          }
        });
    }
  };

백엔드 API에 장바구니 수량변경 정보 보내기

• 각자 목표하는 기능구현이 어느정도 이뤄졌을 때 쯤, 테스트 브랜치를 파고 팀원들의 코드를 병합했다.
• 기능 테스트 중 오더페이지에서 수량 변경시 백엔드에 통신이 이뤄지지 않는 문제를 발견했다.
• 팀원이 작성한 코드에서는 오더 페이지에서 수량 변경 시, 프론트 단에서 수량 변경은 정상적으로 이뤄지지만 백엔드에 수량변경 정보를 보내는 로직은 아직 구현이 안된 상태였다.

	<div className="SelectQuantityBox">
    {ProductData.quantity}
    <button className="SelectQuantityPlus" onClick={() => onIncrease(id)}>
      +
    </button>
    <button className="SelectQuantityMinus" onClick={() => onDecrease(id)}>
      &#8722;
    </button>
  </div>;

• • 혹은 + 버튼 클릭 시, onIncrease(id) 라는 함수만 작동하고 있었으므로 백엔드에 수량변경을 알리는 로직을 추가했다.

    const patchOrderChange = (product_id, target) => {
        fetch(`http://13.125.236.223:8000/orders/cart/${product_id}`, {
          method: 'PATCH',
          headers: {
            AUTHORIZATION: token,
          },
          body: JSON.stringify({
            calculation: target,
          }),
        });
      };

    • patchOrderChange 함수는 product_id, target 두 개의 인자를 받는다
      • product_id 는 말그대로 해당 상품을 의미, target 은 Back-end에 보내줄 정보(증가 혹은 감소를 나타내는)다.
    • patchOrderChange() 함수를 +,- 버튼이 클릭되는 로직에 추가했다.

    <div className="SelectQuantityBox">
              {ProductData.quantity}
              <button
                className="SelectQuantityPlus"
                onClick={() => {
                  onIncrease(id);
                  patchOrderChange(id, 'addition');
                }}
              >
                +
              </button>
              <button
                className="SelectQuantityMinus"
                onClick={() => {
                  onDecrease(id);
                  patchOrderChange(id, 'subtraction');
                }}
              >
                &#8722;
              </button>
            </div>