찍찍이 #트러블슈팅 (이미지 전송)

할 일 수정 과정에서의 트러블 슈팅

비교적 간단한 내용이긴 하지만 처음 마주했을 때 왜 안될까 당황을 했었다.

문제 발생의 사례 : 할 일 수정시 데이터를 불러옴. 이미지를 변경 혹은 삭제를 하지 않고 다른 정보들을 수정을 할때 오류 발생 (초기 이미지를 다시 전송을 할 때 문제가 발생)
이미지를 변경을 하면 Base64 형식의 이미지가 생성되지만 그대로 둘 경우 AWS S3에 저장한 이미지가 데이터에 저장됨.

• 할 일 수정 시 전송해야하는 이미지는 Base64 형식의 이미지이다.
• 현재 할 일 수정 모달을 띄웠을 때 나오는 이미지의 데이터는 AWS S3에 저장한 이미지이다.

front -> back (Base 64)
back -> front (AWS S3)

이에 대해서 백엔드 분들과 의견을 나눠본 결과 프론트 측에서 그냥 AWS S3를 Base64 형식의 이미지로 변환하여 할 일 수정 요청을 보내는 방법으로 채택되었다.
왜냐하면 백엔드 로직을 수정하지 않고 기존 API 구조를 유지하면서 문제를 해결할 수 있는 가장 빠르고 간단한 방법이라고 판단이 나왔기 때문이였다.

따라서 나는 변환 함수를 따로 생성하였다.

import axios from 'axios';

export const convertImageToBase64 = async (url: string) => {
  try {
    const response = await axios.get(url, { responseType: 'arraybuffer' });

    const base64Image = Buffer.from(response.data, 'binary').toString('base64');

    const contentType = response.headers['content-type'];
    const base64String = `data:image/${contentType};base64,${base64Image}`;

    return base64String;
  } catch (error) {
    console.error('Error converting image to base64:', error);
    throw error;
  }
};

이를 적용한 결과 성공적으로 할 일 수정을 완료할 수 있었다.