[220102-220108] 시간아 멈촤

 

 

1/2

📝 할 일

• 4차과제 코드리뷰 피드백 수정 & 정리

 

✅ 한 일

• 4차과제 코드리뷰 피드백 수정 & 정리

코드리뷰 대한 질문과 리팩토링 계획이나 기간에 대한 회의 후 피드백 수정을 끝내고 pr 한 뒤 이슈에 정리했다

수정이 어려운 건 없었는데 짜잘하게 귀찮은 게 많아서 수정하는 데도 시간이 걸리고 어떻게 고쳤는지 정리하는 데도 시간이 좀 걸렸다

 

그리고 수정 도중에 에러가 생겨서 시간이 더 걸린 것도 있었다

로그인 후 처음 구매하기 들어가면 length 에러가 나는 상황이었다

계좌 조회 api 쪽에서 data 를 잘 불러오지 못하는 것 같은데 정확히 원인을 알 수 없었다

 

 

fetch 함수를 모듈화로 분리하지 않고 컴포넌트 내부에서 useEffect 로 불러오니 작동이 되는 것을 보니 데이터를 잘못 보내고 있는 것 같진 않았다

 

// 계좌 조회 api
export const getAccountInfo = async ({ accessToken }) => {
  try {
    const res = await fetch(ACCOUNT_URL, {
      method: 'GET',
      headers: { ...HEADERS_USER, Authorization: accessToken },
    });
    const json = await res.json();
    return json;
  } catch (error) {
    console.error(error.message);
  }
};

다른 팀원과 함께 컴포넌트 내에서, fetch 함수 안에서 console 을 찍어 봤는데 accessToken 이 undefined 로 나오는 것을 보고 컴포넌트 내에서 다시 accessToken 을 받아 인수로 넣어주니 해결되었다

근데 전까지는 accessToken 을 잘 받아오다가 왜 갑자기 못 받아오는지 모르겠다

 

 

length 에러를 해결하니 결제 오류가 났다^^

 

 

단일과 다중 상품 구매 시 id 이름이 달라 생긴 오류로 로직을 추가하려고 했으나 코드가 길어져 or 연산자 사용하여 해결했다

 

아래는 수정 사항인데 정리해놓으니 뿌듯하기도 했지만 생각보다 많아서 좀 부끄러웠다

1. Account : accountColor 스타일 부분 인라인에서 외부로 수정

2. Header : search input react-hook-form 도입 → 해당 기능의 장점을 살릴 수 없을 것 같아 사용하지 않으려 했으나 해당 기능을 도입할 때 속도면에서 극적인 차이가 나서 도입하기로 결정

3. SearchItem : onClick 이벤트 핸들링 함수 분리, cur → prev 수정

4. MyBuy : 결제 버튼 onClick 이벤트 핸들링 함수에서 배송지정보 reload 부분 제거

5. Account : onChange 에 전달되는 함수에 인자로 넣는 bankName 제거

6. MyBuy : 수량 데이터 없는 경우 1로 처리하도록 수정

7. Search :  useSearchParams 변수 선언 방식 수정

8. Search : 키워드 구분 로직 부분 수정, else 문은 필요 없어서 삭제

9. Search : API 호출 방식을 로직 분리 x, useQuery 로 수정하여 처리 속도 증가

10. TotalProduct : error, loading 부분 if return 문에서 컴포넌트 return 문 안의 삼항연산자로 처리

11. Product : onClickDetail 함수 삭제

12. MyBuy : productsPrice 로직에서 반복문 안의 if else 는 상세페이지의 구매하기 경우 quantity 데이터가 undefined 되어 처리해준 것으로 else 문 제거하지 않았음, while 문 제거하여 productsPrice 에 누적하는 것으로 수정

13. MyBuy : 배송지정보 form 의 변수명은 추후 기능 구현하면서 수정 예정

14. css : 클래스네임 컨벤션에 맞게 수정. btn_heart → btnHeart

15. MyCart : 장바구니에서 구매하기로 넘겨주는 state 변수명이 동일하도록 수정. buyItem → buyProduct

16. loading : 로딩 시 LoadingModal 활용

 

 

 

 

 

 

 

1/3

📝 할 일

• 4차과제 리팩토링

 

✅ 한 일

