diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/webassembly/exported_functions | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/webassembly/exported_functions')
-rw-r--r-- | files/ko/webassembly/exported_functions/index.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/files/ko/webassembly/exported_functions/index.html b/files/ko/webassembly/exported_functions/index.html new file mode 100644 index 0000000000..6d8b728b22 --- /dev/null +++ b/files/ko/webassembly/exported_functions/index.html @@ -0,0 +1,71 @@ +--- +title: Exported WebAssembly functions +slug: WebAssembly/Exported_functions +translation_of: WebAssembly/Exported_functions +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">Exported WebAssembly functions는 JavaScript에서 WebAssembly 함수를 나타내는 방법입니다. 여기서는 이 함수들에 대해 더 자세히 설명합니다.</p> + +<h2 id="Exported..._뭐요">Exported... 뭐요?</h2> + +<p>내보낸 WebAssembly 함수는 기본적으로 JavaScript에서 WebAssembly 함수를 나타내는 JavaScript 래퍼입니다. 호출 할 때 배경에서 백그라운드로 액티비티를 가져와 wasm이 작업 할 수있는 유형 (예 : JavaScript 숫자를 Int32로 변환)으로 변환하고, 인수가 wasm 모듈 내부의 함수로 전달되고, 함수가 호출되며, 결과가 변환되어 JavaScript로 다시 전달됩니다.</p> + +<p>두 가지 방법으로 내 보낸 WebAssembly 함수를 검색 할 수 있습니다.</p> + +<ul> + <li>기존 테이블에서 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code>을 호출합니다.</li> + <li><code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code>를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.</li> +</ul> + +<p>어느 쪽이든, 기본 함수에 대해 동일한 종류의 래퍼를 사용합니다. JavaScript의 관점에서 볼 때, 모든 wasm 함수가 JavaScript 함수이기도하지만 - 내보낸 wasm 함수 객체 인스턴스에 의해 캡슐화되며 액세스 할 수있는 제한된 방법이 있습니다.</p> + +<h2 id="An_example">An example</h2> + +<p>예제를 보겠습니다. (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a>로 찾을 수 있으며 실시간으로 보기(<a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">running live also</a>)도 참고하시고. wasm <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">text representation</a> 표현도 확인하세요).</p> + +<pre class="brush: js">var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 }); + +WebAssembly.instantiateStreaming(fetch('table.wasm')) +.then(obj => { + var tbl = obj.instance.exports.tbl; + console.log(tbl.get(0)()); // 13 + console.log(tbl.get(1)()); // 42 + otherTable.set(0,tbl.get(0)); + otherTable.set(1,tbl.get(1)); + console.log(otherTable.get(0)()); + console.log(otherTable.get(1)()); +});</pre> + +<p>{{jsxref("WebAssembly.Table")}}생성자를 사용하여 JavaScript에서 테이블 (<code>otherTable</code>)을 만든 다음 {{jsxref("WebAssembly.instantiateStreaming()")}}를 메서드를 사용하여 table.wasm를 우리가 만든 페이지에 로드합니다.</p> + +<p> </p> + +<p>그런 다음 모듈에서 함수를 내보내고 <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a></code>을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 <code>set()</code>을 사용하여 <code>otherTable</code> 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.</p> + +<p>이를 증명하기 위해 우리는 이러한 참조를 <code>otherTable</code>에서 다시 검색하여 그 결과를 콘솔에도 출력하므로 동일한 결과를 얻을 수 있습니다.</p> + +<h2 id="They_are_real_functions">They are real functions</h2> + +<p>앞의 예에서 각 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.</p> + +<p>이것들은 WebAssembly 함수에 대한 래퍼 (wrapper)가 될뿐만 아니라 실제 JavaScript 함수임을 주목할 필요가 있습니다. 위의 예제를 <a href="/en-US/docs/WebAssembly#Browser_compatibility">WebAssembly-supporting browser</a>에 로드하고 콘솔에서 다음 줄을 실행하세요.</p> + +<pre class="brush: js">var testFunc = otherTable.get(0); +typeof testFunc;</pre> + +<p>그러면 결과 함수(<code>function</code>)가 반환됩니다. 그런 다음 JavaScript에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> 등의 다른 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">functions</a>를 수행 할 수 있는 기능을 수행 할 수 있습니다. <code>testFunc.toString()</code>은 흥미로운 결과를 반환합니다.</p> + +<pre class="brush: js">function 0() { + [native code] +}</pre> + +<p>이렇게하면 wrapper-type의 본질에 대해 더 많이 알 수 있습니다.</p> + +<p>exported WebAssembly functions에 대해 알아야 할 몇 가지 사항은 다음과 같습니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> 속성은 wasm 함수 시그니처에 선언 된 인수의 개수입니다.</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> 속성은 wasm 모듈에서 함수의 인덱스에 대한 <code>toString()</code> 결과입니다.</li> + <li>i64 유형 값을 사용하거나 가져 오는 내 보낸 wasm 함수를 호출하려고하면 JavaScript는 현재 i64를 정확하게 표현할 방법이 없기 때문에 현재 오류가 발생합니다. 이후에 개선 될 것입니다. - 새로운 int64 유형이 wasm에 의해 사용될 수 있도록 향후 표준으로 고려되고 있습니다.</li> +</ul> |