---
title: Web Workers API
slug: Web/API/Web_Workers_API
tags:
  - API
  - Overview
  - Reference
  - Web Workers
  - 워커
  - 웹 워커
translation_of: Web/API/Web_Workers_API
---
<div>{{DefaultAPISidebar("Web Workers API")}}</div>

<p><strong>웹 워커</strong>(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다.</p>

<h2 id="웹_워커의_개념과_활용법">웹 워커의 개념과 활용법</h2>

<p>워커는 이름을 지정한 JavaScript 파일을 구동하는 객체로서 {{domxref("Worker.Worker", "Worker()")}} 등의 생성자로 생성합니다. 해당 파일은 현재 {{domxref("window")}}와는 다른 전역 맥락에서 동작하는 워커 스레드에서 작동합니다. 이 때, 전역 맥락은 전용 워커(단일 스크립트에서만 사용하는 워커)의 경우 {{domxref("DedicatedWorkerGlobalScope")}} 객체이고, 공유 워커(여러 스크립트에서 공유하는 워커)의 경우 {{domxref("SharedWorkerGlobalScope")}} 객체입니다.</p>

<p>원하는 코드는 뭐든 워커 스레드에서 실행할 수 있으나 몇 가지 예외가 존재합니다. 예를 들어 워커에서 DOM을 직접 조작할 수 없고, {{domxref("window")}}의 일부 메서드와 속성은 사용할 수 없습니다. 그러나 <a href="/ko/docs/Web/API/WebSockets_API">WebSocket</a>과 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>를 포함한 많은 수의 항목은 사용 가능합니다. <a class="new" href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a>에서 더 자세히 알아보세요.</p>

<p>워커와 메인 스레드 간의 데이터 교환은 메시지 시스템을 사용합니다. 양측 모두 postMessage() 메서드를 사용해 전송하고, <code>onmessage</code> 이벤트 처리기(메시지는 {{Event("Message")}}의 <code>data</code> 속성에 들어있습니다)를 사용해 수신합니다. 전송하는 데이터는 복사하며 공유하지 않습니다.</p>

<p>워커 역시 새로운 워커를 생성할 수 있습니다. 단, 생성하려는 워커가 부모 페이지와 동일한 {{glossary("origin", "출처")}}에 호스팅 되어있어야 합니다. 추가로, 워커는 {{domxref("XMLHttpRequest")}}를 사용해 네트워크 입출력을 할 수 있지만 <code>responseXML</code>과 <code>channel</code> 특성은 항상 {{jsxref("null")}}을 반환합니다.</p>

<p>전용 워커 외에도 다음과 같은 다른 유형의 워커도 존재합니다.</p>

<ul>
 <li>공유 워커는 워커와 도메인이 같다면 창, IFrame, 등등 여러 곳에서 작동 중인 다수의 스크립트에서 사용 가능한 워커입니다. 전용 워커보다 복잡한 편으로, 스크립트간 통신은 활성 포트를 통해 이뤄져야 합니다. {{domxref("SharedWorker")}} 문서에서 더 자세히 알아보세요.</li>
 <li>서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.</li>
 <li>오디오 워커는 웹 워커 맥락 내에서 스크립트를 통한 직접적인 오디오 처리 능력을 제공합니다.</li>
</ul>

<h2 id="웹_워커_인터페이스">웹 워커 인터페이스</h2>

<dl>
 <dt>{{domxref("AbstractWorker")}}</dt>
 <dd>모든 종류의 워커({{domxref("Worker")}}, {{domxref("SharedWorker")}} 등)에 공통적인 속성과 메서드를 추상화합니다.</dd>
 <dt>{{domxref("Worker")}}</dt>
 <dd>실행 중인 워커 스레드를 나타냅니다. 현재 작동 중인 워커로 메시지를 전송할 때 사용할 수 있습니다.</dd>
 <dt>{{domxref("WorkerLocation")}}</dt>
 <dd>{{domxref("Worker")}}가 실행하는 스크립트의 절대 위치를 정의합니다.</dd>
 <dt>{{domxref("SharedWorker")}}</dt>
 <dd>다수의 창, {{htmlelement("iframe")}}, 혹은 다른 워커 등 {{glossary("Browsing context", "브라우징 맥락")}} 여러 개에서 접근할 수 있는 특정 종류의 워커를 나타냅니다.</dd>
 <dt>{{domxref("WorkerGlobalScope")}}</dt>
 <dd>모든 워커의 통용 범위를 나타냅니다. 통용 범위는 일반적인 웹 콘텐츠의 {{domxref("Window")}}와 같은 역할을 합니다. 각각의 워커 유형별로 이 인터페이스를 상속한 후 보다 세부적인 기능을 추가한 인터페이스를 전역 범위 객체로 사용합니다.</dd>
 <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
 <dd>{{domxref("WorkerGlobalScope")}}를 상속해서 몇 가지 전용 기능을 추가한 전용 워커의 범위를 나타냅니다.</dd>
 <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
 <dd>{{domxref("WorkerGlobalScope")}}를 상속해서 몇 가지 전용 기능을 추가한 공유 워커의 범위를 나타냅니다.</dd>
 <dt>{{domxref("WorkerNavigator")}}</dt>
 <dd>사용자 에이전트(클라이언트)의 신분과 상태를 나타냅니다.</dd>
</dl>

<h2 id="예제">예제</h2>

<p>워커의 기본 사용법을 보이는 간단한 데모를 준비해놨습니다.</p>

<ul>
 <li><a href="https://github.com/mdn/simple-web-worker">기본적인 전용 워커 예제</a> (<a href="http://mdn.github.io/simple-web-worker/">실행</a>)</li>
 <li><a href="https://github.com/mdn/simple-shared-worker">기본적인 공유 워커 예제</a> (<a href="http://mdn.github.io/simple-shared-worker/">실행</a>)</li>
</ul>

<p><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">웹 워커 사용하기</a>에서 데모의 동작법을 자세히 알아볼 수 있습니다.</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">웹 워커 사용하기</a></li>
 <li><a href="/ko/docs/Web/API/Worker"><code>Worker</code> 인터페이스</a></li>
 <li><a href="/ko/docs/Web/API/SharedWorker"><code>SharedWorker</code> 인터페이스</a></li>
 <li><a href="/ko/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
 <li><a class="new" href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a></li>
</ul>