• 4차과제 리팩토링

  // api 호출
  const {isLoading, data: search, refetch} = useQuery(['search'], () => {
      if (findTitle && tag) return getSearch(findTitle, tag);
      else if (tag) return getSearch('', tag);
      else return getSearch(title);
    },
    {
      onError: () => {
        alert('현재 검색을 이용할 수 없으니 문의 바랍니다.');
      },
    },
  );
  useEffect(() => {
    refetch();
  }, [refetch, title]);

검색 기능에서 useEffect 로 fetch 함수를 불러오던 것을 useQuery 를 이용하여 리팩토링을 했다

확실히 빨라진 게 느껴졌다

근데 자꾸 검색어만 잘 불러오고 가져오는 정보는 업데이트가 되지 않았는데 결국 useEffect 로 refetch 를 해줄 수 밖에 없었다

++ 나중에 다른 팀원이 알려줬는데 fetch 함수로 데이터를 가져올 때 검색어마다 다르기 때문에 다른 정보를 가져올 때마다 query 키로 고유한 값을 줬어야 했는데 계속 search 로 가져오니 문제가 생겼다고 했다 그래서 key 값으로 검색어를 집어넣어줬더니 refetch 도 필요 없었다… useQuery 에 대해 잘 공부도 하지 않고 사용하니 이런 일이 생긴 것 같아 부끄러웠다

 

react hook form 써서 배송지 정보 기능 구현 완.

검색어 입력 때 한번 써봤는데도 input 이 많아지니까 복잡해져서 강의를 계속 보면서 했다

아무래도 강의를 보면서 실제로 코드를 치고 쓴 게 아니라 잘 이해가 되지 않아 오래 걸렸다

 

 

 

 

 

 

 

1/4

📝 할 일

• 4차과제 리팩토링 마무리
• 노마드 코더 리액트 마스터 클래스 typescript 파트 실습

 

✅ 한 일

• 4차과제 리팩토링 마무리

다음 우편번호 api 이용하여 주소 입력 기능 구현? 완.

https://www.npmjs.com/package/react-daum-postcode

나는 새 창에 열어서 다음 주소 검색창이 나타났으면 좋겠는데 다들 모달창으로 나오게 구현해서 위 문헌을 참고해서 구현했다

복붙하면 되는거라 그렇게 어렵진 않았다

확실히 문서를 잘 읽어봐야 겠다는 생각이 들었다

 

에러 : https://mik-a.com/62

하다가 위 링크 같은 에러가 발생했는데 value 가 다 들어오지 않았을 때 value 에 넣어주려고 해서 그런 것 같았다

 

그리고 구매 페이지에 결제 로직을 promise.all 로 하고 useQuery 와 useMutation 도입해보려고 했으나 promise.all 찍먹만 하다가 끝이 났다^^..

내일은 찐으로 해야지! 해낸다!

 

 

오늘 리액트 수업을 듣다가 firebase 를 github 으로 deploy 하는 과정에서 에러가 났는데

firebase-hosting-merge.yml 파일에서 run: npm install && npm run build 으로 입력해주지 않아서 나는 오류였다

 

 

• 노마드 코더 리액트 마스터 클래스 typescript 파트 실습

리팩토링하고 리액트 수업듣느라 새벽 3시까지해서 겨우겨우 완성시켰다

그런데 타입스크립트는 들어도 들어도 잘 모르겠어서 계속 써봐야 겠다는 생각이 계속 들었다

어느 상황에서 타입을 지정해주고 어떻게 입력을 해줘야 하는지 감을 잘 못 잡겠다

interface 를 계속 붙여주긴 하는데 어느 때는 props 에 해주고 어느 때는 useState 에 해주고.. 너무너무 헷갈린다~~!

 

 

 

 

 

 

 

 

1/5

📝 할 일

• 4차과제 리팩토링 찐찐마무리
• 개발블로그 정리 & 제출

 

 

✅ 한 일

• 4차과제 리팩토링 찐찐마무리

promise.all 로 리팩토링 했으나 해당 기능은 promise all에서 배열에 담긴 promise이행이 하나라도 거부되면 전체 반환을 거부로 반환하긴하지만 이미 시행된 이행이 취소된다는 의미는 아니라고 함

그래서 이 로직을 다시 수정하거나 장바구니에서 품절상품자체를 비활성화하거나 구매 페이지에서 다시 업데이트해서 결제 버튼을 막도록 수정해야 할 것 같음

 

