JavaScript - Worker API: 병렬 처리의 힘을解放하다

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 Web Workers의 세상으로 흥미로운 여정을 떠납니다. 바쁜 주방에서 요리사로서, 가끔 복잡한 요리를 준비하는 데 추가적인 손을 필요로 할 때가 있습니다. 그게 바로 Web Workers가 귀하의 JavaScript 코드에 제공하는 것입니다 - 주요 요리... 즉, 코딩 과정을 늦추지 않고 중요한 작업을 처리하는 데 도움을 줍니다!

JavaScript - Worker API

Web Worker API: JavaScript의 제2 주방장

Web Worker API는 JavaScript 주방에서 보조 주방장을 두는 것과 같습니다. 다른 스크립트와 독립적으로 배경에서 스크립트를 실행할 수 있게 해줍니다. 이는 주요 페이지의 성능을 방해하지 않고 시간이 오래 걸리는 작업을 수행할 수 있음을 의미합니다. 멋지지 않나요?

이제 이 도우미들을 어떻게 활용할 수 있는지 알아보겠습니다!

Web Worker 지원 여부 확인

Web Workers를 사용하기 전에 브라우저가 그것을 지원하는지 확인해야 합니다. 주방에 필요한 장비가 있는지 확인하는 것과 같습니다. 다음과 같이 확인할 수 있습니다:

if (typeof(Worker) !== "undefined") {
// 멋있다! Web Workers가 지원된다
console.log("Let's get to work!");
} else {
// 아이고! Web Workers가 지원되지 않는다
console.log("Sorry, your browser doesn't support Web Workers");
}

이 코드 스니펫에서 우리는 Worker 객체가 정의되어 있는지 확인하고 있습니다. 그렇다면 문제 없이 진행할 수 있습니다. 그렇지 않다면, 작업을 처리하는 다른 방법을 찾아야 합니다.

Web Worker 파일 생성

이제 우리 브라우저가 Web Workers를 처리할 수 있다는 것을 알았으므로, 하나 만들어 보겠습니다! Web Worker는 보조 주방장이 따라야 할 레시피와 같습니다. 우리는 별도의 JavaScript 파일을 만들어 Web Worker로 사용할 것입니다.

worker.js라는 파일을 만들어 보겠습니다:

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

이 워커는 메시지를 기다리며, 받은 숫자를 두배로 만들고 결과를 돌려줍니다. 간단하지 않나요?

Web Worker 객체 생성

이제 우리 워커 파일이 준비되었으므로, 주요 스크립트에서 Web Worker 객체를 생성해 보겠습니다:

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Web Workers are not supported in your browser!");
}

이 코드는 새로운 Web Worker 객체를 생성하고, worker.js 파일을 가리킵니다. 보조 주방장을 고용하고 레시피를 건네주는 것과 같습니다.

Web Worker와 소통하기

이제 워커에게 작업을 보내고 결과를 돌려받는 방법을 보겠습니다:

// 데이터를 워커에게 보내기
myWorker.postMessage(10);

// 워커로부터 데이터를 받기
myWorker.onmessage = function(e) {
console.log("The worker sent back: " + e.data);
};

이 예제에서 우리는 숫자 10을 워커에게 보내고, 워커는 그것을 두배로 만들어 20을 돌려줍니다. 보조 주방장에게 레시피의 재료를 두배로 해달라고 요청하는 것과 같습니다!

Web Worker의 실행 종료

워커를 사용이 끝났을 때, 자원을 해제하기 위해 워커를 종료해야 합니다. 보조 주방장이 요리를 마치고 집으로 돌아가는 것과 같습니다:

myWorker.terminate();
myWorker = undefined;

이 코드는 워커를 종료하고 myWorker 변수를 undefined로 설정하여, 우리가 그것에 대한 참조를 제거합니다.

Web Worker 예제: 완전한 프로그램

이제 모든 것을 합쳐 완전한 예제를 보여드리겠습니다:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

그리고 우리의 worker.js:

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

이 예제는 매 반초마다 숫자를 증가시키는 워커를 만들며, 주요 페이지는 이 워커를 시작하고 중지할 수 있습니다. 보조 주방장을 제어하는 주방장의 역할을 보여줍니다.

Web Worker 사용 사례

Web Workers는 오래 걸리는 작업을 수행하는 데 매우 유용합니다. 다음은 일반적인 사용 사례입니다:

복잡한 계산
대규모 데이터 처리
이미지나 비디오 처리
네트워크 연산
큰 데이터셋(예: CSV 파일) 파싱

이러한 것들은 보조 주방장이 주요 요리 과정을 방해하지 않고 처리할 수 있는 복잡한 레시피와 같습니다!

Web Workers와 DOM

기억해야 할 중요한 점: Web Workers는 DOM(문서 객체 모델)에 직접 접근할 수 없습니다. 보조 주방장이 직접 손님에게 요리를 서빙할 수 없고, 먼저 주방장에게 전달해야 하는 것과 같습니다.

워커가 웹 페이지와 상호작용해야 하면, 워커는 메시지를 주요 스크립트에 보내고, 주요 스크립트가 DOM을 업데이트해야 합니다.

결론

Web Workers는 JavaScript 도구箱에서 강력한 도구입니다. 주요 스크립트를 늦추지 않고 복잡한 작업을 수행할 수 있게 해줍니다. 보조 주방장이 복잡한 요리를 더 효율적으로 준비하는 것과 같습니다.

Web Workers를 효과적으로 사용하려면, 주요 스크립트와 독립적으로 수행할 수 있는 작업을 식별하는 것이 중요합니다. 연습을 통해, 여러분은 효율적인 Web Workers의 팀을 이끌고 복잡한 작업을 쉽게 처리할 수 있을 것입니다.

행복한 코딩을 기원합니다. 여러분의 JavaScript 주방이 항상 효율적인 Web Workers로 가득 차 있기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:

JavaScript - 폼 API

다음 튜토리얼:

JavaScript - Fetch API