[작성자:] 김 형준

SharedArrayBuffer는 웹에서 스레드 간의 공유 메모리로 사용된다. 메인 스레드에서 4바이트 크기의 메모리 만들고 이를 공유해 웹워커에서 이 4바이트의 데이터를 정수값으로 해석해 값을 1 증가시키는 예제다. 먼저 vite로 프로젝트를 구성했으며 main.js의 코드는 다음과 같다.

if (!crossOriginIsolated) {
  throw new Error('SharedArrayBuffer를 사용하려면 crossOriginIsolated 환경이어야 합니다.');
}

const worker = new Worker('./worker.js');
const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);

view[0] = 42;

worker.postMessage({ buffer });

setTimeout(() => {
  console.log('메인에서 읽기:', view[0]);
}, 500);

이 시점에서는 2가지 문제가 발생해야 한다. 첫번째는 조건문 if에 대한 crossOriginIsolated를 통과하지 못한다. 이는 SharedArrayBuffer를 이용하기 위해서는 crossOriginIsolated가 설정되어야 한다. 두번째는 worker.js 파일이 존재하지 않는다. 첫번째 문제를 해결하기 위해서 먼저 다음과 같은 개발환경을 위한 패키지를 설치해야 한다.

npm install -D vite-plugin-cross-origin-isolation

그리고 vite.config.js 파일을 열어, 없다면 생성해서 다음처럼 플러그인을 추가한다.

import { defineConfig } from 'vite'
import crossOriginIsolation from "vite-plugin-cross-origin-isolation";

export default defineConfig({
  plugins: [
    crossOriginIsolation(),
  ],
})

두번째 문제인 worker.js 파일을 public 폴더에 생성하고 다음처럼 작성한다.

self.onmessage = (event) => {
  const buffer = event.data.buffer;
  const view = new Int32Array(buffer);

  console.log('워커에서 읽기:', view[0]);

  // view[0] += 1;
  Atomics.add(view, 0, 1);

  console.log('워커에서 변경:', view[0]);
}

값을 1 더하는 코드는 Atomics API를 이용해 데이터 경쟁이 발생하지 않도록 하는 것이 바람직하다.

웹은 기본적으로 단일 스레드이지만 WebWork를 통해 멀티 스레드를 사용할 수 있다. 별도의 스레드를 통해 어떤 그림을 그릴 수 있다면 그림이 그려지는 동안에도 다른 작업을 처리할 수 있다.

시나리오는 다음과 같다. 사용자는 자신의 PC에서 이미지 파일을 읽고 이미지 파일에 대한 데이터를 웹 워커에게 전달한다. 웹워커에서 이 이미지 데이터를 캔버스에 그린다. (사실 이 예제는 흐름상 묘한데, 이미지 데이터를 캔버스에 그린다라는 것을 캔버스에 원하는 도형들을 그린다라고 하는게 더 자연스럽다.)

먼저 UI로 이미지 파일을 읽어올 DOM이 필요하다. 이 코드는 main.js 파일에 존재한다.

document.querySelector('#app').innerHTML = /* html */ `
  <input type="file" /> 
`;

웹워크를 기동한다. 이 코드는 main.js 파일에 존재한다.

const worker = new Worker('./worker.js');

input DOM을 클릭해서 파일을 선택했을때의 이벤트는 다음과 같다.

const handleFile = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const canvas = document.createElement("canvas");
    const offsetScreenCanvas = canvas.transferControlToOffscreen();
    const dataUrl = event.target.result;
    worker.postMessage(
      { offsetScreenCanvas, dataUrl },
      [ offsetScreenCanvas ]
    );
  }
  reader.readAsDataURL(file);
}

const fileInput = document.querySelector("input");
fileInput.addEventListener('change', handleFile);

canavs를 만들고 이 캔버스를 웹워커로 전달하기 위해 offsetScreen으로 만든다. offsetScreen은 공유 메모리로 전달할 수 있지만 읽은 파일의 데이터는 복사해서 전달하고 있다. work.js 파일의 내용은 다음과 같다.

self.onmessage = async (event) => {
  const { offsetScreenCanvas, dataUrl } = event.data;

  // const response = await fetch(dataUrl);
  // const blob = await response.blob();

  const blob = await fetch(dataUrl).then((r) => r.blob());
  const imageBitmap = await createImageBitmap(blob);
  const context = offsetScreenCanvas.getContext('2d');

  const width = imageBitmap.width / 2;
  const height = imageBitmap.height / 2;

  offsetScreenCanvas.width = width;
  offsetScreenCanvas.height = height;

  context.drawImage(imageBitmap, 0, 0, width, height);
}

이미지를 캔버스에 다 그렇다면 캔버스에 그려진 결과를 Blob 데이터르 만들어 메인 스레드에 전달해야 한다. 관련 코드는 다음과 같다.

self.onmessage = async (event) => {
  ...

  context.drawImage(imageBitmap, 0, 0, width, height);

  offsetScreenCanvas.convertToBlob().then(blob => {
    const reader = new FileReader();
    reader.onload = () => {
      self.postMessage({ dataUrl: reader.result });
    };
    reader.readAsDataURL(blob);
  });
}

위의 코드와 관련된 메인 스레드의 코드는 다음과 같다.

worker.onmessage = (e) => {
  const img = new Image();
  img.src = e.data.dataUrl;

  document.querySelector('#app').appendChild(img);
}

앞서 언급했듯 위의 예제에서 가장 큰 문제는 메인 스레드에서 읽은 이미지 데이터 원본에 대한 동일한 크기의 데이터를 만들어 웹워커에 전달하고 있다. 이 부분에 대한 개선은 공유 메모리로 해결이 가능하다. 단, 공유 메모리를 사용하기 위해서는 서버 측 보안 수준이 가장 높은 상태여야 한다. 끝으로 최종 결과는 아래와 같다.