KT AIVLE School 빅프로젝트 - 프론트에서 S3의 GET요청을 대기하는 로직

S3에 업로드 후 바로 해당 URL을 GET요청 했을 때 실패하는 경우가 생겼습니다. 그래서 이미지가 로드되지 않거나, 영상 재생이 되지 않아 새로고침을 해야하는 상황이 생겼습니다.

 

이는 업로드 시에 lambda 함수가 작동하는 동안이나, S3 자체의 속도 문제일 것으로 생각이 됩니다. 이는 사실 백엔드에서 작동을 하는지 확인 후에 응답을 해주는 것이 맞는 로직 같았지만, 백엔드에서 처리해주기를 기다리기엔 시간이 부족했어서 프론트에서 처리를 하기로 했습니다.

 

뿐만 아니라 유저가 버튼을 여러번 눌렀을 때 중복 요청이 생기는 문제가 있었습니다. 

 

그래서 아래의 함수를 통해서 요청 확인 후에 버튼의 로딩 처리를 확실히 해서 요청이 여러번 가지 않도록 했습니다.

export default function checkS3Url(url: string): Promise<boolean> {
  return new Promise((resolve) => {
    const intervalId = setInterval(async () => {
      try {
        const response = await fetch(url);
        if (response.ok) {
          clearInterval(intervalId);
          resolve(true); // 성공한 경우 Promise를 이용하여 값을 전달
        } else {
          console.error("GET 요청이 실패하였습니다.");
        }
      } catch (error) {
        console.error("GET 요청 중 오류가 발생하였습니다.", error);
      }
    }, 3000); // 3초 마다 요청 보내기
  });
}

  const handleUpload = async () => {
    if (videoFile && genre !== "") {
      setIsLoading(true); // 로딩 버튼 활성화

      // FormData 생성
      const formData = new FormData();
      formData.append("video", videoFile);
      formData.append("title", postTitle);
      formData.append("content", postContent);
      formData.append("genre", genre);
      formData.append("feedbackPrice", `${feedbackPrice}`);

      // 동영상 업로드
      const data = await createDancerPost(formData);
      if (data) {
        checkS3Url(data.video) // 3초마다 GET 요청 성공 확인
          .then((result) => {
            if (result) {
              setIsLoading(false); // 로딩 버튼 비활성화
              dispatch(postActions.uploadDancerPost(data));
              dispatch(postActions.moveNextStep());
            }
          })
          .catch((error) => {
            console.error("GET 요청 중 오류가 발생하였습니다.", error);
            toast({title: "업로드 실패", description: "서버에서 영상 업로드가 실패했습니다."});
          });
      } else {
        toast({title: "업로드 실패", description: "서버에서 영상 업로드가 실패했습니다."});
      }
    }
  };

위처럼 3초마다 요청을 보내고 GET요청이 성공했을 때 다음으로 넘어가도록 처리했습니다.