▶ JavaScript Web APIs

JavaScript Web Worker API

JavaScript Web Worker API: 멀티스레딩을 통한 비동기 처리

JavaScript Web Worker API는 웹 애플리케이션에서 멀티스레딩을 구현하여 복잡한 계산이나 데이터 처리를 메인 스레드와 분리된 백그라운드 스레드에서 수행할 수 있게 해줍니다. 이를 통해 사용자 인터페이스(UI)의 반응성을 높이고, 리소스 집약적인 작업을 비동기적으로 실행할 수 있습니다. 이 가이드는 Web Worker API의 개념, 사용법, 주요 특징 및 예제에 대해 설명합니다.

1. Web Worker란?

Web Worker는 JavaScript를 실행하는 별도의 스레드입니다. 주 스레드(메인 스레드)와는 독립적으로 작동하며, 복잡한 작업을 수행하는 동안 UI를 차단하지 않고 사용자 경험을 향상시킵니다.

1.1. 주요 특징

비동기 처리: Web Worker는 비동기적으로 작업을 수행하므로 메인 스레드의 작업과 병행할 수 있습니다.
메시지 기반 통신: Web Worker는 메인 스레드와 메시지를 통해 데이터를 주고받습니다.
스레드 안전성: Worker에서 전역 객체를 공유하지 않으므로 스레드 안전한 환경을 제공합니다.

2. Web Worker API 사용하기

Web Worker를 사용하기 위해서는 별도의 JavaScript 파일을 생성하고, 이 파일을 Worker로 생성하여 사용해야 합니다.

2.1. Worker 생성

2.1.1. Worker 파일 생성

먼저, worker.js라는 별도의 파일을 생성하여 Worker가 수행할 작업을 정의합니다.

// worker.js
self.addEventListener('message', (event) => {
    const data = event.data;
    const result = data * 2;  // 받은 데이터를 두 배로 만들기
    self.postMessage(result);  // 결과를 메인 스레드에 전송
});

2.1.2. 메인 스크립트에서 Worker 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Worker Example</title>
</head>
<body>
    <h1>Web Worker Example</h1>
    <input type="number" id="numberInput" placeholder="Enter a number">
    <button id="startWorker">Start Worker</button>
    <p id="result"></p>

    <script>
        const resultElement = document.getElementById('result');
        const worker = new Worker('worker.js');  // Worker 생성

        // Worker에서 메시지를 받을 때 실행
        worker.addEventListener('message', (event) => {
            resultElement.textContent = 'Result: ' + event.data;  // 결과 출력
        });

        document.getElementById('startWorker').addEventListener('click', () => {
            const number = document.getElementById('numberInput').value;
            worker.postMessage(number);  // Worker에 데이터 전송
        });
    </script>
</body>
</html>

이 코드는 사용자가 입력한 숫자를 Worker에게 전송하고, Worker에서 계산한 결과를 메인 스레드에 표시합니다.

3. Worker의 라이프사이클

Web Worker는 다음과 같은 라이프사이클을 가집니다:

생성: new Worker()를 사용하여 Worker 인스턴스를 생성합니다.
메시지 전송: postMessage() 메서드를 사용하여 Worker에 데이터를 전송합니다.
작업 수행: Worker는 메시지를 수신하고, 해당 작업을 수행한 후 결과를 다시 전송합니다.
종료: 작업이 완료되면 terminate() 메서드를 사용하여 Worker를 종료할 수 있습니다.

3.1. Worker 종료

worker.terminate();  // Worker 종료

terminate() 메서드는 Worker를 즉시 종료합니다.

4. Worker의 제한사항

4.1. 스레드 간의 통신

Worker는 메인 스레드와 메시지 기반으로 통신합니다. 객체를 직접 공유할 수 없으며, 복잡한 데이터 구조는 직렬화(serialize)하여 전송해야 합니다.

4.2. DOM 접근 불가

Web Worker는 DOM에 접근할 수 없습니다. 따라서 UI 변경 작업은 메인 스레드에서 수행해야 하며, Worker에서는 계산이나 데이터 처리를 전담합니다.

4.3. 스크립트 경로 제한

Worker 스크립트는 동일 출처 정책을 따라야 하므로, 다른 도메인에서 Worker 스크립트를 로드할 수 없습니다.

5. Web Worker의 활용 예시

Web Worker는 다양한 분야에서 활용될 수 있습니다. 예를 들어, 대량의 데이터 처리, 이미지 또는 비디오 처리, 실시간 데이터 수집 등에서 효과적으로 사용될 수 있습니다.

5.1. 예시: 대량 데이터 처리

// worker.js
self.addEventListener('message', (event) => {
    const data = event.data;
    const results = data.map(num => num * 2);  // 모든 숫자를 두 배로 만들기
    self.postMessage(results);  // 결과를 메인 스레드에 전송
});

이 코드는 배열의 모든 요소를 두 배로 만드는 작업을 Worker에서 수행하는 예시입니다.

5.2. 예시: 이미지 처리

이미지 필터를 적용하거나 변환 작업을 Web Worker에서 수행하여 UI가 멈추지 않도록 할 수 있습니다.

요약

JavaScript Web Worker API는 웹 애플리케이션에서 멀티스레딩을 통해 복잡한 작업을 비동기적으로 처리할 수 있게 해줍니다. 이를 통해 사용자 인터페이스의 반응성을 높이고, 성능을 개선할 수 있습니다.

주요 메서드: new Worker(), postMessage(), addEventListener(), terminate().
작업 처리: Worker에서 CPU 집약적인 작업을 수행하여 UI 스레드와 분리합니다.
제한사항: DOM 접근 불가, 메시지 기반 통신, 동일 출처 정책 준수.

JavaScript의 Web Worker API를 활용하여 더 나은 사용자 경험과 성능 향상을 이루어낼 수 있습니다.

코딩 스쿨 JavaScript