웹 워커
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
웹 워커는 웹 페이지에서 백그라운드 스크립트를 실행하여 사용자 인터페이스를 방해하지 않고 계산 집약적인 작업을 처리할 수 있게 해주는 기술이다. 웹 워커는 메시지 전달을 통해 메인 문서와 상호 작용하며, `Worker()` 생성자를 통해 생성된다. 웹 워커는 DOM 조작과 같은 UI 조작은 할 수 없지만, 타이머나 비동기 통신 등의 기능을 사용할 수 있다. 현재 크롬, 오페라, 엣지, 인터넷 익스플로러 10 이상, 파이어폭스, 사파리 등 주요 웹 브라우저에서 지원된다.
더 읽어볼만한 페이지
- 웹 표준 - 웹 컴포넌트
웹 컴포넌트는 재사용 가능한 웹 UI 요소를 만들기 위한 웹 표준 기술로, 커스텀 요소, 섀도 DOM, HTML 템플릿을 핵심 요소로 하며, 스타일과 동작을 캡슐화하고 다양한 프레임워크와의 상호 운용성을 제공하며 웹 접근성 향상에 기여한다. - 웹 표준 - HTML5 오디오
HTML5 오디오는 웹 페이지에서 소리 재생을 위해 사용되는 audio 요소 기술로, 다양한 속성, 오디오 코딩 형식 지원, Web Audio API를 통한 오디오 처리, Web Speech API를 통한 음성 입력 기능 등을 제공하며 브라우저별 지원 코덱 현황에 차이가 있다. - 웹 프로그래밍 - 자바스크립트
자바스크립트는 웹 페이지에 동적인 기능을 추가하기 위해 개발된 프로그래밍 언어로, 초기에는 라이브스크립트라 불렸으나 자바의 인기에 힘입어 변경되었고, ECMAScript로 표준화되어 웹 브라우저와 Node.js 등 다양한 환경에서 활용되지만, 오라클의 상표권 소유로 논란이 있다. - 웹 프로그래밍 - 블레이저 (웹 프레임워크)
블레이저는 마이크로소프트가 개발한 웹 프레임워크로, .NET을 사용하여 웹 애플리케이션을 구축하며, C#과 Razor 구문을 사용해 컴포넌트를 만들고, 서버 측 및 클라이언트 측 렌더링을 모두 지원한다. - 웹 개발 - Ajax
Ajax는 웹 페이지 전체를 새로고침하지 않고 비동기적으로 서버와 통신하여 웹 애플리케이션의 일부를 업데이트하는 웹 개발 기술로, XMLHttpRequest 객체의 등장으로 가능해졌으며 HTML, CSS, DOM, JavaScript, JSON 등의 기술을 통합하여 동적인 사용자 인터페이스를 구현한다. - 웹 개발 - WebXR
WebXR은 웹 브라우저에서 가상 현실 및 증강 현실 콘텐츠를 구현하기 위한 API로, 다양한 장치 및 플랫폼에서 몰입형 웹 경험을 제공하며, 구글, 메타, 모질라 등 여러 기업과 단체가 개발에 참여하여 지속적인 업데이트를 통해 기능 향상을 목표로 한다.
| 웹 워커 | |
|---|---|
| 일반 정보 | |
 | |
