[DeepLook] 6. 최종 결과물, 이후 에러 핸들링과 마무리

최종 배포 링크 

https://deep-look.vercel.app

---

에러 핸들링

백엔드에 연결을 마쳤을 때쯤, 백엔드와 프론트엔드 작업이 모두 완료되었다.

그러나, 모델에 사진을 업로드 하는 부분에서 계속 잘 업로드가 되지 않아 다음과 같은 에러들이 발생했다. 

 

1. 413 에러

첫번째는, 이미지 업로드 시, base64로 인코딩 된 값이 전송되면서 발생한 413 에러였다. 413 에러는 많이 본 경험이 없던 터라, 서칭해 보았는데, 해당 에러가 발생한 이유는 이미지가 너무 컸기 때문이었다.

Nginx에서 기본적으로 요청 엔티티의 크기는 1MB로 제한이 되어 있기 때문에, 1MB가 넘는 이미지를 업로드했을 때 413 에러가 발생했던 것이다.

이에, 최대 50MB까지 업로드할 수 있도록 nginx 설정을 변경했다.

http {
  client_max_body_size 50M;
  ...
}

2. base64 인코딩 에러

client 측에서 이미지를 업로드할 때, 어떤 이유에서였는지 계속 CORS 에러가 발생했다.

그래서 업로드 시 작성된 api 코드를 보았더니, 다음과 같았다.

export const predictAPI = {
  POST_PREDICT: async (image: string, accessToken: string): Promise<any> => {
        // console.log(image);

        const base64Data = image.split(',')[1];
        const formData = new FormData();
        formData.append('image', base64Data);
        const response = await client.post(`/predict`, formData, {
            headers: {
                JWT: `${accessToken}`,
                'Content-Type': 'multipart/form-data',
            },
        });

        return response.data;
	};

export default predictAPI;

해당 코드는 test에 실패해도 예외 없이 결과값을 반환했고, 이후 프론트 측에서는 결괏값이 나오면 다른 페이지로 넘어가도록 설계했기 때문에 결괏값이 없는 채로 결과페이지로 이동하는 에러가 발생했다. 이에 나는 코드를 다음과 같이 변경했다

export const predictAPI = {
  POST_PREDICT: async (image: string, accessToken: string): Promise<any> => {
    // console.log(image);

    const base64Data = image.split(',')[1];
    const formData = new FormData();
    formData.append('image', base64Data);
    try {
      const response = await client.post(`/predict`, formData, {
        headers: {
          JWT: `${accessToken}`,
          'Content-Type': 'multipart/form-data',
        },
      });

      //   console.log(response);
      return { isSuccess: response.data.isSuccess, data: response.data };
    } catch (err: any) {
      //   console.log(err.response.data);
      return { isSuccess: err.response.data.isSuccess, data: err.response.data.message };
    }
  }
}

이렇게, 테스트가 실패하여 에러가 발생했을 경우, 자동적으로 reload하여 다시 테스트할 수 있게 로직을 변경했다.

---

마무리

이렇게, 약 2개월 간 처음 시도해본 ai 프로젝트가 끝났다. 물론 chatGPT의 도움을 많이 받았지만, 처음으로 데이터를 수집하여 전처리하고, 직접 학습시켜 백엔드까지 연결해 봤다는 점에서 정말 뿌듯했던 프로젝트였던 것 같다.

 

다만 왜인지 vision 분야에서 기대했던 재미(?)가 느껴지지 않았다. 너무 급하게 해서인지, 내가 정말 vision 분야에 관심이 없는 것인지 잘은 모르겠지만, 다른 분야의 프로젝트도 한번 해보고 싶어졌다.

아무튼 우리 팀원들 모두 고생했다 !!!