웹 워커란?

웹 워커(Web Worker)는 브라우저에서 자바스크립트 코드를 메인 스레드와 별도의 백그라운드 스레드에서 실행하도록 해주는 기능입니다.

이를 통해 복잡한 계산이나 무거운 데이터 처리를 메인 스레드와 분리하여 수행할 수 있으므로, 사용자 인터페이스(UI)가 멈추거나 느려지는 문제를 예방할 수 있습니다.

주요 특징

• 비동기 실행: 워커는 메인 스레드와 별도로 동작해, UI 렌더링에 영향을 주지 않습니다.
• 메시지 기반 통신: 워커와 메인 스레드는 postMessage와 onmessage를 통해 데이터를 주고받으며, 메모리를 공유하지 않습니다.
• 제한된 기능: 워커 내에서는 DOM에 접근할 수 없으며, 기본적으로 모듈 시스템을 지원하지 않습니다.
• 일반적으로 웹워커에서는 import, export를 사용할 수 없습니다.

네트워크 탭 및 실행 순서 관련 정보

• 네트워크 탭 관찰:

  • 워커 파일 요청:
    • Vite를 사용하면 워커 파일(simpleWorker.worker.js)이 별도의 청크(chunk)로 번들되어 요청됩니다.
    • 네트워크 탭에서 해당 워커 파일이 별도의 파일로 로드되는 것을 확인할 수 있습니다.
  • 파일 로딩:
    • 워커 파일이 로드되면, 브라우저는 해당 파일의 응답을 캐시하거나 별도로 관리합니다.
    • 로딩 완료 후, 워커 인스턴스가 생성되고 실행을 시작합니다.

• 실행 순서:

  1. 메인 스레드 초기화:
     • React 컴포넌트가 렌더링되고, 워커 인스턴스가 생성됩니다.
  2. 워커 파일 로드:
     • 브라우저가 네트워크 탭을 통해 워커 파일을 요청하고, 로드합니다.
  3. 워커 실행 시작:
     • 로드된 워커 스크립트가 별도의 스레드에서 실행되며, self.onmessage 핸들러가 설정됩니다.
  4. 메시지 전송:
     • 메인 스레드에서 worker.postMessage()를 통해 데이터를 워커로 전송합니다.
  5. 워커 처리 및 응답:
     • 워커가 데이터를 처리하고 결과를 self.postMessage()로 메인 스레드에 전달합니다.
  6. 메인 스레드 응답 처리:
     • 메인 스레드의 worker.onmessage 이벤트 핸들러가 호출되어, 결과 데이터를 수신 및 처리합니다.
  7. 워커 종료:
     • 작업이 완료되면, 메인 스레드에서 worker.terminate()를 호출하여 워커를 종료합니다.

간단한 웹 워커 예제

아래 예제는 메인 스레드로부터 숫자를 전달받아 제곱한 값을 계산한 후 결과를 반환하는 단순한 웹 워커와, 이를 React와 Vite 환경에서 사용하는 방법을 보여줍니다.

// App.jsx
import React, { useEffect, useState } from "react";

// Vite에서는 워커 파일을 불러올 때 "?worker"를 사용합니다. < 이렇게 해야만 합니다.
import SimpleWorker from "./simpleWorker.worker.js?worker";

function App() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new SimpleWorker();
    worker.onmessage = (event) => {
      setResult(event.data); // 워커가 계산한 결과(예: 16)를 상태에 저장
      worker.terminate(); // 작업 완료 후 워커 종료
    };

    // 메인 스레드에서 숫자 4를 워커로 전송하면, 4의 제곱인 16을 받게 됩니다.
    worker.postMessage(4);

    return () => worker.terminate();
  }, []);

  return (
    <div style={{ padding: "20px" }}>
      <h1>웹 워커 예제</h1>
      <p>입력값 4의 제곱 결과: {result !== null ? result : "계산 중..."}</p>
    </div>
  );
}

export default App;

// simpleWorker.worker.js
// 이 워커는 메인 스레드에서 전달받은 숫자의 제곱값을 계산해 반환합니다.
// 예) 입력: 4  -> 계산: 4 * 4 = 16  -> 출력: 16

self.onmessage = function (event) {
  const number = event.data; // 메인 스레드에서 전달된 숫자 (예: 4)
  const result = number * number; // 제곱 계산: 4 * 4 = 16
  self.postMessage(result); // 계산 결과(16)를 메인 스레드로 전송
};

결론

웹 워커는 복잡한 연산이나 무거운 데이터 처리를 메인 스레드와 분리하여 실행함으로써,

애플리케이션의 성능과 사용자 경험을 향상시키는 중요한 도구입니다.

React와 Vite 환경에서는 Vite의 ?worker 구문을 통해 간편하게 웹 워커를 사용할 수 있으며,

위 예제처럼 단순한 계산 작업을 백그라운드에서 실행하는 방식으로 쉽게 도입할 수 있습니다.