[React] 멀티스레드 이용하여 파일 다운

라이브러리

---

yarn add worker-loader

worker 관련 라이브러리 설치

 

 

worker-loader 파일 설정

---

custom.d.ts

declare module "worker-loader!*" {
    class WebpackWorker extends Worker {
      constructor();
    }
  
    export default WebpackWorker;
}

 

 

worker 파일 작성

---

TestWorker.js

/* eslint-disable no-unused-vars */
/* eslint-disable no-restricted-globals */
const ctx: Worker = self as any;

// Respond to message from parent thread
ctx.addEventListener("message", async (event) => {
  await sleep();

  const { data } = event;

  axios({ url: data.url, responseType: 'arraybuffer', })
  .then(res => {

      const path = node_path.join('/Users', `./downloads/`, `${data.index}.png`);
      const writable = node_fs.createWriteStream(path);
          
      writable.write(new Uint8Array(res.data));

      ctx.postMessage(data.index);
  })
  .catch(err => {
  	  console.error('err: ', err);
  })

});

 

worker 사용

---

import Worker from "worker-loader!./TestWorker";

const worker = new Worker();

worker.onmessage = (e) => {

    if(true){
        worker.terminate();
    }
}

worker.postMessage({ 
    test: 'test'
});