initial commit

2 files changed, 334 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>
diff --git a/files/ko/web/api/worker/postmessage/index.html b/files/ko/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..5e6053407d
--- /dev/null
+++ b/files/ko/web/api/worker/postmessage/index.html
@@ -0,0 +1,205 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>{{domxref("Worker")}} interface의 메서드, <code><strong>postMessage()</strong></code>는 <code>Worker</code> 자신의 내부 영역으로 메시지를 전달합니다. 이 메서드는 <code>Worker</code> 자신에게 보낼 하나의 매개변수를 받습니다. 매개변수로 들어갈 데이터는 순환 참조를 포함하는 <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm에 의해 다루어지는 JavaScript 객체를 포함에 어떤 값이든 들어갈 수 있습니다.</p>
+
+<p> <code>Worker</code>는 정보를 다시 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 메서드를 사용해 받은 정보를 산란시키는 스레드로 전달해줄 수 있다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>aMessage</em></dt>
+ <dd>worker로 전해 줄 객체;  이 매개변수는 {{domxref("DedicatedWorkerGlobalScope.onmessage")}} 이벤트 핸들러로 전해질 이벤트의 데이터 필드에 들어갈 것이다. 순환 참조를 포함하는 <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> 알고리즘에 의해 다루어지는 JavaScript 객체 혹은 어떤 값이라도 이 매개변수에 들어갈 수 있다.</dd>
+ <dt><em>transferList</em> {{optional_inline}}</dt>
+ <dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and becomes available only to the worker it was sent to.</dd>
+ <dd>Transferable objects are instances of classes like {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} or {{domxref("ImageBitmap")}} objects can be transferred. <code>null</code> is not an acceptable value for the <code>transferList</code>.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following code snippet shows the creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (<code>first</code> and <code>second</code>) have their values changed, {{event("change")}} events invoke <code>postMessage()</code> to send the value of both inputs to the current worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>postMessage()</code> can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.</p>
+</div>
+
+<h3 id="Transfer_Example">Transfer Example</h3>
+
+<p>This example shows a Firefox add-on that transfers an <code>ArrayBuffer</code> from the main thread to the <code>ChromeWorker</code>, and then the <code>ChromeWorker</code> transfers it back to the main thread.</p>
+
+<h4 id="Main_thread_code">Main thread code:</h4>
+
+<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+</pre>
+
+<h4 id="Worker_code">Worker code</h4>
+
+<pre class="brush: js">self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+</pre>
+
+<h4 id="Output_logged">Output logged</h4>
+
+<pre>arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</pre>
+
+<p><code>byteLength</code> goes to 0 as it is transferred. To see a full working example of this Firefox demo add-on see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+
+<h2 id="Specifications">Specifications</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', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Worker")}} interface it belongs to.</li>
+</ul>