Frontend/React

[React-Query] 서버에서 받은 파일 데이터 다운로드 기능 구현하기

AlgoRoot 2022. 7. 27. 01:35
반응형

 

프로젝트에서 구현해야 하는 기능 중 유저들의 목록을 Excel 파일로 다운로드하게 하는 기능이 있었다. 

 

과정은 아래와 같았다. 

 

1. Button '등록자 목록 다운로드' 생성

2. Confirm Modal 생성

3. '확인' 클릭시 등록자 목록 파일 자동 다운로드 (API 요청 후 file data 받기) 

    3-1.   API 요청 후 response로 file data 받기

    3-2.  DOM Element a tag 생성 후 href에 가공된 URL 넣어서 link()시키기 

4. 성공시 모달 창 닫기

 

 

2. Confirm modal에서 '확인' 클릭시 React-Query의 mutate 함수를 실행시켜 POST 요청을 하면 response data로 파일 값이 들어온다. HTTP 요청 메서드가 POST인 이유는 다운로드하는 조건이 총 3가지가 있어서 파라미터에 각 조건을 넣어줘야 하기 때문이다.  

 

나의 경우 3. '확인' 클릭시 등록자 목록 파일 다운로드에서 이슈가 해결이 되지 않아 꽤 오랜 시간을 찾아봤고, 분명히 이전에 비디오를 받아올 때 같은 이슈가 있었음에도 똑같은 방식으로 트러블 슈팅을 겪어 시간을 허비했던 것이 허무했다.

 

도움을 주셨던 직장 동료분들께도 감사하고,  항해 프로젝트 때 겪었던 이슈와 같아서 같이 프로젝트를 했던 백엔드 동료분께 연락했는데 빠르게 본인의 트러블 슈팅 기록을 공유해주셔서 감사했다. 

 

그 과정을 겪었던 트러블 슈팅과 그 과정에서 사용하는 개념들을 더불어 설명해보겠다. 

 

 

 

 

metateUserFile이라는 api 호출 후 응답받은 데이터 fileData를 Blob객체로 만든다. 

 

이때 Blob생성자는 인수로 array와 option을 받는다. 

 

Blob생성자의 첫 번째 인수 Array로는 ArrayBuffer, ArrayBufferView, Blob(File), DOMString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있으며

 

option으로는 type 과 endings을 받는데, type은 데이터의 MIME타입을 설정하며, endings는 데이터가 텍스트일 때 개행 문자 '\n'을 어떻게 해석할지 지정하는 값이다. 기본값으로는 transparent을 설정하면 개행 문자를 바꾸지 않고 블록 데이터로 복사하고, native를 지정하면 사용 중인 OS에 맞춰서 줄 바꿈 문자 인식하여 데이터를 삽입한다.

 

const blob = new Blob(array, options);

new Blob(['<div>Hello Blob!</div>'], {
  type: 'text/html',
  endings: 'native'
});

 

 

따라서 fileData를 어떤 데이터 타입으로 넣어야 하냐가 중요한데, 이는 axios responseType에서 설정하면 되고, 나의 경우에는 arraybuffer로 설정하였다.  이 한 줄이 겪었던 트러블 슈팅이다... 비디오를 받았을 때에도 같은 이유 때문에 트러블을 겪어 놓고 또 이런다.

export class UserApi {
...

postUserFile = async (req: UserFileParamPostType): Promise<ArrayBuffer> => {
    const { data } = await this.axios({
      method: 'POST',
      url: `/v1/user/file`,
      responseType: 'arraybuffer',
      data: req.data,
      params: req.params,
    });
    return data;
  };
}
..

}

const userApi = new UserApi();

 

 

DOM에서 활용하기 위해서는 URL이 필요하므로 생성된 blob객체를 URL.createObjectURL(object)을 통해 blob객체를 가리키는 URL을 만들어준다.

 a.href = window.URL.createObjectURL(
        new Blob([fileData], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        }),
);

 

 

로컬에서 URL.createObjectURL() 을 통해 생성한 기존 URL을 폐기해주는 URL.revokeObjectURL()을 사용한다. 만약 해제를 하지 않는다면 기존 URL을 유효하다고 판단하고 자바스크립트 엔진 안에서는 GC(Garbage Collection)되지 않는다.

이는 메모리 누수를 초례할 수 있어 생성된 URL을 DOM과 바인딩한 후에는 해지하는 것이 좋다. 

const { mutateAsync: mutateUserFile } = usePostUserFileMutation();

const downExcel = async () => {
    const fileData = await mutateUserFile.({
      data: {
        reason,
      },
      params: {
        conference: selectedYear,
        is_marketing: isMarketing,
        is_offline: isOffline,
      },
    });
    if (fileData) {
      onClose(); // 모달창 닫아주는 함수 
      const a = document.createElement('a');
      const blob = new Blob([fileData], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      } // type 하드코딩인데 따로 불러올 예정..
      
      a.href = window.URL.createObjectURL(blob); 
      a.target = '_blank';
      if (isMarketing) {
        a.download = '1---리스트.xlsx';
      } else if (isOffline) {
        a.download = '2---리스트.xlsx';
      } else {
        a.download = '3---리스트.xlsx';
      }
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    } else {
      alert('fail to post file api');
    }
  };

 

 

여기서 또 하나 겪었던 이슈는 mutate후 반환되는 data가 undefined로 찍히는 것이었다. 해결은 동료분의 도움을 받아했는데, 집에 와서 좀 더 찾아보니 useMutation의 경우 CUD에 해당하는 API 호출 후 성공 여부는 알 수 있지만, 서버의 response를 data에서 받아올 수 없다는 것을 알게 되었다. 

 

이를 해결하기 위해서는 mutateAsync를 사용해야 한다. 이는 Promise를 리턴하여 결과값으로 response를 가져올 수 있게 된다.

 

const { mutateAsync: mutateUserFile } = usePostUserFileMutation();

const downExcel = async () => {
const fileData = await mutateUserFile.({
      data: {
        reason,
      },
      params: {
        ...
      },
 });
 
 ...
 
 }

 

 

 

짧은 회고

 

프로젝트를 하며 질문이 있을 때 동료분들과 공유하며 해결해나가는 과정이 좋았다. 내 이슈이지만 본인 것인 것처럼 찾아봐주시고, 코드를 살펴봐 주시고 해결해주셔서 감사했다. 또 그런 과정들을 즐겁게 생각해주시는 것 같아서 멋있었다.  

 

뿌듯한 하루이기도 하지만, 한편으로는 개인적인 역량에서 아쉬운 부분을 많이 느끼기도 했다. 이슈에 대해 설명을 할 때 내가 봐도 개선점이 많이 필요할 코드 같았기 때문이다. 

 

남의 코드를 보는 것이 쉽지는 않지만, 이것은 개발자의 숙명이기도 하다. 일일이 설명하지 않아도 설명이 되는 가독성 좋은 코드를 짜야겠다는 생각이 들었다. 

 

 

 

반응형