항해99 12기 - 230408TIL

오늘 배운 것

• 발생한 문제:

1. 유저1(고니)로 프로필 사진 변경
   
2. 유저2(곽철용)으로 프로필 사진 없이 저장 버튼 누르면..
   유저1이 변경한 프로필 사진으로 바뀐다..
   network 탭에서 payload를 봐도 img에 아무것도 안들어가있음..ㅠ 그런데 이미지가 바뀐다...ㅎ.....
   
   

큼.. 처음엔, formData의 캐시문제인가? 하면서 submit할때 setFile해줬던걸 ""으로 바꿔보았다.

function onSubmitHandler(e) {
  e.preventDefault();

  formData.append("img", file);
  formData.append(
    "data",
    new Blob([JSON.stringify(data)], { type: "application/json" })
  );

  mutation.mutate(formData);

  setFile("");
  formData.delete("img"); // reset formData
input
  alert('프로필 변경 성공');
}

그런데 해결되지않았다. 여기서부터 약 6시간 눈물의 똥꼬쇼가 시작됐지만 축약하도록 하겠습니다. 어쨌든 마지막에는 formData에 append해 주는것을 if문을 걸어줘서 보내려고 했다.

function onSubmitHandler(e) {
  e.preventDefault();

  const formData = new FormData();

  const userId = profileData?.data.memberId; // get the user's ID from the profileData
  const imageFileName = file ? `${userId}_${file.name}` : "";
  

  if (file) {
    formData.append("img", file, imageFileName);
  } else if (profileData?.data.profileImageUrl) {
    formData.append("img", profileData.data.profileImageUrl);
  }
  else {
    formData.append("img", ""); // append an empty value to clear any previously uploaded image
  }
  

  console.log(file)
  console.log(imageFileName)

  const data = {
    nickname: nickname,
    statusMessage: statusMessage,
  };

  
  formData.append(
    "data",
    new Blob([JSON.stringify(data)], { type: "application/json" })
  );

  mutation.mutate(formData);
  alert('프로필 변경 성공');
}

내가 아무리 if문을 걸어도.. 다른 데이터로 넘어가는 너...
심지어 file자체를 null로 넣어도 데이터가 들어가더라..^^....
여기서... 뭔가 잘못됨을 직감했다.., 그래서 배포된 주소에서 유저1로 로그인해서 프로필을 바꾸고, 로컬환경 유저2로 이미지없이 저장버튼을 눌렀는데도 바뀐다...배포된 주소에서 변경한 유저1의 프로필 사진으로..ㅎ....이거 진짜 뭔가 너무 이상했다. 내가 formData에 대한 정확한 이해가 없어서 그런가..?...

그래서.. 포스트맨을 켰다.

• 지윤2와 지윤3의 프로필은 사진1로 동일하다(처음상황)

1. 지윤2로 조회 -> 사진1이 나옴
2. 지윤3으로 조회 -> 사진1이 나옴
3. 지윤3 수정 -> 사진2로 바뀜
4. 지윤2 조회 -> 아직 사진1이 나온다.
5. 지윤2 수정(이미지없이) -> 사진2로 바뀜.(사진1이 나와야한다)

.......ㅎ...백엔드에서도 똑같이 동작하는구나......(다행이다)
그래서 백엔드 팀원분께 말씀드리ㄱ로 했다....
너무나 힘든 하루였지만.. formData에 대해 정말 많이배웠다... 포스트맨 쓰는법도 다시 익혔고..^^....ㅎ..