SharedArrayBuffer

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를 이용해 데이터 경쟁이 발생하지 않도록 하는 것이 바람직하다.