웹 워커: 현재 메인(창) 스레드가 아닌 다른 스레드에서 백그라운드로 스크립트를 실행하는 방법입니다.

1. 웹 작업자와 event_loop를 사용한 비동기식
2. 웹 워커 소개
3. 웹 작업자를 만드는 방법
4. 예를 들어 웹 작업자의 경우
5. 웹 작업자의 제한
6. 웹 워커의 비동기 작업

1. 웹 워커와 이벤트 루프를 사용한 비동기 작업

JavaScript는 일반적으로 작업을 해당 대기열(매크로 작업 대기열, 마이크로 작업 대기열)에 배치하여 비동기 작업을 처리합니다. 이벤트 루프는 이러한 대기열을 지속적으로 확인하고 작업이 실행될 준비가 되면 호출 스택에 작업을 푸시합니다. 이 접근 방식은 비차단 실행을 보장하지만 여전히 단일 스레드에서 모든 것을 실행합니다.

웹 워커는 반면에 자체 호출 스택, 비동기 대기열 및 이벤트 루프가 있는 완전히 별도의 스레드에서 스크립트를 실행할 수 있도록 해줍니다. 이러한 분리는 작업자가 독립적으로 작동하므로 과도한 계산이나 장기 실행 작업으로 인해 메인 스레드가 차단되는 것을 방지합니다.

2. 웹 워커 소개

웹 작업자는 기본 창 컨텍스트와 다른 컨텍스트에서 스크립트를 실행하여 웹 애플리케이션의 병렬 처리를 가능하게 합니다. 웹 작업자 API는 다음과 같은 여러 유형의 작업자를 제공합니다.

• 전용 작업자: 단일 스크립트로 활용되며 메인 스레드에서 작업을 오프로드하는 데 이상적입니다.
• 공유 작업자: 서로 다른 컨텍스트(예: 서로 다른 창 또는 iframe)에서 실행되는 여러 스크립트에서 액세스할 수 있습니다.
• 서비스 워커: 웹 애플리케이션, 브라우저 및 네트워크 간의 프록시 서버로 작동하여 오프라인 지원 및 캐싱과 같은 기능을 제공합니다.

이 글은 가장 구현하기 쉽고 일반적으로 사용되는 전담 작업자에 중점을 둡니다.

3. 웹 작업자를 만드는 방법

웹 작업자를 생성하려면 다음 주요 방법을 사용할 수 있습니다.

• new Worker(): 새 워커를 생성하기 위한 생성자입니다.
• postMessage(): 메인 스레드에서 워커로 또는 그 반대로 메시지를 보냅니다.
• onmessage: 작업자가 받은 메시지를 처리하도록 설정된 콜백 함수입니다.
• terminate(): 작업자를 즉시 ​​중지합니다.

4. 간단한 예

API에서 데이터, 특히 Dog CEO API에서 개 이미지를 가져오는 작업자를 만들어 보겠습니다.

4.1 작업자 코드

작업자 스크립트의 구현은 다음과 같습니다. 작업자 내부에서 self는 전역 컨텍스트를 참조하는 데 사용됩니다.

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

이 코드에서 작업자는 메시지(onmessage)를 수신하고 지정된 URL에서 개수에 따라 여러 번 데이터를 가져옵니다.

작업자 내부의 호출 스택은 다음과 같습니다.

4.2 클라이언트 코드

메인 스레드는 다음과 같이 작업자를 사용합니다.

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

이 코드는 작업자에게 메시지를 보내고 메인 스레드에서 가져온 데이터를 받는 방법을 보여줍니다.

전체 코드를 보려면 코드로 이동하세요.

5. 웹 작업자의 한계

웹 작업자는 기본 창 스레드와 별도의 스레드에서 실행되지만 다음과 같은 제한 사항이 있습니다.

• DOM에 대한 액세스 불가: 작업자는 DOM을 직접 조작할 수 없습니다. UI를 업데이트하려면 메인 스레드와의 통신이 필요합니다.
• 리소스 소비: 웹 작업자를 과도하게 사용하면 각 작업자가 독립적으로 작동하기 위해 추가 리소스가 필요하므로 메모리 사용량이 높아질 수 있습니다.