TIL 0911

회고록

리액트 심화주차 개인과제 트러블슈팅

1. MBTI 테스트를 하고 결과에 넘어가는 부분에서 데이터 값을 불러와서 값을 계산을 할때 못불러오는 현상 발생

2. 처음 에러가 발생했을때 useMutation으로 불러온 값이 못불러오는줄 알았지만 console.log를 찍었을때 데이터 값이 잘 불러와졌다. 그래서 useEffect랑 useState를 사용해봤지만 해당 오류는 계속 발생하였다.

3. 예전에도 이런 문제가 있었던거 같아서 생각해보았는데 삼항 연산자로 데이터를 못불러왔을때는 코드가 실행되지 못하게 작업을 했던것이 기억나서 수정을 해보았는데 잘 작동하는 모습이 보였다.

const Result = ({ userInfo }) => {
  const navigate = useNavigate();
  const { data } = useGetResultQuery();
  const userResult = data?.filter((result) => result.userId === userInfo.id);
  // 삼항 연산자 사용으로 해결
  const result = userResult?.[userResult.length - 1]; //데이터를 못불러오는 이슈 발생
  const description = mbtiDescriptions[result?.result] || 'MBTI 유형 설명을 찾을 수 없습니다.';

  return (
    <div className='font-bold rounded-lg p-6 mt-4 bg-white min-h-32 flex flex-col items-center justify-center'>
      <p className='text-2xl mb-8'>MBTI 결과 : ⭐{result?.result}⭐</p>
      <p>{description}</p>
      <button className='mt-6 w-48 p-2 text-white bg-[#3375f3]' onClick={() => navigate('/result/list')}>
        전체결과 보러가기
      </button>
    </div>
  );
};

vercel 배포시 문제

1. 작업을 완료 후 vercel 사이트에서 배포 작업 중 404 Error 발생

   • Github 저장소에 들어가보니 MBTI_BEST 폴더가 두개가 생성되어 있었음
   • Package.json 파일도 두개나 만들어져서 배포시 문제가 발생
   • 폴더 구조와 json, yarn.lock 파일을 삭제 수정 후 재업로드

2. 위 수정 완료 후 배포시 App.jsx에서 tanstack query를 못불러오는 에러 발생

   • App.jsx에서 tanstack query를 import 못한다는 에러가 발생하여 확인
   • 문제를 계속 찾다가 JSON 파일에 tanstack query가 없는 부분을 확인하여 추가 후 문제 해결

3. Router.jsx에서 Login과 Join으로 넘어가는 jsx를 못가져온다는 error 발생

   • 해당 에러 발생 후 유심히 찾아보니 파일 이름 대문자 하나로 발생한 오류
   • 로컬에서 작업시 해당 부분은 에러 없이 지나갔지만 배포시 오류가 생기므로 재확인 필요를 꺠달았따

이번 React 심화주차 개인과제가 끝났지만 작업을 하면서 많이 부족한걸 느꼈으며 챌린지반 수업과 더불어 많이 어려운 한주였지만 그만큼 많이 배운거 같아서 힘들면서도 좋은 시간이였던거 같다.

react Hook은 꼭 상단에 적자....!