TIL-45 React 스토리지를 이용한 파일 업로드 📤

기업 협업 프로젝트 중 CRUD 중 Read, Upload, Delete는 구현을 했는데
업로드를 어떻게 구현해야 할지 막막했다. 처음에는 프론트엔드 - 백엔드 - 스토리지 이렇게 접근하려고 했는데 백엔드를 거치는 게 효율성 고려 불필요한 거 같다는 의견이 나와서 프론트엔드 - 스토리지로(azure) 접근을 하려고 코드를 수정했다.

const postReport = event => {
    event.preventDefault();
    if (
      values.title > 9 &&
      values.description > 9 &&
      values.cover &&
      values.content
    ) {
      let formData = new FormData();
      formData.append('cover', values.cover, values.cover.name);
      formData.append('type', values.cover.type);
      formData.append('content', values.content, values.content.name);
      formData.append('type', values.content.type);

      let requestOptions = {
        method: 'POST',
        body: formData,
        redirect: 'follow',
      };
      fetch(
        `${URL}?title=${values.title}&description=${values.description}`,
        requestOptions
      );

      setTimeout(() => {
        getData();
      }, 1500);

      closeModal();
    } else {
      alert('Title, Description 10글자 이상 입력해주세요.');
    }
  };

처음에 input type을 file로 수정까지 했고 어떻게 담아서 보내야 할지 궁금해서 구글링 했다. formData에 append로 키값 형식으로 담아서 보내는 형식이다. 그래서 보냈더니 Cors 에러가 나왔다.
그래서 또 구글링을 했더니 http-proxy-middleware라이브러리를 설치하면 된다는 것이다. 역시나 안됐고 두 번째 방법으로는package.json에 Proxy를 설정하면 된다고 했는데 안되었다.
서버에서 Cors 오류를 해결하는 방법도 있지만 최대한 내 쪽에서 해결하고 싶었다.
그래서 마지막으로 외부 프록시 서버를 이용하기로 했다.
원래는 내 쪽에서 외부 서버에 요청하는 방식인데 프록시 서버를 이용해 우회에서 접속하는 방식으로 바꿨다.
외부 프록시 서버는 https://cors-anywhere.herokuapp.com/이고 접속하려는 URL 앞에 그냥 넣어주면 끝이다!
그랬더니 바로 성공했다 😭😭😭😭 여기까지 8시간걸린 거 걸린거 같다.
일단 성공은 했지만 아직 Cors 에러에 대해서 이해하지는 못해서 프로젝트가 끝나고 공부해야겠다