파일 다운로드 처리

export const downloadFiles = async (data) => {
  await data.reduce(async (promise, item, index) => {
    await promise;

    const link = document.createElement("a");
    link.download = `all_temp_file_name ${index}`;
    link.href = item;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 0.5초 지연
    return new Promise((resolve) => setTimeout(resolve, 500));
  }, Promise.resolve());
};​

 

 

이 코드는 downloadFiles라는 비동기 함수를 정의하고 있으며, 주어진 data 배열의 각 요소(파일 URL)를 순차적으로 다운로드하는 역할을 합니다. 여기서 reduce 메서드를 사용하여 이전 다운로드가 완료될 때까지 기다리면서 다음 파일을 다운로드하도록 설정하고 있습니다.

코드 해석

1. 비동기 함수 정의:
   • downloadFiles는 async 함수로, data라는 매개변수를 받습니다.
2. reduce 메서드 사용:
   • data.reduce(...)를 사용하여 data 배열의 각 요소에 대해 비동기 작업을 수행합니다.
   • promise는 이전의 비동기 작업을 나타내며, Promise.resolve()로 초기화됩니다.
3. 링크 생성 및 다운로드:
   • 각 파일에 대해 <a> 요소를 생성하고, download 속성을 설정하여 파일 이름을 지정합니다.
   • href 속성에 파일 URL을 설정하고, 링크를 클릭하여 다운로드를 시작합니다.
   • 다운로드 후에는 링크를 DOM에서 제거합니다.
4. 지연:
   • 각 다운로드 후 0.5초의 지연을 추가하여 서버나 클라이언트의 부하를 줄이는 역할을 합니다.

개선할 점

1. 정의된 promise 사용:
   • promise를 사용하는 것은 좋지만, reduce의 사용이 복잡해 보일 수 있습니다. for...of 루프를 사용하는 것이 더 직관적일 수 있습니다.
2. 링크 제거:
   • 링크를 생성한 후에는 항상 제거하도록 하는 것은 좋지만, 더 안전하게 처리할 수 있습니다.
3. 에러 처리:
   • 다운로드 중 오류가 발생할 경우 이를 처리하는 로직이 없으므로, 예외 처리를 추가하는 것이 좋습니다.

 

 

개선된 코드

 

export const downloadFiles = async (data) => {
  for (let index = 0; index < data.length; index++) {
    const item = data[index];

    try {
      const link = document.createElement("a");
      link.download = `all_temp_file_name ${index}`;
      link.href = item;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      // 0.5초 지연
      await new Promise((resolve) => setTimeout(resolve, 500));
    } catch (error) {
      console.error(`Error downloading file ${index}:`, error);
      // 추가적인 에러 처리 로직을 여기에 작성할 수 있습니다.
    }
  }
};