🎧

비동기로 멀티 스레드를 구현한다? 많이들 async/await만 쓰면 작업이 “동시에” 돈다고 생각합니다. 하지만 비동기는 하나의 메인 스레드가 일을 잘게 쪼개 순서 없이 처리해 보이는 기법이지, 실제로 여러 스레드가 병렬로 계산하는 건 아닙니다.

UI가 멈추지 않게 하는 데는 비동기로도 충분하지만, 대용량 데이터 처리나 이미지/영상 변환처럼 CPU를 잡아먹는 작업은 결국 메인 스레드를 묶어버립니다.

1. 멀티 스레드가 필요한 이유

자바스크립트는 기본적으로 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 복잡한 계산, 대규모 데이터 처리, 이미지 변환 같은 작업은 시간이 오래 걸려 UI가 멈출 수도 있습니다. 이런 문제를 해결하기 위해 멀티 스레드 개념을 활용할 수 있는데요.

2. Web Worker로 동시성 구현

Web Worker는 별도의 스레드에서 자바스크립트를 실행할 수 있게 해주는 기능입니다. 메인 스레드(UI)와 독립적으로 동작하므로 무거운 연산을 맡기기 좋습니다.

// worker.js (별도의 파일)
self.onmessage = function(event) {
  let num = event.data;
  let result = 0;
  for (let i = 0; i < num; i++) {
    result += i;
  }
  self.postMessage(result);
};

// main.js
const worker = new Worker("worker.js");
worker.postMessage(1000000); // Worker에게 작업 요청

worker.onmessage = (e) => {
  console.log("결과:", e.data);
};

Web Worker를 사용하면 UI 멈춤 없이 무거운 계산을 처리할 수 있습니다.

3. WebAssembly를 활용한 멀티 스레드

WebAssembly(WASM)는 브라우저에서 동작하는 저수준 이진 코드 포맷입니다. 성능이 중요한 연산을 자바스크립트 대신 C/C++/Rust 같은 언어로 작성한 뒤, WebAssembly로 컴파일해서 실행할 수 있습니다.

// 예시: C 코드 (sum.c)
int sum(int n) {
  int result = 0;
  for (int i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

이 코드를 emscripten 같은 도구로 WebAssembly로 컴파일하면 자바스크립트에서 고성능으로 실행할 수 있습니다.

4. Web Worker vs WebAssembly 비교

웹 환경에서도 멀티 스레드를 활용할 수 있는 방법은 다양합니다. 간단한 동시성 처리는 Web Worker, 고성능 연산은 WebAssembly를 선택하는 것이 좋습니다. 프로젝트 성격에 맞춰 두 기술을 적절히 조합하면 사용자 경험을 크게 개선할 수 있습니다.