path: root/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html

---
title: WebAssembly.instantiate()
slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
---
<div>{{JSRef}}</div>

<p><strong><code>WebAssembly.instantiate()</code></strong> 함수를 사용하면 WebAssembly 코드를 컴파일하고 인스턴스화 할 수 있습니다. 이 함수에는 두개의 overloads가 있습니다.</p>

<ul>
 <li>기본 오버로드는 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref ( "ArrayBuffer")}}의 형태로 WebAssembly 바이너리 코드를 취해 컴파일 및 인스턴스화를 한 번에 수행합니다. 반환 된 Promise는 컴파일 된 {{jsxref ( "WebAssembly.Module")}} 및 첫 번째 {{jsxref ( "WebAssembly.Instance")}}로 해석됩니다.</li>
 <li>두번째 오버로드는 이미 컴파일 된 {{jsxref ( "WebAssembly.Module")}}을 취하여 해당 <code>Module</code>의 <code>Instance</code>로 해석되는 <code>Promise</code>을 반환합니다. 이 overload는 <code>Module</code>이 이미 컴파일된 경우 유용합니다.</li>
</ul>

<div class="warning">
<p><strong>중요 : </strong><strong>이 방법은 wasm 모듈을 가져와 인스턴스화하는 가장 효율적인 방법은 아닙니다. 가능하다면 원시 바이트 코드에서 모듈을 모두 한 단계로 가져오고, 컴파일하고 인스턴스화하는 대신 최신 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메서드를 사용해야합니다. {{jsxref ( "ArrayBuffer")}} 로의 변환이 필요합니다.</strong></p>
</div>

<h2 id="Syntax">Syntax</h2>

<h3 id="Primary_overload_—_taking_wasm_binary_code">Primary overload — taking wasm binary code</h3>

<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiate(bufferSource, importObject);
</pre>

<h4 id="Parameters">Parameters</h4>

<dl>
 <dt><em>bufferSource</em></dt>
 <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref("ArrayBuffer")}}입니다.</dd>
 <dt><em>importObject</em> {{optional_inline}}</dt>
 <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 <code>인스턴스</code>로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}}가 발생합니다.</dd>
</dl>

<h4 id="Return_value">Return value</h4>

<p>두개의 필드를 포함하는 <code>ResultObject</code>를 가진 <code>Promise</code>를 반환:</p>

<ul>
 <li><code>module</code>: 컴파일 된 WebAssembly 모듈을 나타내는 {{jsxref ( "WebAssembly.Module")}} 객체입니다. 이 <code>Module</code>은 {{domxref("Worker.postMessage", "postMessage()")}}를 통해 공유되거나 <a href="/en-US/docs/WebAssembly/Caching_modules">cached in IndexedDB</a>로 다시 인스턴스화 될 수 있습니다.</li>
 <li><code>instance</code>: <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>을 포함하는 {{jsxref ( "WebAssembly.Instance")}} 객체입니다.</li>
</ul>

<h4 id="Exceptions">Exceptions</h4>

<ul>
 <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li>
 <li>작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li>
</ul>

<h3 id="Secondary_overload_—_taking_a_module_object_instance">Secondary overload — taking a module object instance</h3>

<pre class="syntaxbox">Promise&lt;WebAssembly.Instance&gt; WebAssembly.instantiate(module, importObject);
</pre>

<h4 id="Parameters_2">Parameters</h4>

<dl>
 <dt><em>module</em></dt>
 <dd>{{jsxref ( "WebAssembly.Module")}} 객체가 인스턴스화됩니다.</dd>
 <dt><em>importObject</em> {{optional_inline}}</dt>
 <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 <code>module</code> 가져 오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}} 가 발생합니다.</dd>
</dl>

<h4 id="Return_value_2">Return value</h4>

<p>A <code>Promise</code> that resolves to an {{jsxref("WebAssembly.Instance")}} object.</p>

<h4 id="Exceptions_2">Exceptions</h4>

<ul>
 <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li>
 <li>If the operation fails, the promise rejects with a {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}}, or {{jsxref("WebAssembly.RuntimeError")}}, depending on the cause of the failure. <br>
  작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li>
</ul>

<h2 id="Examples">Examples</h2>

<p><strong>Note</strong>: 대부분의 경우 <code>instantiate()</code>보다 더 효율적이므로 {{jsxref ( "WebAssembly.instantiateStreaming ()")}}을 사용하는 것이 좋습니다.</p>

<h3 id="First_overload_example">First overload example</h3>

<p>fetch를 사용하여 일부 WebAssembly 바이트 코드를 가져온 후 우리는 {{jsxref ( "WebAssembly.instantiate ()")}} 함수를 사용하여 모듈을 컴파일하고 인스턴스화하여 해당 프로세스에서 JavaScript 함수를 WebAssembly 모듈로 가져옵니다. 그런 다음 <code>Instance</code>에서 <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>를 호출합니다.</p>

<pre class="brush: js">var importObject = {
  imports: {
    imported_func: function(arg) {
      console.log(arg);
    }
  }
};

fetch('simple.wasm').then(response =&gt;
  response.arrayBuffer()
).then(bytes =&gt;
  WebAssembly.instantiate(bytes, importObject)
).then(result =&gt;
  result.instance.exports.exported_func()
);</pre>

<div class="note">
<p><strong>Note</strong>: 이 예제는 GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a>에서도 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">라이브보기도 있음</a>).</p>
</div>

<h3 id="Second_overload_example">Second overload example</h3>

<p>다음 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> 데모 혹은 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">라이브로 보기</a>). {{jsxref ( "WebAssembly.compileStreaming ()")}} 메서드를 사용하여 로드된 simple.wasm 바이트 코드를 컴파일 한 다음 {{domxref("Worker.postMessage", "postMessage()")}}를 사용하여 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>에게 전달합니다.</p>

<pre class="brush: js">var worker = new Worker("wasm_worker.js");

WebAssembly.compileStreaming(fetch('simple.wasm'))
.then(mod =&gt;
  worker.postMessage(mod)
);</pre>

<p>작업자 (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code> 참조)에서 모듈이 사용할 가져 오기 객체를 정의한 다음 주 스레드에서 모듈을 수신 할 이벤트 핸들러를 설정합니다. 모듈을 받으면 {{jsxref ( "WebAssembly.instantiate ()")}} 메소드를 사용하여 인스턴스를 만들고 내부에서 내 보낸 함수를 호출합니다.</p>

<pre class="brush: js">var importObject = {
  imports: {
    imported_func: function(arg) {
      console.log(arg);
    }
  }
};

onmessage = function(e) {
  console.log('module received from main thread');
  var mod = e.data;

  WebAssembly.instantiate(mod, importObject).then(function(instance) {
    instance.exports.exported_func();
  });
};</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}</td>
   <td>{{Spec2('WebAssembly JS')}}</td>
   <td>Initial draft definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<div>
<p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
 <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
 <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
</ul>