Web Worker는 웹 브라우저에서 제공하는 기능 중 하나로, 메인 스레드와는 별개의 백그라운드 스레드에서 스크립트를 실행할 수 있게 해주는 API입니다. 이를 통해 복잡하고 시간이 많이 소요되는 작업을 메인 스레드와 독립적으로 처리할 수 있으며, 이는 웹 애플리케이션의 응답성과 성능을 향상시킬 수 있습니다.
주요 특징
멀티 스레딩 지원: JavaScript는 전통적으로 싱글 스레드로 작동합니다. Web Worker를 사용하면 별도의 스레드에서 스크립트를 실행할 수 있으며, 이는 복잡한 계산이나 대량의 데이터 처리 작업을 백그라운드에서 수행할 수 있게 해줍니다.
메인 스레드의 비동기 처리 가능: Web Worker를 사용하면 메인 스레드가 UI 업데이트나 사용자 인터랙션 처리에 집중할 수 있습니다. 이는 애플리케이션의 전반적인 반응성을 개선할 수 있습니다.
메시지 기반 통신: 메인 스레드와 Web Worker 사이의 데이터 교환은 postMessage 메서드를 통해 이루어집니다. 이 메시지 기반의 통신은 복사를 통해 이루어지므로, 데이터를 공유하진 않지만 메시지를 통해 데이터를 주고받을 수 있습니다.
제한된 자원 접근: 보안 및 성능 이유로, Web Worker는 DOM에 직접 접근할 수 없습니다. 또한 일부 Web API에 대한 접근이 제한될 수 있으나, XMLHttpRequest와 같은 네트워킹 기능, IndexedDB와 같은 데이터베이스 접근은 가능합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Worker ES6 Example</title>
</head>
<body>
<script>
if (window.Worker) {
const myWorker = new Worker('worker.js');
myWorker.postMessage(10); // 워커에 데이터 전송
myWorker.onmessage = (e) => {
console.log('Received from worker:', e.data);
};
myWorker.onerror = (error) => {
console.error('Worker error:', error);
};
} else {
console.log("Your browser doesn't support web workers.");
}
</script>
</body>
</html>// worker.js에서 사용할 스크립트
self.addEventListener('message', (e) => {
const data = e.data;
const result = processData(data);
self.postMessage(result);
});- 메인 스크립트는 Worker 생성자를 사용하여 worker.js 파일로부터 새로운 Worker를 생성합니다.
- postMessage 메소드를 사용하여 Worker에 데이터를 보내고, onmessage 핸들러를 통해 Worker로부터 결과를 받습니다.
- onerror 핸들러를 설정하여 Worker 실행 중 발생할 수 있는 에러를 처리합니다.
- window.Worker를 검사하여 현재 브라우저가 Web Worker를 지원하는지 확인합니다.
'Programming > JavaScript' 카테고리의 다른 글
| 디바운스와 스로틀 (0) | 2024.04.11 |
|---|---|
| 객체에서의 in 연산자 사용 시 주의사항 (0) | 2024.02.29 |
| JS 비동기 프로그래밍 (0) | 2023.11.13 |
| 자바스크립트 컴파일러 에러와 런타임 에러 이해하기 (0) | 2023.11.11 |