TIL : 이미지 표시 문제 해결

다른 분이 하신 코드를 리팩토링 하는 건 쉽지 않은 것 같다. 오류는 비교적 간단했지만 전체적인 코드를 파악하는데 시간이 걸렸던 것 같다. 내 코드를 다른 사람이 읽어도 이해하기 쉽도록 바꿔봐야겠다...!!🤗

 

 

🌼 사진 업로드 시 이미지가 표시되지 않고 "image"라는 글자만 뜬다.

  const { mutate, error: mutationError } = useMutation({
    mutationFn: postFile,
    onSuccess: (data, variables, context) => {
      const { imageUrl } = data;
      insertImageToEditor(imageUrl);
      console.log(variables, context, mutationError, data);
    },
  });

 

const { imageUrl } = data; 이 부분이 문제였다. 

이미지 주소 자체만 받아 와야 하는데 data 전체를 주고 있어서 안 됐다.

  const { mutate, error: mutationError } = useMutation({
    mutationFn: postFile,
    onSuccess: (data, variables, context) => {
      console.log('data', data);
      const imageUrl = data.data.url;
      console.log('imageUrl', imageUrl);
      if (!imageUrl) {
        console.error('imageUrl is undefined or empty');
      } else {
        insertImageToEditor(imageUrl);
      }

      console.log(variables, context, mutationError, data);
    },
  });

 

그리고 구조 분해 할당을 빼주었다. 

data.data.url 해서 올바른 주소를 넣어줘도 뭐가 문제지 했는데 구조 분해 할당으로 되어 있어서 안 됐다.

 

👉 data.data.url 자체가 이미지 URL을 포함하는 문자열이기 때문에 구조 분해 할당을 시도할 필요가 없다. 구조 분해 할당은 객체에서 특정 속성을 추출할 때 사용하는 것이지만, data.data.url은 문자열이므로 구조 분해 할당을 사용할 수 없다.

---

 

<추가 공부>

🌱 다음에 react-quill 써서 이미지 업로드 기능을 만들어 봐야겠다.  프로필 하면서 이미지 업로드를 해봤지만 다른 팀원 분 코드를 읽었을 때 조금 다른 느낌이었다.