promise.all(products.map(
      // api 호출
    ))
      .then(배송비 생성,결제,삭제)
      .catch(콘솔에러)

→ 이런 식으로 로직을 수정

 

 

• 개발블로그 정리 & 제출

요즘은 하루 일과가 끝나고 바로 쓰는 걸 포기하고 간단하게 어떤 걸 했다고 쓴 뒤에 하루 전 몰아쓰는 걸 반복하고 있다

이래도 되나 싶지만 이렇게 라도 하는 게 어디냐 싶다ㅎㅎ.. 그래도 제출을 못하고 있는 건 아니니까..!

이 교육 과정을 들은지 벌써 3개월 반이 지나버렸다

시간이 어떻게 지나가는지도 모르게 하루하루 일과를 해내는 하루살이처럼 살고 있다

그래도 확실히 3개월 전을 생각해보면 아무것도 모르는 응애다 응애

아직도 배울 게 산더미지만 이만큼 성장한 내가 자랑스럽다!!!

매일매일 비관하며 사는 것보다 이렇게 조금이나마 낙관적으로 생각하며 사는 게 내 정신 건강에는 편한 것 같다..

앞으로 수료까지 3개월 반..! 아좌잣 파이팅!~~!

 

 

 

 

 

 

 

1/6

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

 

 

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

for (let i = 0; i < products.length; i++) {
      let quantity = products[i].quantity || 1;
      while (quantity > 0) {
        if (i === 0 && quantity === 1) {
          const plus = updateProduct(products[i].productId, { price: products[i].price + 3000 });
          plus.then(async (data) => {
            await getBuy(data.id, accountId, accessToken);
            updateProduct(data.id, { price: data.price - 3000 });
          });
          console.log(
            `장바구니 상품+3000 결제 ${products[i].productId || products[i].id} ${products[i].price}`,
            products[i],
          );
          quantity--;
        } else {
          await getBuy(products[i].productId || products[i].id, accountId, accessToken);
          console.log(`장바구니 상품 결제 ${i}번째`, products[i]);
          quantity--;
        }
      }
    }

상품 중 하나에 가격을 3000원(배송비) 를 추가하여 수정한 뒤 해당 값으로 결제를 진행하고 다시 상품의 원래 가격으로 수정하는 로직으로 결제하는 것을 성공했다

그러나 실제 결제 내역에서는 수정한 결과로 결제가 진행되었는지 알 수가 없었다

그 이유는 결제 내역 api 자체에서 결제할 때의 가격을 출력하는 것이 아니라 해당 상품의 id 를 이용해 최종 수정된 이후의 가격을 가져온다

 

 

해당 값을 원래 상품의 가격으로 수정하지 않고 결제했을 때는 수정 이전에 결제한 내역들까지 3000원(배송비)이 추가된 가격임을 확인할 수 있었다

결제할 때 배송비 만큼 상품 가격에 추가하여 수정하고 결제 이후 상품 가격을 다시 원래 가격으로 수정하는 로직은 사용하지 못할 것 같다

백엔드를 조절하지 않는 이상 배송비를 자체를 없애고 결제를 하거나 배송비 상품을 추가하는 방식으로 되돌아가야 될 것 같다

++ 팀원들과 중간 회의에서 얘기를 해봤는데 일단 배송비 상품이 결제 내역에 너무 많이 찍혀 불러오는 데 너무 많이 소모하니까 이 로직으로 진행하고 추후에 백엔드가 구축되면 로직을 변경하기로 했다

 

 

 

 

 

 

1/8

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

 

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

useMutation 으로 리팩토링하려고 했으나 안됨 for 문에서 빼서 단독으로 결제해도 안됨

걍 안됨 왜 안됨?

하루죙일 붙잡고 있었음 나 그냥 지쳐 쓰러짐

계속 _ref 어쩌구랑 undefined 뜸 나 그냥 기절

fetch 함수에서 console 찍으면 그냥 undefined. 무적권 undefined.

그래서 다른 팀원들이 쓴 mutation 배껴봄 응 아니야 안돼

다른 공부 하지도 못하고 스트레스 받아서 배달 오지게 시킴ㅠ.. 내일 회의때 물어봐야지…