| 종류 | 소프트웨어 |
| 개발 시기 | 2009년 4월 3일 |
| 표준 상태 | Living Standard (살아있는 표준) |
| 표준 제정 기관 | W3C 웹 하이퍼텍스트 애플리케이션 기술 워킹 그룹 |
| 편집자 | 이안 힉슨 |
| 도메인 | 멀티스레드 프로그래밍 다중 처리 |
| 웹사이트 | W3C 웹 워커 (구 표준) WHATWG 웹 워커 (최신 표준) |
2. 특징
WHATWG가 구상한 웹 워커는 비교적 무겁고 대량으로 사용하기에는 적합하지 않다. 웹 워커는 수명이 길고 시작 성능 비용이 높으며, 인스턴스당 메모리 비용도 높을 것으로 예상된다.[1]
웹 워커는 HTML 문서의 스크립트 컨텍스트 외부에서 실행된다. 이 때문에 DOM에는 직접 접근할 수 없지만, 동시성 실행을 용이하게 한다는 장점이 있다.
2. 1. DOM 접근 제한
워커 내에서는 DOM 조작 등 UI 조작은 할 수 없지만, 타이머나 비동기 통신 등의 기능은 사용할 수 있다. 또한, 이 기능의 사양은 HTML 안에 포함되어 있다.2. 2. 메시지 전달
웹 워커는 메시지 전달 방식을 통해 메인 문서와 상호 작용한다. 워커를 생성하려면 특정 자바스크립트 파일 경로를 인자로 전달하여 `Worker` 객체를 생성한다.```javascript
var worker = new Worker("worker_script.js");
```
생성된 워커 객체의 `postMessage` 메서드를 사용하여 워커에게 메시지를 전달할 수 있다.
```javascript
worker.postMessage("Hello World!");
```
워커로부터 메시지를 받으려면 `onmessage` 이벤트 핸들러를 사용한다. 이벤트 객체의 `data` 속성을 통해 전달된 데이터를 접근할 수 있다.
```javascript
worker.onmessage = function(event) {
alert("Received message " + event.data);
doSomething();
}
function doSomething() {
// 작업을 수행한다.
worker.postMessage("Work done!"); // 작업 완료 후 워커에게 메시지를 보낸다.
}
// 워커를 종료한다.
worker.terminate();
```
워커가 `terminate()` 메서드로 종료되면, 해당 워커를 참조하던 변수는 더 이상 유효하지 않게 된다. 필요하다면 새로운 워커를 다시 생성해야 한다.
워커 내부에서는 DOM 조작과 같은 사용자 인터페이스(UI) 관련 작업은 수행할 수 없다. 하지만 `setTimeout`, `setInterval`과 같은 타이머 기능이나 `XMLHttpRequest`, `fetch`와 같은 비동기 통신 기능은 사용할 수 있다. 웹 워커 관련 명세는 HTML 표준 안에 포함되어 있다.
웹 워커의 가장 기본적인 활용 사례는 사용자 인터페이스의 반응성을 유지하면서 계산량이 많은 작업을 백그라운드에서 처리하는 것이다.
아래는 메인 문서가 소수를 계산하는 웹 워커를 생성하고, 워커가 발견한 소수를 점진적으로 화면에 표시하는 예제이다.
메인 페이지 (HTML):
지금까지 발견된 가장 큰 소수:
메인 페이지에서는 `Worker()` 생성자를 호출하여 웹 워커를 생성하고, 반환된 `worker` 객체를 통해 워커와 통신한다. `worker` 객체의 `onmessage` 이벤트 핸들러를 설정하여 워커로부터 메시지를 수신할 준비를 한다.
웹 워커 (worker.js):
var n = 1;
var end_value = 10**7; // 10의 7제곱까지 소수를 찾는다.
search: while (n <= end_value) {
n++;
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
// n이 i로 나누어 떨어지면 소수가 아니므로 다음 숫자로 넘어간다.
continue search;
}
}
// 소수를 발견하면 postMessage를 사용하여 메인 페이지로 전송한다.
postMessage(n);
}
워커 스크립트에서는 소수를 찾는 계산을 수행한다. 소수를 발견할 때마다 `postMessage()` 메서드를 호출하여 결과(발견된 소수 `n`)를 메인 페이지로 다시 전송한다.[13]
2. 3. 비동기 통신 및 타이머
워커 내에서는 DOM 조작과 같은 사용자 인터페이스(UI) 조작은 할 수 없지만, 타이머 기능이나 비동기 통신 기능은 사용할 수 있다. 이러한 기능의 사양은 HTML 표준 안에 포함되어 있다.웹 워커의 가장 기본적인 활용 사례는 사용자 인터페이스의 응답성을 유지하면서 계산량이 많은 작업을 백그라운드에서 실행하는 것이다.
아래 예시는 메인 문서가 소수를 계산하는 웹 워커를 생성하고, 워커가 새로 발견한 소수를 메인 페이지로 보내 점진적으로 화면에 표시하는 과정을 보여준다.
메인 페이지 코드:
지금까지 발견된 가장 큰 소수:
위 코드에서 `Worker()` 생성자는 새로운 웹 워커 스레드를 시작하고, 해당 워커와 통신할 수 있는 `worker` 객체를 반환한다. 이 객체의 `onmessage` 이벤트 핸들러를 통해 워커가 보낸 메시지를 수신하고 처리할 수 있다.
웹 워커 스크립트 (`worker.js`):
var n = 1;
var end_value = 10**7; // 10의 7제곱까지 소수를 찾는다.
search: while (n <= end_value) {
n++;
// 2부터 n의 제곱근까지 나누어 떨어지는 수가 있는지 확인한다.
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
// 나누어 떨어지면 소수가 아니므로 다음 숫자로 넘어간다.
continue search;
}
}
// 나누어 떨어지는 수가 없으면 소수이므로 메인 페이지로 메시지를 보낸다.
postMessage(n);
}
워커 스크립트에서는 소수를 발견할 때마다 `postMessage()` 메서드를 사용하여 계산 결과(`n`)를 메인 페이지로 다시 전송한다. 이 과정을 통해 메인 스레드와 워커 스레드 간의 비동기 통신이 이루어진다.[13]
2. 4. 생성 및 종료
웹 워커는 메시지 전달을 통해 메인 문서와 상호 작용한다. 다음 코드는 주어진 파일에서 자바스크립트를 실행할 워커를 생성하는 예시이다.```javascript
var worker = new Worker("worker_script.js");
```
워커에게 메시지를 보내려면 워커 객체의 `'postMessage'` 메서드를 사용한다.
```javascript
worker.postMessage("Hello World!");
```
워커로부터 메시지를 받으려면 `'onmessage'` 속성에 이벤트 핸들러를 할당한다.
```javascript
worker.onmessage = function(event) {
alert("Received message " + event.data);
doSomething();
}
function doSomething() {
// 작업을 수행한다.
worker.postMessage("Work done!");
}
```
워커를 즉시 종료시키려면 `'terminate'` 메서드를 사용한다.
```javascript
worker.terminate();
```
워커가 종료되면 해당 워커 객체는 더 이상 유효하지 않으며, 참조하는 변수는 정의되지 않은 상태가 된다. 워커가 필요하다면 새로 생성해야 한다.
웹 워커의 기본적인 사용 사례는 사용자 인터페이스(UI)의 반응성을 해치지 않으면서 계산량이 많은 작업을 백그라운드에서 처리하는 것이다.
아래는 메인 문서가 소수를 계산하는 웹 워커를 생성하고, 워커가 발견한 소수를 메인 페이지에 점진적으로 표시하는 간단한 예제이다.
메인 페이지 (HTML):
지금까지 발견된 가장 큰 소수:
`'Worker()'` 생성자 호출은 웹 워커를 생성하고, 생성된 워커와 통신하는 데 사용되는 `'worker'` 객체를 반환한다. 이 객체의 `'onmessage'` 이벤트 핸들러를 통해 워커로부터 메시지를 수신할 수 있다.
웹 워커 스크립트 (worker.js):
var n = 1;
var end_value = 10**7; // 10,000,000까지 소수를 찾는다.
search: while (n <= end_value) {
n++;
// 2부터 n의 제곱근까지 나누어 본다.
for (var i = 2; i <= Math.sqrt(n); i++) {
// 나누어 떨어지면 소수가 아니므로 다음 숫자로 넘어간다.
if (n % i == 0) {
continue search;
}
}
// 나누어 떨어지지 않으면 소수이다!
// postMessage를 사용하여 메인 페이지로 소수를 전송한다.
postMessage(n);
}
워커 스크립트 내에서 소수를 발견하면 `'postMessage()'` 메서드를 사용하여 메인 페이지로 결과를 다시 전송한다[13].
3. 활용 예시
웹 워커의 가장 간단한 사용법은 사용자 인터페이스를 방해하지 않고 계산 집약적인 작업을 수행하는 것이다. 예를 들어, 복잡한 계산(소수 찾기 등)을 백그라운드에서 처리하여 사용자 인터페이스의 반응성을 유지할 수 있다.
3. 1. 소수 계산
웹 워커의 가장 간단한 사용법은 사용자 인터페이스를 중단하지 않고 계산 비용이 높은 작업을 실행하는 것이다.이 예에서는 메인 문서가 소수를 계산하는 웹 워커를 생성하고, 최근에 발견된 소수가 점진적으로 표시된다.
메인 페이지는 다음과 같다.
지금까지 발견된 가장 큰 소수:
Worker() 생성자 호출은 웹 워커를 생성하고, 웹 워커를 나타내는 worker 객체를 반환하며, 이 객체를 사용하여 웹 워커와 통신한다. 객체의 onmessage 이벤트 핸들러는 코드가 웹 워커로부터 메시지를 수신할 수 있도록 한다.웹 워커 본체는 다음과 같다.
var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
n++;
for (var i = 2; i <= Math.sqrt(n); i++)
if (n % i == 0)
continue search;
// 소수를 발견했다!
postMessage(n);
}
소수가 발견되었을 때,
postMessage() 메서드를 사용하여 메시지가 페이지로 다시 전송된다.[13]4. 브라우저 지원 현황
웹 브라우저가 웹 워커를 지원하는 경우, 전역 window 객체에서 Worker 속성을 사용할 수 있다.[3] 웹 브라우저가 웹 워커를 지원하지 않으면 Worker 속성은 정의되지 않는다.
다음은 브라우저에서 웹 워커 지원 여부를 확인하는 예제 코드이다.
```javascript
function browserSupportsWebWorkers() {
return typeof window.Worker === "function";
}
```
웹 워커는 현재 크롬(Google Chrome), 오페라(Opera), 엣지(Microsoft Edge), 인터넷 익스플로러(Internet Explorer) (버전 10), 모질라 파이어폭스(Firefox), 사파리(Safari)에서 지원된다.[4][5][6] iOS용 모바일 사파리는 iOS 5부터 웹 워커를 지원해 왔다. 안드로이드 브라우저는 Android 2.1에서 처음 웹 워커를 지원했지만, Android 2.2–4.3 버전에서는 지원이 제거되었다가 Android 4.4에서 다시 복원되었다.[7][8]
참조
[1]
간행물
Web Workers
https://html.spec.wh[...]
Web Hypertext Application Technology Working Group
2023-01-02
[2]
웹사이트
HTML Living Standard
https://html.spec.wh[...]
2017-01-30
[3]
서적
HTML5 Up and Running
O'Reilly/Google Press
2010-08
[4]
서적
Introducing HTML5
2011
[5]
서적
HTML5 and CSS3
The Pragmatic Programmers, LLC
2010
[6]
웹사이트
Can I Use... Web Worker
https://caniuse.com/[...]
2019-09-30
[7]
웹사이트
Spotlight: Benchmarking Android 2.1 with Web Workers - Isogenic Engine
https://web.archive.[...]
2011-07-10
[8]
웹사이트
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/#[...]
2017-06-10
[9]
간행물
Web Workers
http://www.whatwg.or[...]
Web Hypertext Application Technology Working Group
2010-06-03
[10]
웹사이트
HTML Living Standard
https://html.spec.wh[...]
2017-01-30
[11]
서적
Flanagan D. JavaScript 6th edition pp.747 - 754, 2012、古籏一浩 JavaScriptポケットリファレンス 5版 pp.390 - 396, 2011、JSさぽーたーず JavaScriptバイブル pp.366 - 368, 2012
[12]
간행물
Web Workers
http://www.whatwg.or[...]
Web Hypertext Application Technology Working Group
2010-06-03
[13]
간행물
Web Workers
http://www.whatwg.or[...]
Web Hypertext Application Technology Working Group
2010-06-03
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com