diff options
Diffstat (limited to 'files/ko/web/api/worker/index.html')
-rw-r--r-- | files/ko/web/api/worker/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/ko/web/api/worker/index.html b/files/ko/web/api/worker/index.html new file mode 100644 index 0000000000..7eb924f469 --- /dev/null +++ b/files/ko/web/api/worker/index.html @@ -0,0 +1,129 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM + - Interface + - JavaScript + - Reference + - Web Workers + - Worker + - 워커 + - 웹 워커 +translation_of: Web/API/Worker +--- +<div>{{APIRef("Web Workers API")}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/API/Web_Workers_API">Web Workers API</a>의<strong> <code>Worker</code></strong> 인터페이스는 스크립트로 생성하고, 생성자와 메시지로 통신하는 백그라운드 작업을 나타냅니다.</span> 워커의 생성은 <code>Worker("path/to/worker/script")</code> 생성자를 통해 할 수 있습니다.</p> + +<p>워커는 부모 페이지와 같은 {{glossary("origin", "출처")}}에 호스팅 된 다른 워커를 생성할 수 있습니다. (참고: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">WebKit은 아직 중첩 워커를 구현하지 않았습니다.</a>)</p> + +<p><a href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers"><code>Worker</code> 내에서 사용할 수 있는 인터페이스와 함수</a>는 제한돼있습니다. 워커는 {{domxref("XMLHttpRequest")}}를 사용해 네트워크 통신을 할 수 있지만, 응답의 <code>responseXML</code>과 <code>channel</code> 특성은 항상 {{jsxref("null")}}입니다. (<code><a href="/ko/docs/Web/API/Fetch_API">fetch</a></code>는 이러한 제한 없이 사용할 수 있습니다.)</p> + +<h2 id="생성자">생성자</h2> + +<dl> + <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> + <dd>주어진 URL의 스크립트를 실행하는 전용 웹 워커를 생성합니다. <a href="/ko/docs/Web/API/Blob">Blob URL</a>도 사용할 수 있습니다.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<p>부모 {{domxref("EventTarget")}}에서 속성을 상속하고, {{domxref("AbstractWorker")}}의 속성을 구현합니다.</p> + +<h3 id="이벤트_처리기">이벤트 처리기</h3> + +<dl> + <dt>{{domxref("AbstractWorker.onerror")}}</dt> + <dd><code>error</code> 유형의 {{domxref("ErrorEvent")}}가 워커로 확산되면 호출할 {{domxref("EventListener")}}입니다. {{domxref("AbstractWorker")}}에서 상속합니다.</dd> + <dt>{{domxref("Worker.onmessage")}}</dt> + <dd><code>message</code> 유형의 {{domxref("MessageEvent")}}가 워커로 확산되면, 즉 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}를 통해 워커에서 부모 문서로 메시지를 전송하면 호출할 {{domxref("EventListener")}}입니다. 메시지는 {{domxref("MessageEvent.data", "data")}} 속성에 들어있습니다.</dd> + <dt>{{domxref("Worker.onmessageerror")}}</dt> + <dd>{{event("messageerror")}} 이벤트가 발생하면 호출할 {{domxref("EventHandler")}}입니다.</dd> +</dl> + +<dl> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>부모 {{domxref("EventTarget")}}에서 메서드를 상속하고, {{domxref("AbstractWorker")}}의 메서드를 구현합니다.</p> + +<dl> + <dt>{{domxref("Worker.postMessage()")}}</dt> + <dd>워커의 내부 범위로 메시지를 전송합니다. 메시지는 임의의 JavaScript 객체입니다.</dd> + <dt>{{domxref("Worker.terminate()")}}</dt> + <dd>워커를 즉시 종료합니다. 현재 워커가 연산을 진행 중이더라도 완료를 기다리지 않습니다. {{domxref("ServiceWorker")}} 인스턴스는 이 메서드를 지원하지 않습니다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<dl> + <dt><code><a href="/ko/docs/Web/API/Worker/message_event">message</a></code></dt> + <dd>워커의 부모가 워커로부터 메시지를 수신했을 대 발생합니다.<br> + <code><a href="/ko/docs/Web/API/Worker/onmessage">onmessage</a></code> 속성에서도 사용 가능합니다.</dd> + <dt><code><a href="/ko/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt> + <dd><code>Worker</code> 객체가 <a href="/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">역직렬화</a> 할 수 없는 객체를 메시지로 받았을 대 발생합니다.<br> + <code><a href="/ko/docs/Web/API/Worker/onmessageerror">onmessageerror</a></code> 속성에서도 사용 가능합니다.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt> + <dd>{{jsxref("Promise")}}가 거부될 때마다 발생합니다. 거부를 처리할 처리기의 존재 유무는 고려하지 않습니다.<br> + <code><a href="/ko/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> 속성에서도 사용 가능합니다.</dd> + <dt><code><a href="/ko/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt> + <dd>{{jsxref("Promise")}}가 거부됐는데, 처리할 처리기가 없을 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> 속성에서도 사용 가능합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>다음 코드 조각은 {{domxref("Worker.Worker", "Worker()")}} 생성자를 사용해 <code>Worker</code> 객체를 생성한 후, 그 <code>Worker</code>를 사용합니다.</p> + +<pre class="brush: js notranslate">var myWorker = new Worker("worker.js"); +var first = document.querySelector('#number1'); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> + +<p>전체 예제를 보시려면 저희의 <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">simple-web-worker 예제</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">라이브</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', "#worker", "Worker")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>워커의 종류마다 지원 상황이 다릅니다. 각각의 페이지를 방문해 더 자세히 알아보세요.</p> + + + +<p>{{Compat("api.Worker")}}</p> + +<h3 id="교차_출처에서의_워커_오류_동작">교차 출처에서의 워커 오류 동작</h3> + +<p>초기 명세에서는 교차 출처 워커 스크립트를 불러오려 시도하면 <code>SecurityError</code>가 발생했습니다. 요즘은 오류 대신 {{event("error")}} 이벤트가 발생합니다. <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">이 글</a>에서 교차 출처 처리 방법을 알아보세요.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers" title="en/Using DOM workers">웹 워커 사용하기</a></li> + <li><a href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a></li> + <li>다른 종류의 워커: {{domxref("SharedWorker")}}와 <a href="/ko/docs/Web/API/Service_Worker_API">서비스 워커</a>.</li> +</ul> |