[TIL] 내일배움캠프 React 과정 2024.06.14

오늘의 한 일

• 코딩테스트 연습
  • 다음 큰 숫자
• 개인 지출 관리 어플
  • 로그인 여부 확인 로직 수정
  • 라우팅 수정
  • 에러 처리(이미지 용량이 큰 경우)

통신 과정에서의 에러 처리

내가 겪었던 문제

• 413이라는 error reponse가 발생했는데 413에 대한 에러 처리를 하고 싶어도 어디에서도 error에 대한 response를 받을 수가 없었다.
• 따라서 이미지 용량이 초과했을 때에 대한 에러 처리에 문제를 겪게 되었다.

나의 코드

  //user.api.js
class UserAPI {
  #axios;

  constructor(axios) {
    this.#axios = axios;
  }

  ... 
  
  async updateUserInfo(formData) {
    const accessToken = localStorage.getItem("accessToken");
    try {
      const path = "/profile";
      const response = await this.#axios
        .patch(path, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: `Bearer ${accessToken}`,
          },
        })
        .catch((error) => {
          console.log(error);
          if(error.response){
            console.log(error.response)
          }
          else if(error.request){
            console.log(error.request)
          }
          else{
            console.log(error)
          }
        });
      const responseData = response.data;
      return responseData;
    } catch (err) {
      if (!accessToken) {
        alert("AccessToken이 만료되었습니다!");
        useUserStore.getState().setLogOut();
      } else {
        alert("이미지 용량을 초과하였습니다");
      }
    }
  }

• axios 공식 문서를 참고하여 error에서 받을 수 있는 모든 경우를 console로 찍어 보았다.
• 그러나 413 error response에 대한 정보는 찾을 수가 없었다...

튜터님과 에러를 찾아본 과정

• 개발자 도구의 network 창을 활용하여 response가 돌아오지 않는다는 것을 확인하였다!

결론

• 현재 Axios에서 CORS 관련 이슈가 있다고 한다.
• 백앤드로 통신하는 중간 과정에서 데이터 용량에 제한을 걸어두고 적절한 response를 설정하지 않아서 생긴 문제로 보였다.
• 백엔드를 담당하신 튜터님께 데이터 제한을 해제하거나, 적절한 response를 보내달라고 요청해 주신다고 하셨다.
• 일단은 용량 문제를 제외하고 다른 문제가 없어보이므로 patch시 생기는 오류 전체를 용량에 관한 문제로 처리하는 것으로 임시 해결하였다.

오늘의 회고