Web Worker를 사용한 이미지 로딩

// sample_worker.ts
addEventListener('message', async function (e: MessageEvent<string[]>) {
  const urls = e.data; 
  postMessage(urls.map(v => v.toUpperCase());
});

// main.ts
const worker = new Worker('./sample_worker.js') // 웹 워커의 소스가 타입스크립트라면 자바스크립트로의 transpile 과정이 반드시 필요하다. 
worker.postMessage(['str', 'ing', 'sample'])

worker.onmessage = e => {
	// 주고받는 데이터는 모두 이벤트 객체의 data 속성을 통해 전달된다.
	console.log(e.data) // ['STR', 'ING', 'SAMPLE'] 
}

// ImageLoadWorker.ts
self.addEventListener('message', async function (e: MessageEvent<string[]>) {
  const urls = e.data; // 메인 스레드로부터 전달받은 이미지 URL 배열

  const images = await Promise.all(
    urls.map(async (url) => {
      try {
        const response = await fetch(url);
        const fileBlob = await response.blob();

        if (/image\/.+/.test(fileBlob.type)) {
          return URL.createObjectURL(fileBlob);
        }
      } catch (e) {
        return null;
      }
    }),
  );

  self.postMessage(images);
});

URL.createObjectURL(fileBlob)

const maxWorkers = navigator.hardwareConcurrency || 2; // Safari 브라우저에서는 지원하지 않는다

const [workers, setWorkers] = useState<Worker[]>([]);

useEffect(() => {
  if (workers.length === 0) {
    setWorkers(
      new Array(maxWorkers)
        .fill(undefined)
        .map(
          () => new Worker(new URL('./ImageLoadWorker.js', import.meta.url)),
        ),
    );
  }

  return () => {
    workers.forEach((worker) => worker.terminate());
  };
}, [maxWorkers, workers]);

// 1개의 웹 워커에서 가져올 이미지의 수 = (전체 이미지 개수) / (웹 워커 개수)
const chunkSizeForWorker = useMemo(
    () => Math.ceil(images.length / maxWorkers),
    [images.length, maxWorkers],
  );

const loadAllImagesAtOnce = useCallback(
  async (imageUrls) => { // fetch로 가져올 이미지 주소 배열을 파라미터로 전달받음

    if (window.Worker) {
			// ObjectURL을 저장하기 위한 배열을 미리 생성해 둔다.
      setImageBlobs(new Array(imageUrls.length).fill(undefined)); // 웹 워커에서 fetch가 실패했을 때 null을 리턴하게 했으므로, undefined 값은 이미지 로딩 중이라는 의미도 가진다.

      const imageChunks = [];

			// 웹 워커들에 할당하기 위해 이미지 배열을 분리해서 저장해 둔다.
      for (let i = 0; i < maxWorkers; i++) {
        const startIndex = i * chunkSizeForWorker;
        imageChunks.push(
          imageUrls.slice(startIndex, startIndex + chunkSizeForWorker),
        );
      }

			// 이미지 로딩 작업이 끝날 때까지 기다릴 Promise 객체 배열을 구성한다.
      const imagePromises = imageChunks.map(
        (chunk, chunkIndex) =>
          new Promise<string[]>((resolve) => {
            const chunkWorker = workers[chunkIndex];

            if (chunkWorker) {
							// 워커에 이미지 배열을 전달한다.
              chunkWorker.postMessage(chunk);

              chunkWorker.onmessage = (e) => {
								// 워커에서 ObjectURL이 전송되면 Promise를 해결한다.
                resolve(e.data);
              };
            }
          }),
      );

			// 모든 워커의 작업이 끝날 때까지 기다린다.
      const imageBlobsChunks = await Promise.all(imagePromises);

			// 2차원 배열을 1차원 배열로 변환하는 작업을 거친다
      const allImageBlobs = imageBlobsChunks.reduce(
        (result, chunk) => [...result, ...chunk],
        [],
      );

			// ObjectURL 배열로 상태를 업데이트한다.
      setImageBlobs(allImageBlobs);
    }
  },
  [chunkSizeForWorker, maxWorkers, workers],
);