diff options
Diffstat (limited to 'files/ko/webassembly')
| -rw-r--r-- | files/ko/webassembly/c_to_wasm/index.html | 199 | ||||
| -rw-r--r-- | files/ko/webassembly/caching_modules/index.html | 160 | ||||
| -rw-r--r-- | files/ko/webassembly/concepts/index.html | 152 | ||||
| -rw-r--r-- | files/ko/webassembly/existing_c_to_wasm/index.html | 171 | ||||
| -rw-r--r-- | files/ko/webassembly/exported_functions/index.html | 71 | ||||
| -rw-r--r-- | files/ko/webassembly/index.html | 126 | ||||
| -rw-r--r-- | files/ko/webassembly/loading_and_running/index.html | 109 | ||||
| -rw-r--r-- | files/ko/webassembly/rust_to_wasm/index.html | 295 | ||||
| -rw-r--r-- | files/ko/webassembly/text_format_to_wasm/index.html | 65 | ||||
| -rw-r--r-- | files/ko/webassembly/understanding_the_text_format/index.html | 607 | ||||
| -rw-r--r-- | files/ko/webassembly/using_the_javascript_api/index.html | 307 |
11 files changed, 2262 insertions, 0 deletions
diff --git a/files/ko/webassembly/c_to_wasm/index.html b/files/ko/webassembly/c_to_wasm/index.html new file mode 100644 index 0000000000..60ed315e87 --- /dev/null +++ b/files/ko/webassembly/c_to_wasm/index.html @@ -0,0 +1,199 @@ +--- +title: C/C++ 모듈을 웹어셈블리로 컴파일하기 +slug: WebAssembly/C_to_wasm +tags: + - 엠스크립튼 + - 웹어셈블리 +translation_of: WebAssembly/C_to_wasm +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">당신이 C/C++ 같은 언어로 새로운 모듈을 작성하고 있다면, 당신은 <a href="/ko/docs/Mozilla/Projects/Emscripten">Emscripten</a>같은 툴을 이용해서 WebAssembly로 컴파일 할 수 있습니다. 이것이 어떻게 가능한지 봅시다.</p> + +<h2 id="Emscripten_환경_준비하기">Emscripten 환경 준비하기</h2> + +<p>필요한 개발 환경을 설정해 봅시다.</p> + +<h3 id="요구_사항">요구 사항</h3> + +<p>Emscripten SDK를 설치하기 위해, 아래 설명을 참고하세요. <br> + <a href="https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html</a></p> + +<h2 id="예제_컴파일_하기">예제 컴파일 하기</h2> + +<p>환경설정이 완료되었다면, Emscripten로 C로 작성된 예제를 어떻게 컴파일하는지 살펴보겠습니다. Emscripten으로 컴파일하는 방법은 여러 가지가 있지만, 여기서는 주요 시나리오 두 가지만 다루도록 하겠습니다.</p> + +<ul> + <li>wasm으로 컴파일 하고 코드를 실행하기 위해 HTML을 만듭니다. 그리고 wasm을 실행하기 위한 JavaScript "glue"코드를 추가합니다.</li> + <li>wasm으로 컴파일하고 바로 JavaScript 코드를 만듭니다.</li> +</ul> + +<p>아래에서 자세히 보겠습니다.</p> + +<h3 id="HTML와_JavaScript_만들기">HTML와 JavaScript 만들기</h3> + +<p>이 방법은 브라우저에서 WebAssembly 코드를 실행하는 데 필요한 모든 것을 emscripten에서 생성하도록 하는 가장 간단한 방법입니다.</p> + +<ol> + <li>먼저 컴파일 할 예제가 필요합니다. 다음 C 예제 코드를 복사하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">hello.c</span></font> 파일을 만듭니다. + + <pre class="notranslate"><code>#include <stdio.h> + +int main(int argc, char ** argv) { + printf("Hello World\n"); +}</code></pre> + </li> + <li>terminal을 사용하여 Emscripten 컴파일 환경에서 다음의 명령어를 실행합니다. <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">hello.c </span></font>파일과 동일한 경로에서 실행하세요 + <pre class="notranslate"><code>emcc hello.c -s WASM=1 -o hello.html</code></pre> + </li> +</ol> + +<p>명령과 함께 전달된 옵션은 다음과 같습니다.</p> + +<ul> + <li><code>-s WASM=1</code> — wasm으로 결과물을 만들어 내는 옵션. 이것을 지정하지 않으면 기본적으로 Emscripten이 <a href="http://asmjs.org/">asm.js</a>를 출력합니다</li> + <li><code>-o hello.html</code> — Emscripten이 코드를 실행할 HTML 페이지 (및 사용할 파일 이름)를 생성하고 wasm 모듈과 JavaScript "glue"코드를 생성하여 wasm을 컴파일하고 인스턴스화하여 웹 환경에서 사용할 수 있도록 지정합니다.</li> +</ul> + +<p>코드를 실행하면 소스 폴더에 3개의 파일이 생길 것입니다.</p> + +<ul> + <li>바이너리 wasm 모듈 코드 (<code>hello.wasm</code>)</li> + <li>native c 함수와 Javascript/wasm을 번역해주는 glue코드를 포함한 자바스크립트 파일 (<code>hello.js</code>)</li> + <li>Wasm 코드를 로드, 컴파일 및 인스턴스화하고 브라우저에 출력을 표시하는 HTML 파일 (<code>hello.html</code>)</li> +</ul> + +<h3 id="예제_실행하기">예제 실행하기</h3> + +<p>이제 WebAssembly를 지원하는 브라우저에서 <code>hello.html</code>을 로드해야합니다. Firefox 52+ 및 Chrome 57+, 최신 Opera에서 기본적으로 활성화됩니다 (about:config 또는 <code>javascript.options.wasm</code> 플래그를 활성화하여 Firefox 47+에서 wasm 코드를 실행하거나 Chrome (51+) 및 Opera (38+) <em>chrome://flags</em>로 이동하여 Experimental WebAssembly 플래그를 사용하도록 설정합니다.)</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 생성된 HTML 파일 (<code>hello.html</code>) 을 로컬 하드(예: <code>file://your_path/hello.html</code>)에서 직접 읽으려고 하면 wasm의 동기, 비동기 패치(fetch)라인에 따라 에러메시지가 표시됩니다. HTTP 서버로 HTML파일을 실행해야 합니다. — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">로컬 테스팅 서버를 셋업하는 방법</a>을 참고하세요.</p> +</div> + +<p>모든 것이 계획대로 작동했다면 Emscripten 콘솔의 "Hello world" 출력이 웹 페이지와 브라우저의 JavaScript 콘솔에 나타나야 합니다. 축하합니다. WebAssembly에 C를 컴파일하고 브라우저에서 실행했습니다!</p> + +<h3 id="사용자_정의_HTML_템플릿_사용하기">사용자 정의 HTML 템플릿 사용하기</h3> + +<p>사용자 정의 HTML 템플릿을 사용하는 방법에 대해 보도록 하겠습니다.</p> + +<ol> + <li> + <p>우선 다음 C 코드를 새로운 폴더의 <code>hello2.c</code>파일로 만듭니다.</p> + + <pre class="notranslate"><code>#include <stdio.h> + +int main(int argc, char ** argv) { + printf("Hello World\n"); + +}</code></pre> + </li> + <li> + <p>emsdk 저장소에서 <code>shell_minimal.html</code> 파일을 검색하십시오. 이전의 새 디렉토리에서 <code>html_template</code>이라는 서브 디렉토리로 복사하십시오.</p> + </li> + <li> + <p>이제 Emscripten 컴파일러 환경 터미널 창에서 새 디렉토리로 이동 한 후 다음 명령을 실행합니다.</p> + + <pre class="notranslate"><code>emcc -o hello2.html hello2.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html</code></pre> + + <p>이번 명령어의 옵션은 이전에 입력한것과 조금 다릅니다.</p> + + <ul> + <li>컴파일러가 여전히 JavaScript 글루 코드와 <code>.html</code>을 출력한다는 것을 의미하는 <code>-o hello2.html</code>을 지정했습니다.</li> + <li>또한 <code>--shell-file html_template/shell_minimal.html</code>을 지정했습니다.이 예제는 예제를 실행할 HTML을 만드는 데 사용할 HTML 템플릿의 경로를 제공합니다.</li> + </ul> + </li> + <li> + <p>자 이제 예제를 실행해 봅니다. 위에있는 명령어를 실행하면 <code>hello2.html</code>파일을 생성해 냅니다. 생성 된 wasm을 로드하고 실행할 때 추가되는 글루 코드가있는 템플릿과 거의 동일한 내용을 갖습니다. 브라우저에서 열면 마지막 예제와 같은 결과를 볼 수 있습니다.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: <code>-o</code> 플래그에 HTML 파일 대신 .js 파일을 지정하여 전체 HTML이 아닌 JavaScript "glue"파일* 을 출력하도록 지정할 수 있습니다 (예 : <code>emcc -o hello2.js hello2.c -O3 -s WASM=1)</code>. 이것은 고급진 방법인데 사용자 정의 HTML을 처음부터 완전히 빌드 할 수 있습니다. 제공된 HTML 템플리트를 사용하는 것이 보통 더 쉽습니다.</p> + +<ul> + <li>Emscripten은 메모리 할당, 메모리 누수 및 기타 여러 가지 문제를 처리하기 위해 다양한 JavaScript "접착제"코드가 필요합니다.</li> +</ul> +</div> + +<h3 id="C_코드에서_사용자_정의된_함수_호출">C 코드에서 사용자 정의된 함수 호출</h3> + +<p>JavaScript에서 C 코드에 정의된 함수를 쓰고 싶은 경우 Emscripten <code>ccall()</code> 함수와 <code>EMSCRIPTEN_KEEPALIVE</code>(외부에서 사용가능한 함수 목록에 추가해주는 기능)을 통해 함수를 사용 할 수 있습니다 (자세한 내용은 다음 참조 : <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">JavaScript로 컴파일 할 때 C / C ++ 소스 코드의 함수가 사라지고 처리 할 함수가없는 이유는 무엇입니까?</a>). 어떻게 작동하는지 살펴 보겠습니다.</p> + +<ol> + <li> + <p>다음 코드를 새 디렉토리에 <code>hello3.c</code>로 저장하십시오.</p> + + <pre class="notranslate"><code>#include <stdio.h> +#include <emscripten/emscripten.h> + +int main(int argc, char ** argv) { + printf("Hello World\n"); +} + +#ifdef __cplusplus +extern "C" { +#endif + +void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) { + printf("MyFunction Called\n"); +} + +#ifdef __cplusplus +} +#endif</code></pre> + + <p>기본적으로 Emscripten이 생성 한 코드는 항상 <code>main()</code> 함수를 호출하고 다른 함수는 불필요한 코드로 제거됩니다. 함수 이름 앞에 <code>EMSCRIPTEN_KEEPALIVE</code>를 쓰면 데드코드로 제거되지 않습니다. <code>EMSCRIPTEN_KEEPALIVE</code>를 사용하려면 <code>emscripten.h</code> 라이브러리를 가져와야합니다.</p> + + <div class="note"> + <p><strong>Note</strong>: #ifdef 블록을 포함하여 C++ 코드에 이 코드를 포함 시켜도 이 예제는 계속 작동합니다. 그냥 C코드를 넣으면 C와 C++ name mangling 규칙으로 인해 문제가 생길 수 있지만 <code>extern "C"</code>를 사용하여 이 문제를 해결하면 됩니다.</p> + </div> + </li> + <li> + <p>이제 <code>html_template/shell_minimal.html</code>을 이 새로운 디렉토리에 추가하십시오. (개발환경에 넣고 개발하는것이 편합니다).</p> + </li> + <li> + <p>이제 컴파일 단계를 다시 실행 해 봅시다. 최신 디렉토리 (Emscripten 컴파일러 환경 터미널 창 내부)에서 다음 명령으로 C 코드를 컴파일하십시오. (우리가 <code>NO_EXIT_RUNTIME</code>으로 컴파일 할 필요가 있다는 것을 기억하십시오. <code>main()</code>이 종료 될 때 런타임이 종료 될 것입니다 - 적절한 C 에뮬레이션에 필요합니다. 예를 들어 atexits가 호출됩니다 - 컴파일 된 코드를 호출하는 것은 유효하지 않습니다 .)</p> + + <pre class="notranslate"><code>emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'</code></pre> + </li> + <li> + <p>브라우저에 예제를 다시로드하면 이전과 같은 것을 볼 수 있습니다!</p> + </li> + <li> + <p>이제 JavaScript에 있는 새로운 <code>myFunction()</code> <code>함수를 실행</code>해보겠습니다. 먼저, 텍스트 에디터에서 hello.html을 열어주세요</p> + </li> + <li> + <p><code><script type='text/javascript'></code> 태그 바로 위에 {{HTMLElement("button")}}을 추가해 보겠습니다.</p> + + <pre class="notranslate"><code><button class="mybutton">Run myFunction</button></code></pre> + </li> + <li> + <p>이제 첫 번째 {{HTMLElement("script")}} 요소의 끝에 다음 코드를 추가합니다.</p> + + <pre class="notranslate">document.querySelector('.mybutton') + .addEventListener('click', function() { + alert('check console'); + var result = Module.ccall( + 'myFunction', // name of C function + null, // return type + null, // argument types + null // arguments + ); + });</pre> + </li> +</ol> + +<p><code>ccall()</code><span>을 사용하여 내보낸 함수를 호출하는 방법이었습니다.</span></p> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a href="http://emscripten.org/">emscripten.org</a> — learn more about Emscripten and its large variety of options.</li> + <li><a href="https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap">Calling compiled C functions from JavaScript using ccall/cwrap</a></li> + <li><a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process?</a></li> + <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> + <li> + <p><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm">Compiling an Existing C Module to WebAssembly</a></p> + </li> +</ul> diff --git a/files/ko/webassembly/caching_modules/index.html b/files/ko/webassembly/caching_modules/index.html new file mode 100644 index 0000000000..780c79839a --- /dev/null +++ b/files/ko/webassembly/caching_modules/index.html @@ -0,0 +1,160 @@ +--- +title: Caching compiled WebAssembly modules +slug: WebAssembly/Caching_modules +translation_of: WebAssembly/Caching_modules +--- +<div>{{WebAssemblySidebar}}</div> + +<div class="warning"> +<p><strong>Warning</strong>: Experimental {{jsxref("WebAssembly.Module")}} IndexedDB serialization은 브라우저로부터의 지원이 종료됩니다. {{bug("1469395")}} 와 <a href="https://github.com/WebAssembly/spec/issues/821">spec issue</a>를 확인해 보세요.</p> +</div> + +<p class="summary">캐싱은 앱 성능 향상에 유용합니다. 컴파일 된 WebAssembly 모듈을 클라이언트에 저장할 수 있으므로 매번 다운로드하거나 컴파일 할 필요가 없습니다. 이 문서에서는 이 문제를 해결하는 모범 사례에 대해 설명합니다.</p> + +<h2 id="Caching_via_IndexedDB">Caching via IndexedDB</h2> + +<p><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>는 클라이언트 측에서 구조화 된 데이터를 저장하고 검색 할 수있는 트랜잭션 데이터베이스 시스템입니다. 텍스트, blobs 및 기타 유형의 복사 가능한 객체를 포함하여 응용 프로그램의 저장된 상태를 로컬에 저장하고 유지하는 데 적합합니다.</p> + +<p> </p> + +<p>여기에는 컴파일 된 wasm 모듈이 포함됩니다. ({{jsxref("WebAssembly.Module")}} JavaScript 객체).</p> + +<h2 id="Setting_up_a_caching_library">Setting up a caching library</h2> + +<p>IndexedDB는 다소 오래된 API이기 때문에 캐싱 코드 작성 속도를 높이고 최신 API와 함께 더 잘 작동하도록 라이브러리 기능을 제공하고자했습니다.</p> + +<p>우리의 <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> 라이브러리 스크립트에서 <code>instantiateCachedURL()</code>을 찾을 수 있습니다. 이 함수는 <code>url</code>의 wasm 모듈을 <code>dbVersion</code> 버전과 함께 가져 오고, 주어진 <code>importObject</code>로 인스턴스화한 다음 완료된 wasm 인스턴스로 promise resolving을 리턴합니다. 또한 컴파일 된 wasm 모듈을 캐시하기위한 데이터베이스 작성, 데이터베이스에 새 모듈 저장 시도 및 데이터베이스에서 이전에 캐시 된 모듈 검색하여 다시 다운로드하지 않게 해줍니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 지정된 URL뿐만 아니라 전체 사이트의 wasm 캐시는 함수에 전달 된 지정된 <code>dbVersion</code>에 의해 버전이 지정됩니다. wasm 모듈 코드가 업데이트되거나 URL이 변경되면 <code>dbVersion</code>을 업데이트해야합니다. 이후 <code>instantiateCachedURL()</code>을 호출하면 전체 캐시가 지워져 오래된 모듈을 사용하지 않도록 해줍니다.</p> +</div> + +<p>이 함수는 몇 가지 필수 상수를 정의하여 시작합니다.</p> + +<pre class="brush: js">function instantiateCachedURL(dbVersion, url, importObject) { + const dbName = 'wasm-cache'; + const storeName = 'wasm-cache';</pre> + +<h3 id="Setting_up_the_database">Setting up the database</h3> + +<p class="brush: js"><code>instantiateCachedURL()</code> 내부에 포함 된 첫 번째 도우미 함수인 <code>openDatabase()</code>은 wasm 모듈을 저장하기위한 객체 저장소를 만들고 <code>dbVersion</code>이 업데이트 된 경우 데이터베이스 지우기도합니다. 새 데이터베이스를 resolve한 promise를 반환합니다.</p> + +<pre class="brush: js"> function openDatabase() { + return new Promise((resolve, reject) => { + var request = indexedDB.open(dbName, dbVersion); + request.onerror = reject.bind(null, 'Error opening wasm cache database'); + request.onsuccess = () => { resolve(request.result) }; + request.onupgradeneeded = event => { + var db = request.result; + if (db.objectStoreNames.contains(storeName)) { + console.log(`Clearing out version ${event.oldVersion} wasm cache`); + db.deleteObjectStore(storeName); + } + console.log(`Creating version ${event.newVersion} wasm cache`); + db.createObjectStore(storeName) + }; + }); + }</pre> + +<h3 id="Looking_up_modules_in_the_database">Looking up modules in the database</h3> + +<p>다음 함수 <code>lookupInDatabase()</code>는 위에 작성한 객체 저장소에서 주어진 URL을 찾는 간단한 promise기반 작업을 제공합니다. resolve - 저장된 컴파일 된 모듈, reject - error.</p> + +<pre class="brush: js"> function lookupInDatabase(db) { + return new Promise((resolve, reject) => { + var store = db.transaction([storeName]).objectStore(storeName); + var request = store.get(url); + request.onerror = reject.bind(null, `Error getting wasm module ${url}`); + request.onsuccess = event => { + if (request.result) + resolve(request.result); + else + reject(`Module ${url} was not found in wasm cache`); + } + }); + }</pre> + +<h3 id="Storing_and_instantiating_modules">Storing and instantiating modules</h3> + +<p> </p> + +<p>다음으로, 지정된 wasm 모듈을 주어진 데이터베이스에 저장하기 위해 비동기 연산을 시작하는 함수 <code>storeInDatabase()</code>를 정의합니다.</p> + +<pre class="brush: js"> function storeInDatabase(db, module) { + var store = db.transaction([storeName], 'readwrite').objectStore(storeName); + var request = store.put(module, url); + request.onerror = err => { console.log(`Failed to store in wasm cache: ${err}`) }; + request.onsuccess = err => { console.log(`Successfully stored ${url} in wasm cache`) }; + }</pre> + +<h3 id="Using_our_helper_functions">Using our helper functions</h3> + +<p>모든 Promise 기반 헬퍼 함수를 정의하여 IndexedDB 캐시 조회의 핵심 로직을 표현할 수 있습니다. 우선 데이터베이스를 열어서, 주어진 <code>db</code>에 저장된 key <code>url</code>을 가진 컴파일 된 Module을 이미 가지고 있는지 확인합니다.</p> + +<p> </p> + +<pre class="brush: js"> return openDatabase().then(db => { + return lookupInDatabase(db).then(module => {</pre> + +<p>그렇게하면 주어진 import 객체로 인스턴스를 생성합니다.</p> + +<pre class="brush: js"> console.log(`Found ${url} in wasm cache`); + return WebAssembly.instantiate(module, importObject); + },</pre> + +<p> </p> + +<p>그렇지 않다면 처음부터 컴파일 한 다음 컴파일 된 모듈을 다음 번에 사용할 URL용 key와 함께 데이터베이스에 저장합니다.</p> + +<pre class="brush: js"> errMsg => { + console.log(errMsg); + return WebAssembly.instantiateStreaming(fetch(url)).then(results => { + storeInDatabase(db, results.module); + return results.instance; + }); + }) + },</pre> + +<div class="note"> +<p><strong>Note</strong>: {{jsxref("WebAssembly.instantiate()")}}가 {{jsxref("WebAssembly.Module()", "Module")}}및 {{jsxref("WebAssembly.Instance()", "Instance")}}를 반환하는 것은 이러한 종류의 사용을위한 것입니다. 모듈은 컴파일 된 코드를 나타내며 IDB에 저장 / 검색되거나 <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 Workers간에 공유 될 수 있습니다. 인스턴스는 상태 저장이며 호출 가능한 JavaScript 함수를 포함하므로 저장 / 공유 할 수 없습니다.</p> +</div> + +<p>데이터베이스를 여는 것이 실패한 경우 (예 : 사용 권한 또는 할당량으로 인해) 모듈을 가져 와서 간단히 컴파일하고 결과를 저장하지 마십시오 (데이터베이스를 저장할 데이터베이스가 없으므로).</p> + +<pre class="brush: js"> errMsg => { + console.log(errMsg); + return WebAssembly.instantiateStreaming(fetch(url)).then(results => { + return results.instance + }); + }); +}</pre> + +<h2 id="Caching_a_wasm_module">Caching a wasm module</h2> + +<p>위의 라이브러리 함수가 정의되면 wasm 모듈 인스턴스를 가져오고 내보낸 features를 사용할 때 (백그라운드에서 캐싱을 처리하는 동안) 다음 매개 변수를 사용하여 간단하게 호출 할 수 있습니다.</p> + +<ul> + <li>캐시 버전 - 위에서 설명한대로 wasm 모듈이 업데이트되거나 다른 URL로 이동하면 업데이트해야합니다.</li> + <li>인스턴스화 할 wasm 모듈의 URL.</li> + <li>가져오기 한 객체, (필요한 경우).</li> +</ul> + +<pre class="brush: js">const wasmCacheVersion = 1; + +instantiateCachedURL(wasmCacheVersion, 'test.wasm').then(instance => + console.log("Instance says the answer is: " + instance.exports.answer()) +).catch(err => + console.error("Failure to instantiate: " + err) +);</pre> + +<p>이 예제의 소스 코드는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/indexeddb-cache.html">indexeddb-cache.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/other-examples/indexeddb-cache.html">live</a>도 확인해보세요).</p> + +<h2 id="Browser_support">Browser support</h2> + +<p>현재이 기술은 Firefox와 Edge에서 모두 작동합니다. 둘 다 WebAssembly 모듈의 구조화 된 복제를 지원하기 때문입니다.</p> + +<p> </p> + +<p>Chrome은 WebAssembly 구조화 된 복제 지원 플래그 뒤에 구현 된 지원 기능을 가지고 있지만 일부 염려로 인해 기본적으로 이 기능을 사용하도록 설정하지 않았습니다 (예 : <a href="https://github.com/WebAssembly/design/issues/972">discussion</a> 참조).</p> + +<p>Safari는 아직 구현되지 않았습니다.</p> diff --git a/files/ko/webassembly/concepts/index.html b/files/ko/webassembly/concepts/index.html new file mode 100644 index 0000000000..605784b4b8 --- /dev/null +++ b/files/ko/webassembly/concepts/index.html @@ -0,0 +1,152 @@ +--- +title: 웹어셈블리의 컨셉 +slug: WebAssembly/Concepts +translation_of: WebAssembly/Concepts +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">본 글에서는 웹어셈블리의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 웹어셈블리의 목표, 웹어셈블리가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 웹어셈블리가 작동하는 원리에 관해 설명하려고 합니다.</p> + +<h2 id="웹어셈블리가_뭔가요">웹어셈블리가 뭔가요?</h2> + +<p>WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C ++, RUST 등의 저급 소스 언어를 효과적으로 컴파일하도록 고안되었습니다.</p> + +<p>이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다.</p> + +<p>게다가 WebAssembly 코드를 사용하여 이를 활용하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹 (또는 Node.js) 앱으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임 워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다.</p> + +<h2 id="웹어셈블리의_목표">웹어셈블리의 목표</h2> + +<p>웹어셈블리는 <a href="https://www.w3.org/community/webassembly/">W3C 웹어셈블리 커뮤니티 그룹</a>에서 다음과 같은 목표들로 만들어지고 있는 열린 표준입니다:</p> + +<ul> + <li>빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">일반적인 하드웨어들이 제공하는 기능</a>을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다.</li> + <li>읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다).</li> + <li>안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다.</li> + <li>웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다.</li> +</ul> + +<div class="note"> +<p><strong>참고</strong>: 웹어셈블리는 웹과 자바스크립트 환경 밖에서도 사용될 것입니다. (<a href="http://webassembly.org/docs/non-web/">Non-web embeddings</a> 참고).</p> +</div> + +<h2 id="WebAssembly는_웹_플랫폼에_어떻게_적용될까요">WebAssembly는 웹 플랫폼에 어떻게 적용될까요?</h2> + +<p>웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다:</p> + +<ul> + <li>자바스크립트같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM).</li> + <li>웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 <a href="/en-US/docs/Web/API">Web API</a>의 집합 (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> 등등).</li> +</ul> + +<p>이전까지 웹브라우저의 VM은 오직 자바스크립트만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 자바스크립트가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례(<a href="http://webassembly.org/docs/use-cases/">웹어셈블리 사용례</a> 참고)에서는 성능상의 문제에 부딪혀왔죠.</p> + +<p>거기에 더해서 아주 큰 자바스크립트 애플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다.</p> + +<p>WebAssembly는 자바스크립트와는 다른 언어이지만, 자바스크립트를 대체하기 위해서 만들어지지는 않았습니다. 대신 자바스크립트와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠:</p> + +<ul> + <li>자바스크립트는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 게다가 동적타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임웍, 라이브러리, 여타 도구들을 제공하는 거대한 생태계 또한 갖고 있습니다.</li> + <li>웹어셈블리는 어셈블리같이 컴팩트한 바이너리 포맷을 갖고있는 저수준 언어로써 네이티브에 가까운 성능을 제공하기도 하고, C++이나 Rust같이 저수준의 메모리 모델을 가진 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. (참고로 웹어셈블리는 미래에 가비지콜렉션 메모리 모델을 가진 언어들을 지원할 <a href="http://webassembly.org/docs/high-level-goals/">고수준 목표</a>도 갖고 있습니다.)</li> +</ul> + +<p>브라우저에 WebAssembly 가 등장하면서 앞에서 이야기했던 VM은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다.</p> + +<p>필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다 — <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">웹어셈블리 자바스크립트 API</a>가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 자바스크립트 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 자바스크립트 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다.</p> + +<h3 id="웹어셈블리의_핵심_컨셉">웹어셈블리의 핵심 컨셉</h3> + +<p>어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">웹어셈블리 자바스크립트 API</a>에 반영돼있습니다.</p> + +<ul> + <li><strong>모듈</strong>: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 <a href="/en-US/docs/Web/API/Blob">Blob</a>처럼 Windows와 <a href="/ko/docs/MDN/Doc_status/API/WebWorkers">worker</a> 간에 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다.</li> + <li><strong>메모리</strong>: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다.</li> + <li><strong>테이블</strong>: (안전성이나 이식성 등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가리키는) 레퍼런스의, 사이즈 조절 가능한 형식 지정된 배열입니다.</li> + <li><strong>인스턴스</strong>: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다.</li> +</ul> + +<p>자바스크립트 API는 모듈, 메모리, 테이블, 인스턴스를 생성하는 방법을 제공합니다. 자바스크립트 코드에서는, 웹어셈블리 인스턴스에서 일반 자바스크립트 함수의 형태로 노출한 익스포트를 동기적으로 호출할 수 있습니다. 웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 자바스크립트 함수를 동기적으로 호출할 수 있습니다.</p> + +<p>웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 자바스크립트로 제어할 수 있기 때문에, 자바스크립트 개발자는 웹어셈블리를 그저 효율적으로 고성능 함수를 생성하기 위한 자바스크립트의 기능이라고 생각해도 무방합니다.</p> + +<p>미래에는 웹어셈블리 모듈이 (<code><script type='module'></code>을 사용해서) <a href="https://github.com/WebAssembly/proposals/issues/12">ES2015모듈처럼 로드 가능하게 </a>될 것입니다. 이러면 웹어셈블리 모듈을 다운받고, 컴파일하고, 임포트하는 과정이 ES2015 모듈처럼 쉬워지게 되겠죠.</p> + +<h2 id="웹어셈블리를_써보고_싶은데_어떻게_시작해야하나요">웹어셈블리를 써보고 싶은데 어떻게 시작해야하나요?</h2> + +<p>웹어셈블리의 바이너리 포맷과 이 바이너리 코드를 불러와서 돌리는 API가 있다는 기초 컨셉에 대해서 알아보았으니, 이제 어떻게 이 컨셉을 실제로 사용할 수 있는지 알아봅시다.</p> + +<p>웹어셈블리 생태계는 이제 막 태동하는 단계입니다. 더 많은 도구들이 앞으로 쏟아져나오겠죠. 현재 네가지 방법이 있습니다:</p> + +<ul> + <li><a href="/ko/docs/Mozilla/Projects/Emscripten">엠스크립튼</a>으로 c/c++ 애플리케이션 포팅하기.</li> + <li>어셈블리 수준에서 바로 WebAssembly를 작성하거나 생성하기.</li> + <li>Rust 응용 프로그램을 작성하고 WebAssembly를 출력으로 지정합니다.</li> + <li>TypeScript와 비슷한 <a href="https://docs.assemblyscript.org/">AssemblyScript</a>를 사용하여 WebAssembly바이너리 컴파일.</li> +</ul> + +<p>이 선택지들에 대해서 얘기해봅시다:</p> + +<h3 id="CC로부터_포팅하기">C/C++로부터 포팅하기</h3> + +<p>WASM 코드를 작성하기위한 많은 옵션 중 두 가지는 온라인 Wasm 어셈블러 또는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>입니다. 다음과 같은 수많은 WASM 어셈블러 선택 항목이 있습니다.</p> + +<ul> + <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li> + <li><a href="https://anonyco.github.io/WasmFiddle/">WasmFiddle++</a></li> + <li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li> +</ul> + +<p>이것들은 시작해야 할 곳을 찾는 사람들을 위한 훌륭한 자료이지만 도구 및 Emscripten과 같은 최적화가 부족합니다.</p> + +<p>Emscripten 도구를 사용하면 C/C++ 소스코드를 가져와서 .wasm 모듈로 컴파일하고, 이 모듈을 불러와서 돌리는데 필요한 자바스크립트 "접착제(glue)" 코드를 끼워넣고, HTML 문서에 코드의 실행결과를 출력할 수도 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p> + +<p>핵심만 요약하면 절차는 다음과 같습니다:</p> + +<ol> + <li>엠스크립튼은 우선 C/C++ 소스코드를 clang+LLVM (OSX의 XCode 등에 사용될 정도로 성숙한 오픈소스 C/C++ 컴파일러 툴체인) 에 던져줍니다.</li> + <li>엠스크립튼이 clang+LLVM의 컴파일 결과를 받아다가 .wasm 바이너리로 변환시켜줍니다.</li> + <li>웹어셈블리는 그 자체로는 DOM에 바로 접근할 수가 없습니다. 단지 자바스크립트를 호출하면서 정수나 부동소수점 기초 자료형을 넘겨줄 수 있을 뿐이죠. 따라서 웹 API에 접근하려면 웹 API를 호출하는 자바스크립트를 통할 필요가 있습니다. 그래서 엠스크립튼은 이걸 해주는 HTML과 자바스크립트 접착제 코드를 같이 생성해줍니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 나중에는 <a href="http://webassembly.org/docs/gc/">웹어셈블리가 웹API를 바로 호출</a>하게 만들 계획입니다.</p> +</div> + +<p>자바스크립트 접착제 코드가 아마 여러분이 생각하는 것처럼 단순하지는 않을 겁니다. 우선 엠스크립튼은 <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>의 일부분과 <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>같은 유명 C/C++ 라이브러리를 직접 구현하는데요, 이 라이브러리들은 웹 API 위에서 구현돼야하기 때문에, 기저를 이루는 웹 API에 웹어셈블리를 연결시키기 위한 자바스크립트 접착제 코드가 각각의 라이브러리에 있어야 합니다.</p> + +<p>그래서 접착제 코드의 일부분은 C/C++ 코드에서 사용되는 각각의 라이브러리 기능을 구현하는 코드입니다. 그리고 상기한 웹어셈블리 자바스크립트 API를 사용해서 .wasm 파일을 불러와 실행하는 로직도 같이 담고있습니다.</p> + +<p>생성된 HTML문서는 자바스크립트 접착제 코드를 불러오고 표준출력(stdout)을 {{htmlelement("textarea")}}에 작성합니다. 만약 애플리케이션이 OpenGL을 사용하고있으면 HTML 안에 렌더링 타겟으로 사용되는 {{htmlelement("canvas")}} 엘리먼트가 포함됩니다. 이 엠스크립튼 출력물을 여러분의 웹앱에 맞도록 뜯어고치는 작업은 매우 쉽습니다.</p> + +<p>엠스크립튼에 대한 전체 문서는 <a href="http://emscripten.org">emscripten.org</a>에서 볼 수 있습니다. 툴체인을 구성하고 C/C++ 앱을 웹어셈블리로 컴파일하는 방법은 <a href="/ko/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a> 문서를 참고하세요.</p> + +<h3 id="웹어셈블리를_직접_작성하기">웹어셈블리를 직접 작성하기</h3> + +<p>런타임에 웹어셈블리를 생성해내는 자바스크립트 라이브러리나, 여러분만의 컴파일러 또는 도구를 직접 만들고 싶으신가요?</p> + +<p>실제 하드웨어의 어셈블리 언어처럼, 웹어셈블리의 바이너리 포맷에도 그와 1:1로 대응하는 문자형 표현이 존재합니다. <a href="http://webassembly.org/getting-started/advanced-tools/">웹어셈블리 텍스트를 바이너리로 바꿔주는 도구들</a>을 활용해서 직접 작성한 텍스트 포맷을 바이너리 포맷으로 변환시켜볼 수 있습니다.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Text_format_to_wasm">웹어셈블리 텍스트 형식을 wasm으로 변환하기</a>에서는 이를 어떻게 하는지 간단하게 설명해줍니다. </p> + +<h3 id="Rust로_WebAssembly_작성하기">Rust로 WebAssembly 작성하기</h3> + +<p>Rust WebAssembly 워킹 그룹의 끊임없는 노력 덕분에 Rust 코드를 작성하고 WebAssembly로 컴파일 할 수 있습니다. 필요한 툴 체인을 설치하고, 샘플 Rust 프로그램을 WebAssembly npm 패키지로 컴파일하고, 샘플 웹 애플리케이션의 샘플 <a href="/ko/docs/WebAssembly/Rust_to_wasm">Compiling from Rust to WebAssembly</a> 글을 통해 시작할 수 있습니다.</p> + +<h3 id="AssemblyScript_사용하기">AssemblyScript 사용하기</h3> + +<p>AssemblyScript는 Rust 혹은 C를 자세히 배우지 않고 WebAssembly를 활용해 보고 싶은 개발자를 위한 최고의 선택지입니다. AssemblyScript는 작은 번들을 만들고 C나 Rust보단 느립니다. <a href="https://docs.assemblyscript.org/">https://docs.assemblyscript.org/</a> 문서에서 확인해 보실 수 있습니다.</p> + +<h2 id="요약">요약</h2> + +<p>이 글에서는 웹어셈블리가 무엇이고, 왜 유용한지, 웹에 어떻게 적합하며 어떻게 사용할 수 있는지에 대해 설명합니다.</p> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li> + <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a> — find out how to load your own WebAssembly module into a web page.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — find out how to use the other major features of the WebAssembly JavaScript API.</li> +</ul> diff --git a/files/ko/webassembly/existing_c_to_wasm/index.html b/files/ko/webassembly/existing_c_to_wasm/index.html new file mode 100644 index 0000000000..987443cf93 --- /dev/null +++ b/files/ko/webassembly/existing_c_to_wasm/index.html @@ -0,0 +1,171 @@ +--- +title: Compiling an Existing C Module to WebAssembly +slug: WebAssembly/existing_C_to_wasm +translation_of: WebAssembly/existing_C_to_wasm +--- +<p>{{WebAssemblySidebar}}</p> + +<p class="summary">WebAssembly의 핵심 Use-case는 기존의 C 라이브러리 생태계를 사용하고 개발자가 웹에서 사용할 수 있도록하는 것입니다.</p> + +<p>이러한 라이브러리는 종종 C의 표준 라이브러리, 운영 체제, 파일 시스템 및 기타 사항에 의존합니다. Emscripten은 이러한 기능 대부분을 제공하지만 몇 가지 <a href="https://kripken.github.io/emscripten-site/docs/porting/guidelines/api_limitations.html">제한 사항</a>이 있습니다.</p> + +<p>예를 들어, WebP 용 인코더를 컴파일 해 봅시다. WebP(웹용 이미지 포맷) 코덱의 소스는 C로 작성되었으며 <a href="https://github.com/webmproject/libwebp">GitHub에서 사용가능</a>할뿐 아니라 광범위한 <a href="https://developers.google.com/speed/webp/docs/api">API documentation</a>로도 제공됩니다. 꽤 좋은 출발점입니다.</p> + +<pre class="brush: bash">$ git clone https://github.com/webmproject/libwebp</pre> + +<p>간단히 시작하려면 <code>webp.c</code>라는 C 파일을 작성하여 <code>encode.h</code>의 <code>WebPGetEncoderVersion()</code> 을 JavaScript로 노출 시키십시오.</p> + +<pre class="brush: cpp">#include "emscripten.h" +#include "src/webp/encode.h" + +EMSCRIPTEN_KEEPALIVE +int version() { + return WebPGetEncoderVersion(); +}</pre> + +<p>이 함수를 호출하기 위해 매개 변수 나 복잡한 데이터 구조가 필요 없기 때문에 libwebp의 소스 코드를 컴파일 할 수 있는지 여부를 테스트하는 좋은 간단한 프로그램입니다.</p> + +<p>이 프로그램을 컴파일하려면 -I 플래그를 사용하여 libwebp의 헤더 파일을 어디에서 찾을 수 있는지 컴파일러에게 알려야하며 필요한 libwebp의 모든 C 파일을 전달해야합니다. 유용한 전략은 <strong>모든</strong> C 파일을 제공하고 컴파일러에 의존하여 불필요한 모든 것을 제거하는 것입니다. 그것은 훌륭하게 작동할 것입니다.</p> + +<pre class="brush: bash">$ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \ + -I libwebp \ + webp.c \ + libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c</pre> + +<div class="note"> +<p><strong>Note:</strong> 이 전략은 모든 C 프로젝트에서 작동하지 않습니다. 많은 프로젝트는 컴파일하기 전에 시스템 특정 코드를 생성하기 위해 autoconf / automake를 사용합니다. Emscripten은 <code>emconfigure</code>와 <code>emmake</code>를 제공하여 이 명령을 랩핑하고 적절한 매개 변수를 주입합니다. <a href="https://kripken.github.io/emscripten-site/docs/compiling/Building-Projects.html">Emscripten documentation</a>에서 자세한 내용을 찾을 수 있습니다.</p> +</div> + +<p>이제 새 모듈을 로드하기 위해 HTML과 JavaScript 만 있으면 됩니다.</p> + +<pre class="brush: html"><script src="./a.out.js"></script> +<script> + Module.onRuntimeInitialized = async _ => { + const api = { + version: Module.cwrap('version', 'number', []), + }; + console.log(api.version()); + }; +</script></pre> + +<p><a href="https://googlechrome.github.io/samples/webassembly/version.html">output</a>에 라이브러리의 버전 번호가 정확히 표시됩니다.</p> + +<p><img alt=" Screenshot of the DevTools console showing the correct versionnumber." src="https://mdn.mozillademos.org/files/15913/version.png" style="border-style: solid; border-width: 1px;"></p> + +<div class="note"> +<p><strong>Note: </strong>libwebp는 현재 버전 인 a.b.c를 16 진수 0xabc로 반환합니다. 예를 들어 v0.6.1은 0x000601 = 1537로 인코딩됩니다.</p> +</div> + +<h3 id="Get_an_image_from_JavaScript_into_Wasm">Get an image from JavaScript into Wasm</h3> + +<p>인코더의 버전 번호를 얻는 것은 좋지만 실제 이미지 인코딩은 더욱 인상적입니다.</p> + +<p>자 여기서! 어떻게하면 이미지를 wasm으로 가져올 수 있는지가 가장 먼저 궁굼할 것입니다. <a href="https://developers.google.com/speed/webp/docs/api#simple_encoding_api">encoding API of libwebp</a>를 보면 RGB, RGBA, BGR 또는 BGRA의 바이트 배열이 필요함을 알 수 있습니다. 다행히 Canvas API에는 RGBA의 이미지 데이터가 포함 된 {{jsxref ( "Uint8ClampedArray")}}를 던져주는 {{domxref ( "CanvasRenderingContext2D.getImageData")}}가 있습니다.</p> + +<pre class="brush: js"> async function loadImage(src) { + // Load image + const imgBlob = await fetch(src).then(resp => resp.blob()); + const img = await createImageBitmap(imgBlob); + // Make canvas same size as image + const canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + // Draw image onto canvas + const ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + return ctx.getImageData(0, 0, img.width, img.height); +}</pre> + +<p>이제 이것은 자바 스크립트에서 wasm로 데이터를 복사하는 것만이 남았습니다. 이를 위해서 두 가지 추가 기능, 즉 wasm 내부의 이미지에 메모리를 할당하는 기능과 다시 해제 할 수있는 기능을 노출해야합니다.</p> + +<pre class="brush: cpp">#include <stdlib.h> // required for malloc definition + +EMSCRIPTEN_KEEPALIVE +uint8_t* create_buffer(int width, int height) { + return malloc(width * height * 4 * sizeof(uint8_t)); +} + +EMSCRIPTEN_KEEPALIVE +void destroy_buffer(uint8_t* p) { + free(p); +}</pre> + +<p><code>create_buffer()</code> 함수는 RGBA 이미지에 대한 버퍼를 할당하므로 픽셀 당 4 바이트입니다. <code>malloc()</code>에 의해 반환 된 포인터는 그 버퍼의 첫번째 메모리 셀의 주소입니다. 포인터가 JavaScript 토큰으로 반환되면 포인터는 숫자로 취급됩니다. cwrap을 사용하여 JavaScript에 함수를 노출 한 후에는 해당 번호를 사용하여 버퍼의 시작 부분을 찾고 이미지 데이터를 복사 할 수 있습니다.</p> + +<pre class="brush: js">const api = { + version: Module.cwrap('version', 'number', []), + create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']), + destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']), +}; + +const image = await loadImage('./image.jpg'); +const p = api.create_buffer(image.width, image.height); +Module.HEAP8.set(image.data, p); +// ... call encoder ... +api.destroy_buffer(p);</pre> + +<h3 id="Encode_the_Image">Encode the Image</h3> + +<p>이제 wasm에서 이미지를 사용할 수 있습니다. 이번엔 WebP 인코더를 호출하여 작업을 수행 할 차례입니다. <a href="https://developers.google.com/speed/webp/docs/api#simple_encoding_api">WebP documentation</a>을 보면 <code>WebPEncodeRGBA</code>가 가장 적합한 것 같습니다. 이 함수는 0과 100 사이의 품질 옵션뿐만 아니라 입력 이미지 및 치수에 대한 포인터를 사용합니다. 또한 WebP 이미지가 완료되면 <code>WebPFree()</code>를 사용하여 해제해야하는 출력 버퍼를 할당합니다.</p> + +<p>인코딩 작업의 결과는 출력 버퍼와 그 길이입니다. C의 함수는 메모리를 동적으로 할당하지 않는 한 반환 유형으로 배열을 가질 수 없으므로 이 예제는 정적 전역 배열에 의존합니다. 실제로는 32 비트 폭의 wasm 포인터에 의존합니다. 그러나 이것은 일을 단순하게 유지하는 적절한 방법입니다.</p> + +<pre class="brush: js">int result[2]; +EMSCRIPTEN_KEEPALIVE +void encode(uint8_t* img_in, int width, int height, float quality) { + uint8_t* img_out; + size_t size; + + size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out); + + result[0] = (int)img_out; + result[1] = size; +} + +EMSCRIPTEN_KEEPALIVE +void free_result(uint8_t* result) { + WebPFree(result); +} + +EMSCRIPTEN_KEEPALIVE +int get_result_pointer() { + return result[0]; +} + +EMSCRIPTEN_KEEPALIVE +int get_result_size() { + return result[1]; +}</pre> + +<p>이제 그 모든 것을 갖추면 인코딩 함수를 호출하고 포인터와 이미지 크기를 가져 와서 자신의 JavaScript 버퍼에 넣은 다음 프로세스에 할당 된 모든 Wasm 버퍼를 해제 할 수 있습니다.</p> + +<pre class="brush: js">api.encode(p, image.width, image.height, 100); +const resultPointer = api.get_result_pointer(); +const resultSize = api.get_result_size(); +const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize); +const result = new Uint8Array(resultView); +api.free_result(resultPointer);</pre> + +<div class="note"> +<p><strong>Note:</strong> <code>new Uint8Array(someBuffer)</code>는 <code>new Uint8Array(someTypedArray)</code>가 데이터를 복사하는 동안 동일한 memory chunk에 새로운 뷰를 생성합니다.</p> +</div> + +<p>이미지의 크기에 따라, wasm이 입력 및 출력 이미지를 모두 수용할 만큼 메모리를 늘릴 수 없는 오류가 발생할 수 있습니다.</p> + +<p><img alt=" + Screenshot of the DevTools console showing an error." src="https://mdn.mozillademos.org/files/15922/error.png"></p> + +<p>다행히도 이 문제에 대한 해결책은 오류 메시지에 있습니다. 컴파일 명령에 <code>-s ALLOW_MEMORY_GROWTH=1</code>을 추가하기 만하면됩니다.</p> + +<p>WebP 인코더를 컴파일하고 JPEG 이미지를 WebP로 코드 변환했습니다. 제대로 동작하는지 확인하기 위해 결과 버퍼를 블롭으로 변환하고 <code><img></code> 요소에 사용합니다.</p> + +<pre class="brush: js">const blob = new Blob([result], {type: 'image/webp'}); +const blobURL = URL.createObjectURL(blob); +const img = document.createElement('img'); +img.src = blobURL; +document.body.appendChild(img) +</pre> + +<p>보거라! 새로운 WebP 이미지의 영광을. :) <a href="https://googlechrome.github.io/samples/webassembly/image.html">Demo</a> | <a href="/en-US/docs/">Full Code</a> </p> + +<p><img alt=" DevToolsâ network panel and the generated image." src="https://mdn.mozillademos.org/files/15914/result.jpg" style="border-style: solid; border-width: 1px;"></p> 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> diff --git a/files/ko/webassembly/index.html b/files/ko/webassembly/index.html new file mode 100644 index 0000000000..4a63901f7b --- /dev/null +++ b/files/ko/webassembly/index.html @@ -0,0 +1,126 @@ +--- +title: 웹어셈블리 +slug: WebAssembly +tags: + - Landing + - NeedsTranslation + - TopicStub + - WebAssembly + - wasm +translation_of: WebAssembly +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary" dir="ltr">WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.</p> + +<h2 dir="ltr" id="간단히_말해서">간단히 말해서</h2> + +<p dir="ltr">웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.</p> + +<p>WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다.</p> + +<p dir="ltr">더 훌륭한 점은, 주요 브라우저 벤더의 적극적인 참여를 통해 <a href="https://www.w3.org/wasm/">W3C 웹어셈블리 워킹 그룹</a> 및 <a href="https://www.w3.org/community/webassembly/">Community Group</a>에서 웹 표준으로 개발되고있다는 것입니다.</p> + +<p dir="ltr"></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 dir="ltr" id="가이드">가이드</h2> + +<dl> + <dt><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></dt> + <dd>웹 어셈블리가 무엇인지, 왜 그렇게 유용한지, 어떻게 기존의 웹 플랫폼(혹은 그 이상)에 적응시켜 사용할 수 있는지 기본 개념을 알아봅시다.</dd> + <dt><a href="/ko/docs/WebAssembly/C_to_wasm">Compiling a New C/C++ Module to WebAssembly</a></dt> + <dd><a href="/ko/docs/Mozilla/Projects/Emscripten/">Emscripten</a> 같은 도구를 사용해서 C/C++ 로 작성된 코드를 .wasm으로 컴파일할 수 있습니다. 어떻게 컴파일할 수 있는지 알아봅시다.</dd> + <dt><a href="/ko/docs/WebAssembly/existing_C_to_wasm">Compiling an Existing C Module to WebAssembly</a></dt> + <dd>WebAssembly의 핵심 기능은 기존의 C 라이브러리 개발 생태계을 활용해 개발자가 웹에서 사용할 수 있도록하는 것입니다.</dd> + <dt><a href="/ko/docs/WebAssembly/rust_to_wasm">Compiling from Rust to WebAssembly</a></dt> + <dd>Rust 코드를 작성했다면 WebAssembly로 컴파일 할 수 있습니다! 이 튜토리얼은 Rust 프로젝트를 컴파일하여 기존 웹 애플리케이션에서 사용하기 위해 알아야 할 모든 것을 설명합니다.</dd> + <dt><a href="/ko/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a></dt> + <dd>본 글에서는 .wasm 파일을 만든 후에 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 나 <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> API를 이용하여 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly Javascript</a> API와 결합한 후 .wasm 파일을 브라우저로 가져오는 방법, 컴파일하고 초기화 하는 방법에 대해서 다룹니다.</dd> + <dt><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></dt> + <dd>.wasm 모듈을 브라우저로 불러왔으면, 사용해야겠지요? 본 글에서는 웹어셈블리 자바스크립트 API를 이용하여 웹어셈블리를 어떻게 사용하는지를 설명합니다.</dd> + <dt><a href="/ko/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a></dt> + <dd>익스포트 된 웹어셈블리 함수는 자바스크립트에서의 웹어셈블리 함수의 반영이며, 자바스크립트에서 웹어셈블리 코드를 호출할 수 있도록 해줍니다. 본 글에서는 익스포트 된 웹어셈블리 함수가 무엇인지에 대해 설명합니다.</dd> + <dt><a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a></dt> + <dd>본 글에서는 웹어셈블리의 텍스트 포맷에 대해 설명합니다. 텍스트 포맷은 브라우저에서 개발자 도구를 이용하여 디버깅 할 때 보여지는 .wasm 모듈의 저수준(Low-level) 문자형 표현입니다.</dd> + <dt><a href="/ko/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a></dt> + <dd>본 글에서는 텍스트 포맷으로 작성된 웹어셈블리 모듈을 .wasm 바이너리로 변환하는 방법을 제시합니다. </dd> +</dl> +</div> + +<div class="section"> +<h2 dir="ltr" id="API_참조">API 참조</h2> + +<dl> + <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt> + <dd>이 객체는 모든 웹어셈블리와 관련된 기능의 네임스페이스로서 역할합니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt> + <dd><code>WebAssembly.Global</code> 객체는 전역 변수 인스턴스를 나타내며 JavaScript 및 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스에서 가져 오거나 내보낼 수 있습니다. 이렇게하면 여러 모듈을 동적으로 연결할 수 있습니다.</dd> +</dl> + +<dl> + <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt> + <dd><code>WebAssembly.Module</code> 객체는 이미 브라우저에 의해 컴파일된 상태없는 웹어셈블리 코드를 담고있습니다. 게다가 여러번 인스턴스화 시킬 수 있고 효과적으로 합니다.<br> + WebAssembly.Module 객체는 브라우저에서 이미 컴파일 된 상태의stateless WebAssembly 코드를 포함하며 <a href="/ko/docs/Web/API/Worker/postMessage">Worker와 효율적으로 공유</a>하고 여러 번 인스턴스화 할 수 있습니다.</dd> + <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt> + <dd><code>WebAssembly.Instance</code> 객체는 상태를 가지며, 실행가능한 <code>Module</code>의 인스턴스입니다. <code>Instance</code> 객체는 웹어셈블리 코드를 자바스크립트에서 부를 수 있도록 <a href="/ko/docs/WebAssembly/Exported_functions">익스포트된 모든 웹어셈블리 함수</a>를 포함하고있습니다.</dd> + <dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt> + <dd><code>WebAssembly.instantiateStreaming ()</code> 함수는 WebAssembly 코드를 컴파일하고 인스턴스화하여 <code>모듈</code>과 첫 번째 <code>인스턴스</code>를 반환하는 기본 API입니다.</dd> + <dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt> + <dd><code>WebAssembly.Memory</code> 객체는 사이즈 조절 가능한 {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}}로, <code>Instance</code>가 접근하는 메모리를 로우(raw) 바이트들로 들고있습니다.</dd> + <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt> + <dd><code>WebAssembly.</code><code>Table</code> 객체는 <code>Instance</code>에 의해 접근되는 불투명한 값(함수 레퍼런스 등)들의 사이즈 조절 가능한, 형식지정된 배열입니다.</dd> + <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> + <dd>새 웹어셈블리 <code>CompileError</code> 객체를 생성합니다.</dd> + <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> + <dd>새 웹어셈블리 <code>LinkError</code> 객체를 생성합니다.</dd> + <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> + <dd>새 웹어셈블리 <code>RuntimeError</code> 객체를 생성합니다.</dd> +</dl> +</div> +</div> + +<h2 dir="ltr" id="예제">예제</h2> + +<ul dir="ltr"> + <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li> + <li><a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> 저장소에서 다른 예제들도 구경해보세요.</li> +</ul> + +<h2 id="스펙">스펙</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">스펙</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>자바스크립트 API 정의 초안.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("javascript.builtins.WebAssembly")}}</div> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul dir="ltr"> + <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> + <li><a href="http://webassembly.org/">webassembly.org</a></li> + <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li> + <li><a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a></li> + <li><a href="/ko/docs/Web/HTTP/Headers/Large-Allocation">Large-Allocation HTTP header</a></li> + <li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Emscripting a C Library to Wasm</a></li> +</ul> diff --git a/files/ko/webassembly/loading_and_running/index.html b/files/ko/webassembly/loading_and_running/index.html new file mode 100644 index 0000000000..6634a6eb7d --- /dev/null +++ b/files/ko/webassembly/loading_and_running/index.html @@ -0,0 +1,109 @@ +--- +title: Loading and running WebAssembly code +slug: WebAssembly/Loading_and_running +translation_of: WebAssembly/Loading_and_running +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">자바 스크립트에서 WebAssembly를 사용하려면 먼저 컴파일 / 인스턴스화 전에 모듈을 메모리로 가져와야합니다. 여기서 WebAssembly 바이트 코드를 가져 오는 데 사용할 수있는 다양한 메커니즘에 대한 참조와 함께 컴파일 / 인스턴스화 및 실행 방법에 대해 설명합니다.</p> + +<h2 id="뭐가_문제인가요">뭐가 문제인가요 ?</h2> + +<p>WebAssembly는 아직 <code><script type='module'></code> 또는 ES2015 <code>import</code> statements와 통합되어 있지 않으므로 imports를 사용하여 브라우저에서 가져올 방법이 없습니다.</p> + +<p>이전의 {{jsxref ( "WebAssembly.compile")}} / {{jsxref ( "WebAssembly.instantiate")}} 메소드를 사용하려면 WebAssembly 모듈 바이너리를 포함하는 {{domxref ( "ArrayBuffer")}}를 생성해야합니다. 원시 바이트를 가져온 다음 컴파일 / 인스턴스화합니다. 이것은 <code>new Function(string)</code>과 유사합니다. 단, 문자열 (JavaScript 소스 코드)을 바이트 배열 버퍼 (WebAssembly 소스 코드)로 대체한다는 점만 다릅니다.</p> + +<p>최신 {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} 방법이 훨씬 더 효율적입니다. <br> + 네트워크에서는 {{domxref("ArrayBuffer")}} 단계가 필요하지 않게 하면서 직접 바이트의 원시 스트림에 대한 작업을 수행합니다.</p> + +<p>그러면 어떻게 이 바이트를 어레이 버퍼에 넣고 컴파일할 수 있을까요? 다음 단원에서 설명합니다.</p> + +<h2 id="Using_Fetch">Using Fetch</h2> + +<p><a href="/ko/docs/Web/API/Fetch_API">Fetch</a>는 네트워크 리소스를 가져 오는 편리한 최신 API입니다.</p> + +<p>wasm 모듈을 가져오는 가장 빠르고 효율적인 방법은 새로운 {{jsxref("WebAssembly.instantiateStreaming()")}} 방법을 사용하는 것입니다. 이 method는 첫번째 인수로 fetch() 호출을 수행할 수 있는 메서드이며, 서버에서 스트리밍할 때 원시 바이트 코드에 액세스하면서 모듈 가져오기, 컴파일 및 인스턴스화를 한 번에 처리합니다.</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(results => { + // Do something with the results! +});</code> +</pre> + +<p>직접 스트림에서 작동하지 않는 이전 {{domxref ( "WebAssembly.instantiate")}} 메서드를 사용한 경우에는 가져온 바이트 코드를 {{domxref ( "ArrayBuffer ")}}로 변환하는 추가단계가 필요합니다.</p> + +<pre><code>fetch('module.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.instantiate(bytes, importObject) +).then(results => { + // Do something with the results! +});</code></pre> + +<p> </p> + +<h3 id="Aside_on_instantiate()_overloads">Aside on instantiate() overloads</h3> + +<p>{{jsxref("WebAssembly.instantiate()")}} 함수에는 두 가지 오버로드 양식이 있습니다. 위에 표시된 형식은 바이트 코드를 인수로 컴파일하여 컴파일된 모듈 객체가 포함된 개체로 resolve되는 'promise'을 반환합니다. 개체는 다음과 같습니다.</p> + +<pre><code>{ + module : Module // The newly compiled WebAssembly.Module object, + instance : Instance // A new WebAssembly.Instance of the module object +}</code></pre> + +<div class="note"> +<p><strong>Note</strong>: 일반적으로 인스턴스자체만 신경 쓰지만, 모듈을 캐시하거나, <code><a href="/ko/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 다른 worker나 윈도우와 공유하거나, 단순히 인스턴스를 더 생성하고자 할 때도 유용합니다. </p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 두 번째 오버로드 형식은 {{jsxref ( "WebAssembly.Module")}} 객체를 인수로 사용하여 인스턴스 객체를 직접 포함하는 promise를 결과로 반환합니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Second overload</a> 예제를 참조하십시오.</p> +</div> + +<h3 id="Running_your_WebAssembly_code">Running your WebAssembly code</h3> + +<p>JavaScript에서 WebAssembly 인스턴스를 사용할 수있게되면 {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}} 속성을 통해 내 보낸 속성을 사용할 수 있습니다 . 코드는 다음과 같습니다.</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject) +.then(obj => { + // Call an exported function: + obj.instance.exports.exported_func(); + + // or access the buffer contents of an exported memory: + var i32 = new Uint32Array(obj.instance.exports.memory.buffer); + + // or access the elements of an exported table: + var table = obj.instance.exports.table; + console.log(table.get(0)()); +})</code></pre> + +<div class="note"> +<p><strong>Note</strong>: WebAssembly 모듈에서 내보내는 방법에 대한 자세한 내용은 <a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> 및 <a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a>를 참조하십시오.</p> +</div> + +<h2 id="Using_XMLHttpRequest">Using XMLHttpRequest</h2> + +<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>는 Fetch보다 다소 오래된 방법이지만 형식화 된 배열을 얻는 데 부족함이 없습니다. <code>simple.wasm</code>을 그대로 사용하여 진행하겠습니다.</p> + +<ol> + <li>새로운 {{domxref("XMLHttpRequest()")}} 인스턴스를 만들고 {{domxref("XMLHttpRequest.open","open()")}} 메서드를 사용하여 요청을 열고 요청 메서드를 GET으로 설정합니다. , 가져올 파일의 경로를 선언하십시오.</li> + <li>핵심 부분은 {{domxref("XMLHttpRequest.responseType","responseType")}} 속성을 사용하여 응답 유형을 <code>'arraybuffer'</code>로 설정하는 것입니다.</li> + <li>그런 다음 {{domxref("XMLHttpRequest.send()")}}을 사용하여 요청을 전송합니다.</li> + <li>그런 다음 응답이 다운로드 완료되면 함수를 호출하기 위해 {{domxref("XMLHttpRequest.onload", "onload")}} 이벤트 핸들러를 사용합니다. 이 함수에서는 {{domxref("XMLHttpRequest.response", "response")}} 프로퍼티를 생성 한 다음, Fetch와 마찬가지로 {{jsxref("WebAssembly.instantiate()")}} 메소드로 넘겨 줍니다.</li> +</ol> + +<p>최종코드는 다음과 같습니다.</p> + +<pre><code>request = new XMLHttpRequest(); +request.open('GET', 'simple.wasm'); +request.responseType = 'arraybuffer'; +request.send(); + +request.onload = function() { + var bytes = request.response; + WebAssembly.instantiate(bytes, importObject).then(results => { + results.instance.exports.exported_func(); + }); +};</code> +</pre> + +<div class="note"><strong>Note</strong>: <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a> 에서도 예제를 확인할 수 있습니다.</div> diff --git a/files/ko/webassembly/rust_to_wasm/index.html b/files/ko/webassembly/rust_to_wasm/index.html new file mode 100644 index 0000000000..7e51cc36ce --- /dev/null +++ b/files/ko/webassembly/rust_to_wasm/index.html @@ -0,0 +1,295 @@ +--- +title: Rust를 WebAssembly로 컴파일하기 +slug: WebAssembly/Rust_to_wasm +tags: + - rust + - 웹어셈블리 + - 컴파일 +translation_of: WebAssembly/Rust_to_wasm +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">여러분이 Rust 코드를 가지고 있다면 WebAssembly로 컴파일 할 수 있습니다. 이 튜토리얼은 Rust 프로젝트를 컴파일하여 기존 웹 애플리케이션에서 사용하기 위해 알아야 할 모든 것을 설명합니다.</p> + +<h2 id="Rust_및_WebAssembly_사용_사례">Rust 및 WebAssembly 사용 사례</h2> + +<p>Rust와 WebAssembly를 위한 두가지 주요 사용 사례가 있습니다.</p> + +<ul> + <li>어플리케이션 전체를 만드는것 - Rust기반 Web app 만들기</li> + <li>어플리케이션의 일부를 만드는것 - Rust를 기존에 존재하는 JavaScript frontend에서 사용하는것</li> +</ul> + +<p>당분간, Rust 팀은 후자의 경우에 초점을 맞출 것입니다.그래서 여기서는 두번째 내용에 대해 다루겠습니다. 첫번째 use-case는 <a href="https://github.com/DenisKolodin/yew"><code>yew</code></a>와 같은 프로젝트를 한번 확인해보세요.</p> + +<p>이 튜토리얼에서는 Rust의 npm 패키지를 빌드하는 도구인 <code>wasm-pack</code>을 사용하여 npm 패키지를 빌드합니다. 이 패키지에는 WebAssembly 및 JavaScript 코드만 포함되므로 패키지 사용자는 Rust를 설치할 필요가 없습니다. 심지어 WebAssembly에서 작성된 것임을 알지 못할 수도 있습니다.</p> + +<h2 id="Rust_환경_설치">Rust 환경 설치</h2> + +<p>환경을 설치하기 위해 필요한 모든 단계를 수행해 봅시다.</p> + +<h3 id="Rust_설치">Rust 설치</h3> + +<p><a href="https://www.rust-lang.org/install.html">Install Rust</a>와 다음 설명에 따라 Rust를 설치합니다. "rustup"이라는 툴을 설치할건데 다양한 버전의 Rust를 관리할 수 있게 해줍니다. 기본적으로 최신 배포버전의 Rust가 설치됩니다. Rustup은 Rust 컴파일러인 <code>rustc</code> Rust의 표준 라이브러리 인 <code>rust-std</code>, Rust의 패키지 메니저 <code>cargo</code>및 <code>rust-docs</code> 등 유용한 문서를 설치합니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 설치를 완료한 뒤 cargo의 <code>bin</code> 디렉토리가 시스템의 <code>PATH</code>에 등록되어 있어야 함에 주의하십시오. 보통은 자동으로 등록되지만, 터미널을 재시작해야 할 수도 있습니다.</p> +</div> + +<h3 id="wasm-pack">wasm-pack</h3> + +<p>패키지를 빌드하기 위해, <code>wasm-pack</code>이라는 추가적인 툴이 필요합니다. 이것을 통해 코드를 WebAssembly로 컴파일하고, <code>npm</code>에 적합한 패키징을 생성할 수 있습니다. 설치를 하려면 터미널에 다음 명령을 입력합니다.</p> + +<pre class="notranslate"><code>$ cargo install wasm-pack</code></pre> + +<h3 id="Node.js_설치와_npm_계정_생성">Node.js 설치와 npm 계정 생성</h3> + +<p>이 튜토리얼에서 우리는 npm 패키지를 생성할 것이므로 Node.js와 npm이 설치되어 있어야 합니다. 추가적으로, 우리는 npm에 패키지를 배포할 것이며 npm 계정 역시 필요합니다. 이것들은 모두 무료입니다. 당신은 <em>기술적으로는</em> 패키지를 배포할 필요가 없지만, 패키지를 사용하는 것이 더 쉬우므로 이 튜토리얼에서 수행한다고 가정합니다.</p> + +<p>Node.js와 npm을 설치하려면 <a href="https://www.npmjs.com/get-npm">Get npm!</a> 페이지를 열고 안내를 따라하시면 됩니다. 버전을 선택할 때, 원하는 것을 선택하면 됩니다. 이 튜토리얼은 버전과는 무관합니다.</p> + +<p>npm 계정을 만드려면 <a href="https://www.npmjs.com/signup">npm 가입 페이지</a> 에서 양식을 작성하시면 됩니다.</p> + +<p>그 다음은, 명령줄에서 <code>npm adduser</code> 명령을 실행합니다.</p> + +<pre class="notranslate"><code>$ npm adduser +Username: yournpmusername +Password: +Email: (this IS public) you@example.com</code></pre> + +<p>계정명과 패스워드, 그리고 이메일을 입력하세요. 제대로 작동했다면, 다음 출력을 볼 수 있습니다.</p> + +<pre class="notranslate"><code>Logged in as yournpmusername on https://registry.npmjs.org/.</code></pre> + +<p>만약 제대로 되지 않았다면, 문제 해결을 위해 npm에 문의를 해보세요.</p> + +<h2 id="WebAssembly_npm_패키지_빌드하기">WebAssembly npm 패키지 빌드하기</h2> + +<p>설치가 다 되었으므로, Rust의 새 패키지를 만듭시다. 개인 프로젝트를 담는 디렉터리로 이동한 뒤, 다음 명령어를 입력합니다.</p> + +<pre class="notranslate"><code>$ cargo new --lib hello-wasm + Created library `hello-wasm` project</code></pre> + +<p>이 명령어는 <code>hello-wasm</code>으로 이름지어진 하위 디렉터리에 새 라이브러리를 생성합니다.</p> + +<pre class="notranslate"><code>+-- Cargo.toml ++-- src + +-- lib.rs</code></pre> + +<p>첫번째로, <code>Cargo.toml</code>은 빌드를 위해 설정하는 파일입니다. Bundler에서 <code>Gemfile</code>이나 npm에서 <code>package.json</code>을 써보셨다면 꽤 익숙할 것입니다. Cargo는 이것들과 비슷한 방식으로 작동합니다.</p> + +<p>다음은, Cargo가 <code>src/lib.rs</code>에 다음 Rust 코드를 생성했을 것입니다.</p> + +<pre class="notranslate"><code>#[cfg(test)] +mod tests { + #[test] + fn it_works() { + assert_eq!(2 + 2, 4); + } +}</code></pre> + +<p>우리는 이 테스트 코드를 사용하지 않을 것이므로, 삭제해도 좋습니다.</p> + +<h3 id="Rust로_무언가를_써보기">Rust로 무언가를 써보기</h3> + +<p><code>src/lib.rs</code>에 다음 코드를 적어봅시다.</p> + +<pre class="notranslate"><code>use wasm_bindgen::prelude::*; + +#[wasm_bindgen] +extern { + pub fn alert(s: &str); +} + +#[wasm_bindgen] +pub fn greet(name: &str) { + alert(&format!("Hello, {}!", name)); +}</code></pre> + +<p>이것은 우리의 Rust project의 내용으로, 세가지 주요 부분이 있습니다. 그들에 대해 차례대로 얘기해봅시다. 여기서는 고수준의 설명을 제공하고 일부 세부 사항에 대해서 설명합니다. Rust 언어에 대해 좀 더 배우고 싶으시면 <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a> 에서 확인하시면 됩니다.</p> + +<h4 id="Rust와_JavaScript간의_통신을_위한_wasm-bindgen_사용">Rust와 JavaScript간의 통신을 위한 <code>wasm-bindgen</code> 사용</h4> + +<p>첫 부분은 다음과 같습니다.</p> + +<pre class="notranslate"><code>use wasm_bindgen::prelude::*;</code></pre> + +<p>Rust에서 라이브러리는 크레이트(crate)라고 합니다.</p> + +<p>알 것 같나요? <em>Cargo(화물) </em>는 배에 <em>crate(상자) </em>들을 실어 나릅니다.</p> + +<p>세번째 줄의 <code>use</code> 키워드는 라이브러리로부터 코드를 불러옵니다. 이 경우, 우리는 <code>wasm_bindgen::prelude</code> 모듈 내에 있는 모든 것을 불러오게 됩니다. 다음 섹션에서 이것들의 기능에 대해 다룰 것입니다.</p> + +<p>다음 섹션으로 넘어가기 전에 <code>wasm-bindgen</code>에 대해 좀 더 얘기해야 합니다.</p> + +<p><code>wasm-pack</code>은 다른 도구인 <code>wasm-bindgen</code>을 사용해 JavaScript와 Rust의 타입들 사이에 다리를 제공합니다. 이는 JavaScript가 문자열을 통해 Rust의 API를 호출하거나, JavaScript의 예외를 포착하기 위해 Rust의 함수를 호출할 수 있습니다.</p> + +<p>우리는 패키지에서 <code>wasm-bindgen</code>의 기능을 사용할 것입니다. 실은, 그것들은 다음 섹션에 있습니다.</p> + +<h4 id="Rust에서_JavaScript의_외부함수_호출">Rust에서 JavaScript의 외부함수 호출</h4> + +<p>다음 부분은 이렇게 되어있을 것입니다.</p> + +<pre class="notranslate"><code>#[wasm_bindgen] +extern { + pub fn alert(s: &str); +}</code></pre> + +<p><code>#[ ]</code> 안에 있는 것을 속성이라고 부르는데, 이것은 다음에 오는 구문을 수정합니다. 이 경우에, 그 구문은 <code>extern</code>이며, Rust에게 외부에 정의된 함수를 호출할 것임을 알립니다. 이 속성의 경우, "<code>wasm-bindgen</code>은 이 함수들을 어떻게 찾을 것인지 알고 있다"고 알리는 것입니다.</p> + +<p>세번째 줄의 함수 시그니처는 Rust로 작성되어있습니다. <code>alert</code> 함수는 문자열 타입의 <code>s</code> 하나를 인자로서 받는다는 의미입니다.</p> + +<p>짐작하셨듯이, 이것은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">JavaScript에 의해 제공되는 <code>alert</code> 함수</a>입니다. 다음 섹션에서 이 함수를 호출할 것입니다.</p> + +<p>JavaScript 함수를 호출하고 싶을 때면 언제든지 이들을 파일에 추가할 수 있으며, `wasm-bindgen`이 당신을 위해 그 모든 것을 설정할 것입니다. 아직 모든 것이 지원되지는 않지만, 우리는 노력하고 있습니다. 빠진 것이 있다면, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">버그를 제출해주십시오.</a> </p> + +<h4 id="JavaScript가_호출할_수_있는_Rust_함수_작성">JavaScript가 호출할 수 있는 Rust 함수 작성</h4> + +<p>마지막 부분은 여기 있습니다.</p> + +<pre class="notranslate"><code>#[wasm_bindgen] +pub fn greet(name: &str) { + alert(&format!("Hello, {}!", name)); +}</code></pre> + +<p><code>#[wasm_bindgen]</code> 속성이 한번 더 나왔습니다. 이번엔 <code>extern</code> 구문이 수정되는 대신, <code>fn</code> 구문이 수정됩니다. 이것은 Rust 함수를 JavaScript에 의해 호출될 수 있도록 함을 의미하며, <code>extern</code> 과는 반대 기능이 됩니다. 이것은 우리가 필요로 하는 기능이 아니라, 우리가 세상에 제공하는 기능이 될 것입니다.</p> + +<p>이 함수의 이름은 <code>greet</code>이며, (<code>&str</code> 이라고 쓰여진) 문자열 타입의 <code>name</code> 하나를 인자로 갖습니다. 이것은 우리가 위에 있는 <code>extern</code> 블록에서 요구한 <code>alert</code> 함수를 호출하여, 문자열을 연결하는 <code>format!</code> 매크로를 전달합니다.</p> + +<p><code>format!</code>매크로는 이 경우에 서식 문자열과 변수를 두개의 인자로 받습니다. 서식 문자열은 <code>"Hello, {}!"</code> 입니다. 이것은 두번째 인자의 변수를 표시할 <code>{}</code>를 담고 있습니다. 변수의 경우 함수의 인자로 전달받은 <code>name</code>을 전달하므로, 우리가 <code>greet("Steve")</code>를 호출하였다면 매크로는 <code>"Hello, Steve!"</code>를 반환할 것입니다.</p> + +<p>이것은 <code>alert()</code>에 인자로 전달되므로, 이 함수를 호출한다면 우리는 브라우저의 경고창에서 "Hello, Steve!"를 볼 수 있을 것입니다.</p> + +<p>라이브러리가 모두 작성되었으므로, 빌드를 해봅시다.</p> + +<h3 id="작성된_코드를_WebAssembly로_컴파일">작성된 코드를 WebAssembly로 컴파일</h3> + +<p>컴파일이 올바르게 되려면, 먼저 <code>Cargo.toml</code>에서 설정을 해줘야 합니다. 파일을 열면, 다음과 같은 내용이 있을 것입니다.</p> + +<pre class="notranslate"><code>[package] +name = "hello-wasm" +version = "0.1.0" +authors = ["Your Name <you@example.com>"] +description = "A sample project with wasm-pack" +license = "MIT/Apache-2.0" +repository = "https://github.com/yourgithubusername/hello-wasm" + +[lib] +crate-type = ["cdylib"] + +[dependencies] +wasm-bindgen = "0.2"</code></pre> + +<p>리포지토리 이름을 작성하고, <code>author</code> 필드를 <code>git</code>이 사용하는 것과 같게 설정해주세요.</p> + +<p>추가해야 할 커다란 부분은 아래에 있습니다. <code>[lib]</code> 섹션은 패키지를 <code>cdylib</code> 형식으로 빌드할 것이라고 Rust에게 알리는데, 이 튜토리얼에선 그 의미가 무엇인지 다루지 않을 것입니다. 자세한 설명은 <a href="https://doc.rust-lang.org/cargo/guide/">Cargo</a> 와 <a href="https://doc.rust-lang.org/reference/linkage.html">Rust Linkage</a> 문서를 참조하십시오.</p> + +<p>마지막의 <code>[dependencies]</code> 섹션에서, Cargo에게 어떤 버전의 <code>wasm-bindgen</code>에 의존하고 있는지 알립니다. 이 경우, 버전 <code>0.2.z</code>는 어떤 것이든 사용할 수 있지만, <code>0.3.0</code>이상부터는 사용하지 않습니다.</p> + +<h3 id="패키지_빌드하기">패키지 빌드하기</h3> + +<p>모든 셋팅이 끝났으므로, 패키지를 빌드합시다. 터미널에 다음을 입력합니다.</p> + +<pre class="notranslate"><code>$ wasm-pack build --scope mynpmusername</code></pre> + +<p>이 명령어를 입력하면 많은 일이 일어납니다. (그리고 특히 <code>wasm-pack</code>을 처음 실행했을 때 처럼 많은 시간이 걸립니다.) 이에 대한 자세한 사항을 알고 싶으면, <a href="https://hacks.mozilla.org/2018/04/hello-wasm-pack/">Mozilla Hacks의 블로그 포스트</a>를 확인해보세요. 간단히 요약하자면, <code>wasm-pack build</code>는:</p> + +<ol> + <li>Rust 코드를 WebAssembly로 컴파일 합니다.</li> + <li>그 WebAssembly 위에서 <code>wasm-bindgen</code>을 실행하여, WebAssembly를 npm이 이해할 수 있는 모듈로 감싸는 JavaScript 파일을 생성합니다.</li> + <li><code>pkg</code> 디렉터리를 만들고 JavaScript 파일과 WebAssembly 코드를 그 안으로 옮깁니다.</li> + <li><code>Cargo.toml</code>을 읽고 동등한 <code>package.json</code>을 생성합니다.</li> + <li><code>README.md</code>가 있다면 패키지로 복사합니다.</li> +</ol> + +<p>빌드가 끝났다면, <code>pkg</code> 디렉터리에 npm 패키지가 생성될 것입니다.</p> + +<h4 id="코드_사이즈에_대한_오류">코드 사이즈에 대한 오류</h4> + +<p>생성된 WebAssembly 코드의 크기를 확인해보면, 몇백 킬로바이트가 될 것입니다. 우리는 Rust에게 코드의 크기를 최적화하라고 지시하지 않았으며, 만약 그렇게 지시한다면 크기가 <em>많이</em> 줄어들 것입니다. 이것은 이 튜토리얼에서 다루는 내용을 벗어나지만, 자세한 내용을 보려면 <a href="https://rustwasm.github.io/book/game-of-life/code-size.html#shrinking-wasm-size">Shrinking .wasm Size</a>에 대한 Rust WebAssembly Working Group의 문서를 참조하십시오.</p> + +<h3 id="npm에_패키지_배포">npm에 패키지 배포</h3> + +<p>npm에 우리의 새 패키지를 배포해봅시다.</p> + +<pre class="notranslate"><code>$ cd pkg +$ npm publish --access=public</code></pre> + +<p>우리는 이제 Rust로 쓰여졌으나, WebAssembly로 컴파일된 npm 패키지를 갖고 있습니다. 이것은 JavaScript에 쓰일 수 있도록 준비되었으며, 다른 사용자들은 Rust를 설치할 필요가 없습니다. 왜냐하면 패키지에는 WebAssembly 코드만 포함되어있으며, Rust 소스는 없기 때문입니다.</p> + +<h2 id="웹상의_패키지_사용하기">웹상의 패키지 사용하기</h2> + +<p>우리의 새 패키지를 사용하는 웹사이트를 빌드해봅시다. 많은 사람들이 여러가지 번들러 도구를 사용해 npm패키지를 사용하는데, 이 튜토리얼에선 이들 중 하나인 <code>webpack</code>을 사용할 것입니다. 이것은 조금 복잡하고, 현실적인 사용 사례를 보여줄 것입니다.</p> + +<p><code>pkg</code> 와 <code>hello-wasm</code> 디렉터리를 빠져나가서, 다음처럼 <code>site</code>라는 이름의 새 디렉터리를 만들고 진입합니다.</p> + +<pre class="notranslate"><code>$ cd ../.. +$ mkdir site +$ cd site</code></pre> + +<p><code>package.json</code> 이라는 이름의 새 파일을 만들어, 다음 코드를 작성합니다.</p> + +<pre class="notranslate"><code>{ + "scripts": { + "serve": "webpack-dev-server" + }, + "dependencies": { + "@mynpmusername/hello-wasm": "^0.1.0" + }, + "devDependencies": { + "webpack": "^4.25.1", + "webpack-cli": "^3.1.2", + "webpack-dev-server": "^3.1.10" + } +}</code></pre> + +<p><code>dependencies</code> 섹션에서 <code>@</code> 뒤에 실제 npm 계정명을 넣어주세요.</p> + +<p>그 다음은 Webpack을 설정해야 합니다. <code>webpack.config.js</code> 파일을 만든 뒤, 다음 코드를 작성합니다.</p> + +<pre class="notranslate"><code>const path = require('path'); +module.exports = { + entry: "./index.js", + output: { + path: path.resolve(__dirname, "dist"), + filename: "index.js", + }, + mode: "development" +};</code></pre> + +<p>그리고 HTML 파일도 필요합니다. <code>index.html</code>을 만들고, 다음 내용을 작성합니다.</p> + +<pre class="notranslate"><code><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>hello-wasm example</title> + </head> + <body> + <script src="./index.js"></script> + </body> +</html></code></pre> + +<p>마지막으로, HTML에서 참조되는 <code>index.js</code>를 만들어 다음 내용을 작성합니다.</p> + +<pre class="notranslate"><code>const js = import("./node_modules/@yournpmusername/hello-wasm/hello_wasm.js"); +js.then(js => { + js.greet("WebAssembly"); +});</code></pre> + +<p>npm 계정명을 한번 더 입력해야 합니다.</p> + +<p>이것은 <code>node_modules</code> 폴더에 있는 새 모듈을 불러옵니다. 이것은 모범 사례로 여겨지진 않지만, 데모이므로 지금은 괜찮습니다. 모듈이 로드되었면, 모듈로부터 <code>greet</code> 함수를 호출하여 <code>"WebAssembly"</code> 를 문자열로서 전달합니다. 여기엔 특별한 것이 없지만, Rust 코드를 호출한 방법에 주목해주세요. JavaScript 코드가 알 수 있는 한, 이것은 그저 정상적인 모듈일 뿐입니다.</p> + +<p>파일들을 모두 만들었으니, 한번 보도록 합시다.</p> + +<pre class="notranslate"><code>$ npm install +$ npm run serve</code></pre> + +<p>이것은 간단한 웹 서버를 시작합니다. <a href="http://localhost:8080/">http://localhost:8080</a>을 열면 화면에 <code>Hello, WebAssembly!</code> 라고 쓰여진 alert box가 나타납니다. 우리는 성공적으로 JavaScript로부터 Rust를, Rust로부터 JavaScript를 호출하였습니다.</p> + +<h2 id="결론">결론</h2> + +<p>이것이 튜토리얼의 끝입니다. 우리는 당신이 이것이 쓸모있다는 것을 알게 되었길 기대합니다.</p> + +<p>여기에 많은 흥미로운 작업이 진행되고 있습니다. 이것을 좀 더 낫게 만들고 싶다면, <a href="http://fitzgeraldnick.com/2018/02/27/wasm-domain-working-group.html">the Rust Webassembly Working Group</a>을 확인해보세요.</p> diff --git a/files/ko/webassembly/text_format_to_wasm/index.html b/files/ko/webassembly/text_format_to_wasm/index.html new file mode 100644 index 0000000000..b2912f26eb --- /dev/null +++ b/files/ko/webassembly/text_format_to_wasm/index.html @@ -0,0 +1,65 @@ +--- +title: Converting WebAssembly text format to wasm +slug: WebAssembly/Text_format_to_wasm +translation_of: WebAssembly/Text_format_to_wasm +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">WebAssembly에는 S- expression 기반의 텍스트 표현, 텍스트 편집기, 브라우저 개발자 도구 등에서 노출되도록 고안된 중간 양식이 있습니다.이 기사에서는 어떻게 작동하는지, 텍스트 형식 파일을 <code>.wasm</code> 어셈블리 형식으로 변환할 수 있는 도구를 사용하는 방법에 대해 설명합니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 텍스트 형식 파일은 대개 <code>.wat</code> 확장자로 저장됩니다. 때로는 <code>.wast</code>도 사용됩니다.이 파일은 변환 할 때 <code>.wast</code>으로 변환되지 않는 파일에 허용되는 추가 테스트 명령을 포함하는 파일을 가리 킵니다 - assertions 등</p> +</div> + +<h2 id="A_first_look_at_the_text_format">A first look at the text format</h2> + +<p>이 간단한 예제를 보자 - 다음 프로그램은 <code>imports</code>라는 모듈에서 <code>imported_func</code>라는 함수를 가져오고 <code>exported_func</code>라는 함수를 내 보냅니다.</p> + +<pre>(module + (func $i (import "<code>imports</code>" "<code>imported_func</code>") (param i32)) + (func (export "exported_func") + i32.const 42 + call $i + ) +)</pre> + +<p>WebAssembly 함수 <code>exported_func</code>는 Google 환경에서 사용하기 위해 내보내집니다 (예 : WebAssembly 모듈을 사용하는 웹 앱). 이 함수를 호출하면 <code>imported_func</code>라는 가져온 JavaScript 함수가 호출됩니다.이 함수는 매개 변수로 제공된 값 (42)으로 실행됩니다.</p> + +<h2 id="Converting_the_text_.wat_into_a_binary_.wasm_file">Converting the text .wat into a binary .wasm file</h2> + +<p>위의 <code>.wat</code> 텍스트 표현 예제를 <code>.wasm</code> 어셈블리 형식으로 변환 해 봅시다.</p> + +<ol> + <li>시작하려면 <code>simple.wat</code> 라는 텍스트 파일 안에 위의 목록을 복사하십시오. </li> + <li>이 텍스트 표현을 우리가 사용하기 전에 브라우저가 실제로 읽는 어셈블리 언어로 어셈블해야합니다. 이를 위해 wabt 도구를 사용할 수 있습니다.이 도구에는 WebAssembly의 텍스트 표현과 wasm을 변환하는 컴파일러가 포함되어 있으며 그 반대의 경우도 가능합니다. <a href="https://github.com/webassembly/wabt">https://github.com/webassembly/wabt</a>로 이동 -이 페이지의 지침에 따라 도구를 설정하십시오.</li> + <li>일단 도구를 만들었 으면 시스템 <code>PATH</code>에 <code>/wabt/out/clang/Debug</code> 디렉토리를 추가하십시오.</li> + <li>그런 다음, wat2wasm 프로그램을 실행하여 입력 파일의 경로와 <code>-o</code> 매개 변수 다음에 출력 파일의 경로를 전달하십시오. + <pre class="brush: bash">wat2wasm simple.wat -o simple.wasm</pre> + </li> +</ol> + +<p>wasm을 <code>.wasm</code> 어셈블리 코드가 들어있는 <code>simple.wasm</code> 파일로 변환합니다.</p> + +<div class="note"> +<p><strong>Note</strong>: wasm2wat 도구를 사용하여 어셈블리를 다시 텍스트 표현으로 변환 할 수도 있습니다. 예 : <code>wasm2wat simple.wasm -o text.wat</code>.</p> +</div> + +<h2 id="Viewing_the_assembly_output">Viewing the assembly output</h2> + +<p>출력 파일은 어셈블리 기반이므로 일반 텍스트 편집기에서는 볼 수 없습니다. 그러나 wat2wasm 도구의 <code>-v</code> 옵션을 사용하여 볼 수 있습니다. 아래 코드를 실행해 보세요:</p> + +<pre class="brush: bash">wat2wasm simple.wat -v</pre> + +<p>이렇게하면 다음과 같은 방법으로 터미널에 출력을 줄 수 있습니다.</p> + +<p><img alt="several strings of binary with textual descriptions beside them. For example: 0000008: 01 ; section code " src="https://mdn.mozillademos.org/files/14653/assembly-output.png" style="display: block; margin: 0px auto;"></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a> — 텍스트 형식 구문에 대한 자세한 설명.</li> + <li><a href="/ko/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a> — Binaryen / Emscripten과 같은 도구는 소스 코드를 wasm으로 컴파일하고 JavaScript 컨텍스트에서 모듈을 실행하는 데 필요한 API 코드를 만듭니다. 그들을 사용하는 방법에 대해 자세히 알아보십시오.</li> + <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — WebAssembly API 코드가 작동하는 방식에 대해 자세히 알고 싶다면이 내용을 읽으십시오.</li> + <li><a href="https://github.com/WebAssembly/design/blob/master/TextFormat.md">Text format</a> — WebAssembly GitHub repo에서 텍스트 형식에 대한 자세한 설명.</li> + <li><a href="https://github.com/xtuc/webassemblyjs/tree/master/packages/wast-loader">wast-loader</a> — 이 모든 것을 처리하는 WebPack 용 로더입니다.</li> +</ul> diff --git a/files/ko/webassembly/understanding_the_text_format/index.html b/files/ko/webassembly/understanding_the_text_format/index.html new file mode 100644 index 0000000000..45947c12ba --- /dev/null +++ b/files/ko/webassembly/understanding_the_text_format/index.html @@ -0,0 +1,607 @@ +--- +title: Understanding WebAssembly text format +slug: WebAssembly/Understanding_the_text_format +tags: + - 공유 주소 + - 메모리 + - 웹어셈블리 + - 자바스크립트 + - 테이블 + - 텍스트 포맷 + - 함수 +translation_of: WebAssembly/Understanding_the_text_format +--- +<div>{{WebAssemblySidebar}}</div> + +<p class="summary">사람이 WebAssembly를 읽고 편집 할 수 있게하려면 wasm 이진 형식의 텍스트 표현이 있어야합니다. 이것은 텍스트 편집기, 브라우저 개발자 도구 등에서 노출되도록 고안된 중간 양식입니다.이 장에서는 원시 구문과 텍스트 형식이 나타내는 기본 바이트 코드와 관련하여 Text format이 작동하는 방식과 자바 스크립트에서 wasm을 나타내는 객체 래퍼에 대해 설명합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 여기서 다루는 내용은 여러분이 웹어셈블리를 자바스크립트에 바로 불러오는 이전의 방법보다 훨씬 어렵습니다.(<a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">웹어셈블리를 자바스크립트 API에 사용하기</a> 참고), 하지만 여기서 배우는 내용을 통해 웹어셈블리 모듈을 작성해보면, 자바스크립트 라이브러리의 성능을 향상시킬수 있는 방법을 찾거나, 직접 웹어셈블리 컴파일러를 작성하는데 도움이 될 것입니다.</p> +</div> + +<h2 id="S-expressions">S-expressions</h2> + +<p>WebAssembly에서 바이너리와 텍스트 사이에 기본적인 코드 교환 방식을 모듈이라 칭합니다. 텍스트 형식에서는, 모듈은 하나의 큰 S-expressions로 표현됩니다. S-expressions는 트리를 텍스트 형식으로 묘사하는 오래되고 쉬운 방법입니다. 모듈을 모듈의 구조와 코드로 표현되는 노드의 트리를 작성하기 위한 수단으로 생각하시면 됩니다. 추상적인 문법을 가진 개발 언어와는 다르게 웹어셈블리의 트리는 단순하면서 일반적으로 많이 사용하는 방식으로 구성되었습니다. </p> + +<p> </p> + +<p>우선, S- expressions이 어떻게 보이는지 봅시다. 트리의 각 노드는 한 쌍의 괄호<code>( ... )</code> 안에 있습니다. 괄호 안의 첫 번째 레이블은 노드의 유형을 알려주고, 그 후에 속성 또는 하위 노드의 공백으로 구분 된 목록이 있습니다. 즉, WebAssembly S-expression을 의미합니다.</p> + +<pre>(module (memory 1) (func))</pre> + +<p>모듈이라는 최상위 노드와 2개의 자식 노드를 가진 트리로 구성되었습니다. 그리고 "메모리" 노드에서는 1이라는 속성으로 "함수" 노드를 지칭하였습니다. 이제 이 표현식이 가지는 의미를 간단하게 알아보겠습니다.</p> + +<p> </p> + +<h3 id="간단한_모듈">간단한 모듈</h3> + +<p>가장 간단하고, 작동 가능한 wasm 모듈 작성을 시작합니다.</p> + +<pre>(module)</pre> + +<p>이 모듈은 전체적으로 비어 있지만 올바르게 작동하는 모듈입니다.</p> + +<p>만약 이 모듈을 바이너리로 전환하면,(<a href="/ko/docs/WebAssembly/Text_format_to_wasm">웹어셈블리 텍스트 형식을 wasm으로 변환</a> 참조), 우리는 8바이트짜리 모듈 헤더를 <a href="http://webassembly.org/docs/binary-encoding/#high-level-structure">이진 형식</a>으로 보게 될 것입니다.</p> + +<pre>0000000: 0061 736d ; WASM_BINARY_MAGIC +0000004: 0d00 0000 ; WASM_BINARY_VERSION</pre> + +<h3 id="Adding_functionality_to_your_module">Adding functionality to your module</h3> + +<p>별로 흥미롭지 않은 모양이군요. 그렇다면 한번 실행 가능한 모듈을 작성해 보도록 하겠습니다.</p> + +<p> </p> + +<p>webassembly 모듈의 모든 코드는 다음과 같은 의사 코드 구조를 갖는 함수로 구성되어있습니다.</p> + +<pre>( func <signature> <locals> <body> )</pre> + +<ul> + <li>명칭(<strong>signature)</strong>은 함수에서 (인자를)받고 (반환 값)반환하는 형식을 정의합니다.</li> + <li>지역인수(<strong>locals)</strong>는 자바스크립트의 변수 같지만, 명시적으로 형식을 정의합니다.</li> + <li>본문(<strong>body)</strong>은 저수준 정의를 일렬로 나열한 목록입니다.</li> +</ul> + +<p>좀 다르게 보여도 다른 언어의 함수와 비슷합니다.</p> + +<p> </p> + +<h2 id="Signatures_and_parameters">Signatures and parameters</h2> + +<p>Signatures는 반환 형식 선언 목록 뒤에 오는 매개 변수 형식 선언 시퀀스입니다. 여기서 주목할 것은</p> + +<ul> + <li><code>(result)</code>가 없으면 함수는 아무것도 반환하지 않습니다.</li> + <li>현재 단 하나의 반환 형식을 가질 수 있으나, <a href="https://webassembly.org/docs/future-features#multiple-return">이후에</a> 여러개를 반환할 수 있게 될 것입니다.</li> +</ul> + +<p>각 인자로 wasm은 현재 4가지의 형식을 지원합니다.</p> + +<ul> + <li><code>i32</code>: 32-bit integer</li> + <li><code>i64</code>: 64-bit integer</li> + <li><code>f32</code>: 32-bit float</li> + <li><code>f64</code>: 64-bit float</li> +</ul> + +<p> </p> + +<p>하나의 인자를 받기 위해 <code>(param i32)</code>라고 작성하고, 반환 값을 받기 위해 <code>(result i32)</code>라고 작성합니다. 아래에 2개의 32비트 정수를 받고 64비트 부동소수를 반환하는 바이너리 함수를 작성하였습니다.</p> + +<pre>(func (param i32) (param i32) (result f64) ... )</pre> + +<p> </p> + +<p>signature 뒤에는 형식을 가진 locals를 나열합니다. <code>(local i32)</code>와 같이 씁니다. parameter는 기본적으로 locals에 속하며, 함수 호출 시 인자에 값을 전달받아 초기화 됩니다.</p> + +<h2 id="local와_parameter를_getting_setting_하기">local와 parameter를 getting, setting 하기</h2> + +<p>지역인수와 함수인자는 함수 본문에서 <code>get_local</code> 명령문과 <code>set_local</code> 명령문을 통해 가져오거나 설정할 수 있습니다.</p> + +<p>The <code>get_local</code>/<code>set_local</code> 명령문은 숫자로 이루어진 요소를 가져오거나 설정합니다. parameter가 선언 순서상 먼저 위치하며, 그다음 locals 순으로 되어 있습니다. </p> + +<pre>(func (param i32) (param f32) (local f64) + get_local 0 + get_local 1 + get_local 2)</pre> + +<p>본문 첫 줄에 <code>get_local 0</code> 명령어로 i32 매게변수를 받아내게 되며, <code>get_local 1</code> 명령어로 f32 매게변수를 받게 될 것입니다. 그리고 <code>get_local 2</code> 명렁어로 f64 지역변수를 받을 수 있습니다.</p> + +<p>여기서 하나의 문제가 생겼군요. 숫자로 된 순서대로 받자니 좀 혼란스럽고 짜증날 수 있습니다. 그래서 텍스트로 명명된 매게변수, 지역변수, 그리고 다른 요소들을 간편하게 달러문자 (<code>$</code>) 로 시작하여 선언할 수 있습니다.</p> + +<p>따라서 위에 작성한 함수 명칭을 아래와 같이 재구성할 수 있습니다.</p> + +<pre>(func (param $p1 i32) (param $p2 f32) (local $loc f64) …)</pre> + +<p>이렇게 작성하면 <code>get_local 0</code> 대신 <code>get_local $p1</code> 처럼 표현할 수 있습니다. (참고로 여기서 사용된 $인자는 바이너리로 변환 시 다시 숫자로 바뀌게 됩니다.)</p> + +<p> </p> + +<h2 id="Stack_machines">Stack machines</h2> + +<p>우리가 함수 본문을 작성하기 전에 한가지 얘기할 게 더 있습니다. 바로 <strong>스택머신(</strong><strong>stack machines)</strong>이죠. 브라우저가 효율적으로 컴파일할 때, wasm 실행부 안에는 스택 머신에 대한 규칙이 정의되어 있습니다. 간단하게 생각하면 모든 형식을 스택에 넣고, 특정한 <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code> 값을 스택에서 빼거나 넣는 식입니다.</p> + +<p>예를 들면, <code>get_local</code>은 지역변수 값을 스택에 푸시하도록 정의됩니다. 그리고 <code>i32.add</code> 명령어로 두 개의 <code>i32</code> 값을 빼낸 다음(암묵적으로 스택에 넣은 2 개의 값을 가져갑니다.), 이 둘의 합(2^32 형태)을 계산한 다음, 결과로 나온 i32 값을 다시 넣게 됩니다.</p> + +<p>함수가 호출되면, 이 함수는 빈 스택으로 시작하여 함수가 실행되는 동안 스택이 서서히 채우고 끝나면 다시 비워 버립니다. 아래 함수를 실행해 봅시다.</p> + +<pre>(func (param $p i32) + get_local $p + get_local $p + i32.add)</pre> + +<p>여기선 스택이 <code>i32</code> 값 딱 하나만 존재합니다. 그리고 (<code>$p + $p</code>) 식을 <code>i32.add</code> 명령어로 합한 결과가 나오죠. 결국 함수가 가지는 최후의 스택은 반환되는 값 하나 뿐입니다.</p> + +<p>웹어셈블리 내 스택 머신의 유효성 보증은 명확합니다. 만약 <code>(result f32)</code> 식을 정의하면, 스택은 반드시 끝에 단 하나의 <code>f32</code> 값만 남아야 합니다. 만약 결과 형식이 정의되어 있지 않다면, 스택은 비어 있어야 하죠.</p> + +<p> </p> + +<h2 id="첫번째_함수_본문">첫번째 함수 본문</h2> + +<p>전에 언급했듯이, 함수의 본문은 단순히 함수가 호출됐을 때 실행할 작업의 리스트입니다. 이전에 다루었던 것을 종합하면 아래와 같이 간단한 함수를 포함하는 모듈을 선언할 수 있습니다.</p> + +<pre>(module + (func (param $lhs i32) (param $rhs i32) (result i32) + get_local $lhs + get_local $rhs + i32.add + ) +)</pre> + +<p>이 함수는 2개의 매개변수를 갖고, 둘을 더하고, 그 결과를 반환합니다.</p> + +<p>함수의 본문에 넣을 수 있는 것들은 훨씬 많지만 지금은 간단하게 시작할겁니다. 당신은 앞으로 더 많은 예제들을 보게 될 것입니다. 사용 가능한 opcodes의 모든 목록을 보고싶다면 <a href="http://webassembly.org/docs/semantics/">webassembly.org 시맨틱 문서</a>에서 확인하세요.</p> + +<p> </p> + +<h3 id="함수_호출하기">함수 호출하기</h3> + +<p>함수는 혼자서 동작하지 않습니다. 호출해야합니다. ES2015 모듈에서와 마찬가지로 wasm 함수는 모듈 내부의 <code>export</code> 명령문에 의해 명시적으로 내보내야합니다.</p> + +<p>locals와 마찬가지로 함수는 기본적으로 인덱스로 식별되지만 편의상 이름을 지정할 수 있습니다. 먼저 <code>func</code> 키워드 바로 뒤에 달러 기호가 붙은 이름을 추가합니다.</p> + +<pre>(func $add … )</pre> + +<p>이제 내보내기 선언을 추가해야합니다. 다음과 같습니다.</p> + +<pre>(export "add" (func $add))</pre> + +<p>여기서 <code>add</code>는 자바 스크립트에서 함수가 식별되는 이름이며 <code>$add</code>는 모듈 내에서 어떤 WebAssembly 함수가 내보내지는지를 선택합니다.</p> + +<p>그래서 우리의 마지막 모듈은 (지금은) 다음과 같습니다.</p> + +<pre>(module + (func $add (param $lhs i32) (param $rhs i32) (result i32) + get_local $lhs + get_local $rhs + i32.add) + (export "add" (func $add)) +)</pre> + +<p>예제를 따라하려면 위의 모듈을 <code>add.wat</code>라는 파일에 저장 한 다음 wabt를 사용하여 <code>add.wasm</code>이라는 이진 파일로 변환하십시오 (자세한 내용은 <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> 참조).</p> + +<p>다음으로 바이너리를 <code>addCode</code> (<a href="/en-US/docs/WebAssembly/Fetching_WebAssembly_bytecode">Fetching WebAssembly Bytecode</a>에서 설명한대로)라는 형식화 된 배열에로드하고, 컴파일 및 인스턴스화 한 다음 자바 스크립트에서 <code>add</code> 함수를 실행합니다. (이제 <code>add()</code>는 인스턴스의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">exports</a></code> 속성에서 찾을 수 있습니다)</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('add.wasm')) +.then(obj => { + console.log(obj.instance.exports.add(1, 2)); // "3" +});</code></pre> + +<div class="note"> +<p><strong>참고:</strong> 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html">add.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/add.html">see it live also</a>). 인스턴스 함수에 대한 자세한 내용은 {{jsxref ( "WebAssembly.instantiate ()")}}를 참조하십시오.</p> +</div> + +<h2 id="기본_사항_둘러보기">기본 사항 둘러보기</h2> + +<p>이제는 기본 사항을 다뤘습니다. 더 많은 고급 기능을 살펴 보겠습니다.</p> + +<h3 id="같은_모듈_내에_있는_다른_함수_호출하기">같은 모듈 내에 있는 다른 함수 호출하기</h3> + +<p><code>call</code> 명령어는 인덱스 또는 이름이 지정된 단일 함수를 호출합니다. 예를 들어, 다음 모듈에는 두 개의 함수가 있습니다. 하나는 값 42를 반환하고, 다른 하나는 첫 번째 플러스 1을 호출 한 결과를 반환합니다.</p> + +<pre>(module + (func $getAnswer (result i32) + i32.const 42) + (func (export "getAnswerPlus1") (result i32) + call $getAnswer + i32.const 1 + i32.add))</pre> + +<div class="note"> +<p><strong>참고:</strong> <code>i32.const</code>는 단지 32 비트 정수를 정의하고 그것을 스택에 푸시합니다. 사용할 수있는 다른 유형의 <code>i32</code>를 바꿀 수 있으며 원하는 값으로 const 값을 변경할 수 있습니다 (여기서는 값을 <code>42</code>로 설정했습니다).</p> +</div> + +<p>In this example you’ll notice an <code>(export "getAnswerPlus1")</code> section, declared just after the <code>func</code> statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.</p> + +<p>이는 함수 밖에서, 예전과 같은 방식으로 모듈의 다른 곳에서 별도의 function 문을 포함하는 것과 기능적으로 동일합니다. 예 :</p> + +<pre>(export "getAnswerPlus1" (func $functionName))</pre> + +<p>위의 모듈을 호출하는 JavaScript 코드는 다음과 같습니다.</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('call.wasm')) +.then(obj => { + console.log(obj.instance.exports.getAnswerPlus1()); // "43" +});</code></pre> + +<div class="note"> +<p><strong>참고:</strong> 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">see it live also</a>). </p> +</div> + +<h3 id="자바스크립트에_함수_가져오기">자바스크립트에 함수 가져오기</h3> + +<p>우리는 이미 JavaScript에서 WebAssembly 함수를 호출하는 것을 보았습니다. 그러나 JavaScript 함수를 호출하는 WebAssembly는 어떻습니까? WebAssembly에는 실제로 JavaScript에 대한 기본 지식이 없지만 JavaScript 또는 Wasm 함수를 사용할 수있는 함수를 가져 오는 일반적인 방법이 있습니다. 예제를 살펴 보겠습니다.</p> + +<pre>(module + (import "console" "log" (func $log (param i32))) + (func (export "logIt") + i32.const 13 + call $log))</pre> + +<p>WebAssembly에는 2 단계 네임 스페이스가 있으므로 여기서 import 문은 콘솔<code>console</code>모듈에서 <code>log</code> 함수를 가져 오기를 요청한다는 의미입니다. 또한 앞서 소개 한 <code>call</code> 명령어를 사용하여 내 보낸 <code>logIt</code> 함수가 가져온 함수를 호출하는지 확인할 수 있습니다.</p> + +<p>가져온 함수는 일반적인 함수와 같습니다. WebAssembly 유효성 검사에서 정적으로 서명하는 시그니처가 있으며, 인덱스가 주어지며 이름을 지정하고 호출 할 수 있습니다.</p> + +<p>JavaScript 함수에는 서명 개념이 없으므로 임포트의 선언 된 서명에 관계없이 모든 JavaScript 함수를 전달할 수 있습니다. 모듈이 가져 오기를 선언하면 {{jsxref("WebAssembly.instantiate()")}}의 호출자는 해당 속성이있는 가져 오기 객체를 전달해야합니다.</p> + +<p>위의 경우 <code>importObject.console.log</code>가 JavaScript 함수 인 객체 (<code>importObject</code>라고 부름)가 필요합니다.</p> + +<p>이것은 다음과 같습니다.</p> + +<pre><code>var importObject = { + console: { + log: function(arg) { + console.log(arg); + } + } +}; + +WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject) +.then(obj => { + obj.instance.exports.logIt(); +});</code></pre> + +<div class="note"> +<p><strong>Note</strong>: 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html">logger.html</a>로 찾을 수 있습니다 (라이브(<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html">see it live also</a>)도 참조하십시오).</p> +</div> + +<p> </p> + +<h3 id="Declaring_globals_in_WebAssembly">Declaring globals in WebAssembly</h3> + +<p>WebAssembly는 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스 전체에서 JavaScript 및 가져오기 / 내보내기가 가능한 전역 변수 인스턴스를 생성 할 수 있습니다. 이는 여러 모듈을 동적으로 연결할 수 있으므로 매우 유용합니다.</p> + +<p>WebAssembly 텍스트 형식에서는 다음과 비슷합니다 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.wat">global.wat</a> 참조, 라이브 JavaScript 예제는 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">global.html</a> 참조).</p> + +<pre><code>(module + (global $g (import "js" "global") (mut i32)) + (func (export "getGlobal") (result i32) + (get_global $g)) + (func (export "incGlobal") + (set_global $g + (i32.add (get_global $g) (i32.const 1)))) +)</code></pre> + +<p>이것은 <code>global</code> 키워드를 사용하여 전역 값을 지정한다는 점을 제외하고는 이전에 보았던 것과 비슷하게 보이며 변수 mutable을 원하면 값의 데이터 유형과 함께 <code>mut</code> 키워드를 지정합니다.</p> + +<p>JavaScript를 사용하여 동일한 값을 만들려면 {{jsxref("WebAssembly.Global()")}} 생성자를 사용합니다.</p> + +<pre><code>const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);</code> +</pre> + +<p> </p> + +<h3 id="WebAssembly_Memory">WebAssembly Memory</h3> + +<p> </p> + +<p>위의 예로든 로깅 기능은 아주 끔찍합니다. 단 하나의 정수만 출력합니다!(이 정수가 뭔지 어떻게 알겠어요 그죠?) 텍스트 문자열을 기록하려면 어떻게 해야할까요. 문자열 및 기타 복잡한 데이터 유형을 처리하기 위해 WebAssembly는 메모리를 제공합니다. 메모리는 사용하면서 크기를 키울 수 있는 대량의 바이트 배열 입니다. WebAssembly에는 <a href="http://webassembly.org/docs/semantics/#linear-memory">linear memory</a>에서 읽고 쓰는 데 필요한 <code>i32.load</code> 및 <code>i32.store</code>와 같은 지침이 들어 있습니다.</p> + +<p>JavaScript의 관점에서 볼 때 크기가 조정 가능한 큰 {{domxref("ArrayBuffer")}} 안에 메모리가 모두있는 것처럼 보입니다. 이는 말 그대로 asm.js와 함께 사용해야함을 의미합니다. (크기 조정할 수 없다는 점을 제외하고요. asm.js <a href="http://asmjs.org/spec/latest/#programming-model">Programming model</a>을 참고 하세요.).</p> + +<p>따라서 문자열은 이 선형 메모리 내부의 있는 sequence of bytes라고 할 수 있습니다. 우리가 적절한 바이트 문자열을 메모리에 썼다고 가정 해 보고 어떻게 그 문자열을 JavaScript로 전달하는지 보겠습니다.</p> + +<p> </p> + +<p>핵심은 자바 스크립트가 {{jsxref("WebAssembly.Memory()")}} 인터페이스를 통해 WebAssembly 선형 메모리 인스턴스를 생성하고 연관된 인스턴스를 사용하여 기존 메모리 인스턴스에 액세스 할 수 있다는 것입니다 (현재 모듈 인스턴스 당 하나만 가질 수 있음). 메모리 인스턴스에는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">buffer</a></code> getter가 있습니다.이 buffer getter는 전체 선형 메모리를 가리키는 <code>ArrayBuffer</code>를 반환합니다.</p> + +<p> </p> + +<p>예를 들어 JavaScript의 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> 메소드를 통해 메모리 인스턴스를 늘릴 수도 있습니다. grow가 발생하면 <code>ArrayBuffer</code>s는 크기를 변경할 수 없기 때문에 현재의 <code>ArrayBuffer</code>가 분리되고 더 큰 새 메모리를 가리 키도록 새 <code>ArrayBuffer</code>가 만들어집니다. 즉, JavaScript에 문자열을 전달하기 위해 수행해야하는 모든 작업은 길이를 나타내는 방법과 함께 선형 메모리에있는 문자열의 오프셋을 전달하는 것입니다.</p> + +<p> </p> + +<p>문자열 자체의 길이를 인코딩하는 방법에는 여러 가지가 있습니다 (예 : C 문자열). 여기서 간단히하기 위해 offset과 length를 매개 변수로 전달합니다.</p> + +<pre><code>(import "console" "log" (func $log (param i32) (param i32)))</code> +</pre> + +<p> </p> + +<p>자바 스크립트 측면에서 우리는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder">TextDecoder API</a>를 사용하여 바이트를 자바 스크립트 문자열로 쉽게 디코딩 할 수 있습니다. (여기서는 <code>utf8</code>을 지정하지만 다른 많은 인코딩이 지원됩니다.)</p> + +<pre><code>function consoleLogString(offset, length) { + var bytes = new Uint8Array(memory.buffer, offset, length); + var string = new TextDecoder('utf8').decode(bytes); + console.log(string); +}</code> +</pre> + +<p> </p> + +<p>이제 남은 부분은 <code>consoleLogString</code>이 WebAssembly <code>memory</code>에 액세스하는 부분입니다. WebAssembly는 JavaScript로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> 객체를 만들고 WebAssembly 모듈에서 메모리를 가져 오거나 WebAssembly 모듈에서 메모리를 만들어 JavaScript로 내보낼 수 있는 유연성을 제공합니다.</p> + +<p> </p> + +<p> </p> + +<p>간단히하기 위해 JavaScript로 작성한 다음 WebAssembly로 가져와 봅시다. 우리의 <code>import</code>statement는 다음과 같이 작성됩니다 :</p> + +<pre><code>(import "js" "mem" (memory 1))</code></pre> + +<p><code>1</code>은 가져온 메모리에 최소 1 페이지의 메모리가 있어야 함을 나타냅니다 (WebAssembly에서 페이지를 64KB로 정의 함).</p> + +<p>문자열 "Hi"를 인쇄하는 완전한 모듈을 보겠습니다. 일반적인 컴파일 된 C 프로그램에서는 함수를 호출하여 문자열에 대한 메모리를 할당하지만 여기에 자체 어셈블리를 작성하고 전체 선형 메모리를 소유하기 때문에 <code>data</code> 섹션을 사용하여 전역 메모리에 문자열 내용을 쓸 수 있습니다. 데이터 섹션은 바이트의 문자열이 인스턴스화 시간에 주어진 오프셋에 쓰여질 수 있도록 하며 원시 실행 가능 형식의 <code>.data</code>sections와 유사합니다.</p> + +<p>최종 wasm 모듈을 확인하겠습니다.</p> + +<pre><code>(module + (import "console" "log" (func $log (param i32 i32))) + (import "js" "mem" (memory 1)) + (data (i32.const 0) "Hi") + (func (export "writeHi") + i32.const 0 ;; pass offset 0 to log + i32.const 2 ;; pass length 2 to log + call $log))</code></pre> + +<div class="note"> +<p><strong>Note</strong>: 위와 같이 WebAssembly 파일의 주석을 허용하는 두 개의 세미콜론 구문 (<code>;;</code>)을 확인하십시오.</p> +</div> + +<p>자바 스크립트에서 우리는 1 페이지 메모리를 만들고 그것을 전달할 수 있습니다. 결과적으로 "Hi"가 콘솔에 출력됩니다 :</p> + +<pre><code>var memory = new WebAssembly.Memory({initial:1}); + +var importObject = { console: { log: consoleLogString }, js: { mem: memory } }; + +WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject) +.then(obj => { + obj.instance.exports.writeHi(); +});</code></pre> + +<div class="note"> +<p><strong>Note</strong>: 깃허브에서 소스 전체버전을 확인할 수 있습니다. <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html">logger2.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html">also see it live</a>).</p> +</div> + +<h3 id="WebAssembly_tables">WebAssembly tables</h3> + +<p>WebAssembly 텍스트 형식 둘러보기를 마무리하려면 WebAssembly에서 가장 복잡하고 어려운 부분 인 <strong>tables</strong>을 살펴 보겠습니다. 테이블은 기본적으로 WebAssembly 코드의 인덱스를 통해 액세스 할 수 있는 크기 조정이 가능한 참조 배열입니다.</p> + +<p>왜 테이블이 필요한지를 알기 위해서는 앞서 보았던 <code>call</code> 명령어 ({{anch("Calling functions from other functions in the same module")}} 참고)가 필요합니다. 이 명령어는 정적 함수 인덱스를 취하며 따라서 오직 하나의 함수를 호출합니다. 그러나 호출 수신자가 런타임 값인 경우에는 어떻게 해야할까요?</p> + +<ul> + <li>자바 스크립트에서 항상 볼 수 있습니다. 함수는 최상위 클래스 입니다.</li> + <li>C/C++에서, function pointers와 함께 볼 수 있습니다.</li> + <li>C++에서, virtual functions와 함께 볼 수 있습니다.</li> +</ul> + +<p>WebAssembly에는 이를 구현하기 위해 일종의 호출 명령어가 필요했기 때문에 동적 함수 피연산자를 사용하는 <code>call_indirect</code>를 구현했습니다. 문제는 WebAssembly에서 피연산자를 지정해야하는 유일한 유형은 (현재) <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code>라는 것입니다.</p> + +<p>WebAssembly는 <code>anyfunc</code> 유형을 추가 할 수 있습니다 (유형이 모든 서명의 기능을 보유 할 수 있기 때문에 "any"가 붙어있습니다). 그러나 안타깝게도 이 <code>anyfunc</code> 유형은 보안상의 이유로 선형 메모리에 저장할 수 없습니다. 선형 메모리는 저장된 값의 원시 내용을 바이트로 표시하므로 wasm 내용이 임의로 웹에서 허용 하면 안되는 원시 함수 주소를 노출하거나 손상시킬 수 있습니다.</p> + +<p> </p> + +<p>해결책은 테이블에 함수 참조를 저장하고 대신 테이블 인덱스를 전달하는 것입니다.이 인덱스는 i32 값입니다. <code>call_indirect</code>의 피연산자는 단순히 i32 인덱스 값일 수 있습니다.</p> + +<p> </p> + +<h4 id="Defining_a_table_in_wasm">Defining a table in wasm</h4> + +<p>그러면 우리 테이블에 함수를 어떻게 배치할까요? <code>data</code> 섹션을 사용하여 선형 메모리 영역을 바이트로 초기화하는 것처럼 <code>elem</code> 섹션을 사용하여 함수가있는 테이블 영역을 초기화 할 수 있습니다.</p> + +<pre><code>(module + (table 2 anyfunc) + (elem (i32.const 0) $f1 $f2) + (func $f1 (result i32) + i32.const 42) + (func $f2 (result i32) + i32.const 13) + ... +)</code></pre> + +<ul> + <li><code>(table 2 anyfunc)</code>에서 2는 테이블의 초기 크기 (즉, 두 개의 참조를 저장함)이고 <code>anyfunc</code>는 이러한 참조의 요소 유형이 "any signature가 있는 함수"로 선언합니다. WebAssembly의 현재 반복에서는 이것이 유일하게 허용되는 요소 유형이지만, 앞으로 더 많은 요소 유형이 추가 될 것입니다.</li> + <li>함수 (<code>func</code>) 섹션은 다른 선언 된 wasm 함수와 같습니다. 이것들은 테이블에서 참조 할 함수입니다 (예를 들어, 각각은 상수 값을 반환합니다). 섹션이 선언 된 순서는 중요하지 않습니다. 여기서는 함수를 어디에서나 선언 할 수 있으며 여전히 <code>elem</code> 섹션에서 함수를 참조 할 수 있습니다.</li> + <li><code>elem</code> 섹션은 모듈의 모든 함수 서브 세트를 순서에 상관없이 나열하며 중복을 허용 합니다. 이것은 참조되는 순서대로 테이블에서 참조 할 목록입니다.</li> + <li><code>elem</code> 섹션 내의 <code>(i32.const 0)</code> 값은 오프셋입니다. 이것은 섹션의 시작 부분에서 선언해야하며, 테이블 함수 참조가 채워지기 시작하는 인덱스를 지정합니다. 여기서 0과 2의 크기를 지정 했으므로 (위 참조) 인덱스 0과 1에서 두 개의 참조를 채울 수 있습니다. 오프셋 1에서 참조를 쓰고 싶다면 <code>(i32.const 1)</code>이고 테이블 크기는 3이어야합니다.</li> +</ul> + +<p> </p> + +<div class="note"> +<p><strong>Note</strong>: 초기화되지 않은 요소에는 기본 throw-on-call 값이 제공됩니다.</p> +</div> + +<p>자바 스크립트에서 이와 같은 테이블 인스턴스를 생성하는 호출은 다음과 같습니다.</p> + +<pre><code>function() { + // table section + var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"}); + + // function sections: + var f1 = function() { … } + var f2 = function() { … } + + // elem section + tbl.set(0, f1); + tbl.set(1, f2); +};</code></pre> + +<p> </p> + +<h4 id="Using_the_table">Using the table</h4> + +<p>우리가 사용 할 테이블을 정의했습니다. 다음 코드 섹션을 통해 테이블을 사용 할 수 있습니다.</p> + +<pre><code>(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail +(func (export "callByIndex") (param $i i32) (result i32) + get_local $i + call_indirect (type $return_i32))</code></pre> + +<ul> + <li><code>(type $return_i32 (func (param i32)))</code> 블록은 참조 이름과 함께 유형을 지정합니다. 이 유형은 나중에 테이블 함수 참조 호출의 유형 점검을 수행 할 때 사용됩니다. 여기서 우리는 참조가 <code>i32</code>를 결과로 반환하는 함수라고 코드를 작성했습니다.</li> + <li>다음으로, <code>callByIndex</code>라는 이름으로 익스포트 될 함수를 정의합니다. 이것은 하나의 <code>i32</code>를 매개 변수로 사용하며, 인수 이름 <code>$i</code>가 주어집니다.</li> + <li>Inside the function, we add one value to the stack — whatever value is passed in as the parameter <code>$i</code>. 매개 변수 <code>$i</code>로 전달되는 값이 무엇이든간에 함수 내에서 스택에 하나의 값을 추가합니다.</li> + <li>마지막으로, <code>call_indirect</code>를 사용하여 테이블에서 함수를 호출합니다. 스택에서 <code>$i</code>의 값을 암시 적으로 팝합니다. 이것의 최종 결과는 <code>callByIndex</code> 함수가 테이블에서 <code>$i</code>'th 함수를 호출한다는 것입니다.</li> +</ul> + +<p> </p> + +<p>다음과 같이 <code>call_indirect</code> 매개 변수를 명령 호출 중에 명시 적으로 선언 할 수도 있습니다.</p> + +<pre><code>(call_indirect (type $return_i32) (get_local $i))</code></pre> + +<p>자바 스크립트와 같이 더 높은 수준의 표현력있는 언어에서는 함수가 포함 된 배열 (또는 더 많은 가능성이있는 객체)을 사용하여 동일한 작업을 수행한다고 상상할 수 있습니다. 의사 코드는 <code>tbl[i]()</code>와 유사합니다.</p> + +<p> </p> + +<p> </p> + +<p>다시 typechecking을 보면 WebAssembly가 typechecked되고 <code>anyfunc</code>가 "모든 함수 서명"을 의미하기 때문에 callee에서 호출 수신자의 추정 서명을 제공해야하므로 <code>$return_i32</code> 유형이 포함되어 <code>i32</code>를 반환하는 함수가 예상됩니다. 호출 수신자와 일치하는 서명이 없으면 (대신 <code>f32</code>가 반환 됨) {{jsxref("WebAssembly.RuntimeError")}}가 발생합니다.</p> + +<p><code>call_indirect</code>와 호출하는 테이블을 연결하는 것은 무엇입니까? 대답은 모듈 인스턴스 당 하나의 테이블 만 허용된다는 것입니다. <code>call_indirect</code>가 암시 적으로 호출하는 것입니다. 향후, 여러 테이블이 허용 될 때, 우리는 또한 어떤 종류의 테이블 식별자를 지정할 필요가있습니다</p> + +<p> </p> + +<p> </p> + +<pre><code>call_indirect $my_spicy_table (type $i32_to_void)</code></pre> + +<p>전체 모듈은 모두 이와 같이 보이며 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat">wasm-table.wat</a> 예제 파일에서 찾을 수 있습니다.</p> + +<p> </p> + +<pre><code>(module + (table 2 anyfunc) + (func $f1 (result i32) + i32.const 42) + (func $f2 (result i32) + i32.const 13) + (elem (i32.const 0) $f1 $f2) + (type $return_i32 (func (result i32))) + (func (export "callByIndex") (param $i i32) (result i32) + get_local $i + call_indirect (type $return_i32)) +)</code></pre> + +<p> </p> + +<p>다음 자바 스크립트를 사용하여 웹 페이지에로드합니다.</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('wasm-table.wasm')) +.then(obj => { + console.log(obj.instance.exports.callByIndex(0)); // returns 42 + console.log(obj.instance.exports.callByIndex(1)); // returns 13 + console.log(obj.instance.exports.callByIndex(2)); // returns an error, because there is no index position 2 in the table +});</code></pre> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html">wasm-table.html</a>에서 이 예제를 확인할 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html">see it live also</a>).</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Memory와 마찬가지로 테이블은 자바 스크립트 (<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table">WebAssembly.Table()</a></code> 참고)와 다른 wasm 모듈로 가져 오거나 다른 wasm 모듈에서 가져올 수도있다.</p> +</div> + +<h3 id="Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking</h3> + +<p> </p> + +<p>JavaScript는 함수 참조에 대한 모든 액세스 권한을 갖기 때문에 Grow (), get () 및 set () 메서드를 통해 JavaScript에서 Table 객체를 변형 할 수 있습니다. WebAssembly에서 참조 유형을 가져 오면 WebAssembly 코드는 get_elem / set_elem 명령어로 테이블 자체를 변형 할 수 있습니다.</p> + +<p>테이블은 변경 가능하기 때문에 정교한 로드 시간 및 런타임 <a href="http://webassembly.org/docs/dynamic-linking">dynamic linking schemes</a>를 구현하는 데 사용할 수 있습니다. 프로그램이 동적으로 링크되면 여러 인스턴스가 동일한 메모리 및 테이블을 공유합니다. 이것은 여러 컴파일 된 <code>.dll</code>이 단일 프로세스의 주소 공간을 공유하는 기본 응용 프로그램과 대칭입니다.</p> + +<p> </p> + +<p>이 작업을 보려면 Memory 객체와 Table 객체가 포함 된 단일 가져 오기 객체를 만들고 동일한 가져 오기 객체를 여러 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate">instantiate()</a></code> 호출에 전달합니다.</p> + +<p><code>.wat</code> 예제는 다음과 같습니다.</p> + +<p><code>shared0.wat</code>:</p> + +<pre><code>(module + (import "js" "memory" (memory 1)) + (import "js" "table" (table 1 anyfunc)) + (elem (i32.const 0) $shared0func) + (func $shared0func (result i32) + i32.const 0 + i32.load) +)</code></pre> + +<p><code>shared1.wat</code>:</p> + +<pre><code>(module + (import "js" "memory" (memory 1)) + (import "js" "table" (table 1 anyfunc)) + (type $void_to_i32 (func (result i32))) + (func (export "doIt") (result i32) + i32.const 0 + i32.const 42 + i32.store ;; store 42 at address 0 + i32.const 0 + call_indirect (type $void_to_i32)) +)</code></pre> + +<p>작업은 다음과 같습니다.</p> + +<ol> + <li><code>shared0func</code> 함수는 <code>shared0.wat</code>에 정의되어 있으며 가져온 테이블에 저장됩니다.</li> + <li>이 함수는 값 <code>0</code>을 포함하는 상수를 작성한 다음 <code>i32.load</code> 명령을 사용하여 제공된 메모리 색인에 포함 된 값을로드합니다. 제공된 인덱스는 <code>0</code>입니다 - 다시 암시 적으로 스택에서 이전 값을 팝합니다. 따라서 <code>shared0func</code>는 메모리 인덱스 <code>0</code>에 저장된 값을로드하고 반환합니다.</li> + <li><code>shared1.wat</code>에서 <code>doIt</code>이라는 함수를 내 보냅니다.이 함수는 <code>0</code>과 <code>42</code> 값을 포함하는 두 개의 상수를 만든 다음 <code>i32.store</code>를 호출하여 제공된 값을 가져온 메모리의 제공된 색인에 저장합니다. 다시 말하지만, 스택에서이 값을 암시 적으로 팝하므로 메모리 인덱스 <code>0</code>에 값 <code>42</code>를 저장합니다.</li> + <li>함수의 마지막 부분에서 값 0으로 상수를 만든 다음이 인덱스 0에서 <code>shared0func</code>라는 함수를 호출하고 <code>shared0.wat</code>의 <code>elem</code> 블록에 먼저 저장합니다.</li> + <li><code>shared0func</code>가 호출되면 <code>shared1.wat</code>의 <code>i32.store</code> 명령을 사용하여 메모리에 저장된 <code>42</code>를 로드합니다.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: 위의 표현식은 암시 적으로 스택의 값을 다시 표시하지만 명령 호출 내에서 명시 적으로 이를 선언 할 수 있습니다. 예를 들면 다음과 같습니다.:</p> + +<pre><code>(i32.store (i32.const 0) (i32.const 42)) +(call_indirect (type $void_to_i32) (i32.const 0))</code> +</pre> +</div> + +<p>어셈블리로 변환 한 후 다음 코드를 통해 JavaScript에서 <code>shared0.wasm</code>과 <code>shared1.wasm</code>을 사용합니다.</p> + +<pre><code>var importObj = { + js: { + memory : new WebAssembly.Memory({ initial: 1 }), + table : new WebAssembly.Table({ initial: 1, element: "anyfunc" }) + } +}; + +Promise.all([ + WebAssembly.instantiateStreaming(fetch('shared0.wasm'), importObj), + WebAssembly.instantiateStreaming(fetch('shared1.wasm'), importObj) +]).then(function(results) { + console.log(results[1].instance.exports.doIt()); // prints 42 +});</code> +</pre> + +<p>컴파일되는 각 모듈은 동일한 메모리 및 테이블 객체를 가져와 동일한 선형 메모리 및 테이블 "주소 공간"을 공유 할 수 있습니다.</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html">shared-address-space.html</a>에서 예제를 확인할 수 있습니다.(<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html">see it live also</a>).</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>WebAssembly 텍스트 형식의 주요 구성 요소에 대한 높은 수준의 둘러보기와 WebAssembly JS API에 반영되는 방법을 마무리합니다.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>포함되지 않은 주요 내용은 함수 본문에서 발생할 수있는 모든 명령의 포괄적 인 목록입니다. 각 명령어의 처리 방법은 <a href="http://webassembly.org/docs/semantics">WebAssembly semantics</a>을 참조하십시오.</li> + <li>spec 해석기로 구현된 <a href="https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax">grammar of the text format</a>도 참조하십시오.</li> +</ul> + +<p> </p> diff --git a/files/ko/webassembly/using_the_javascript_api/index.html b/files/ko/webassembly/using_the_javascript_api/index.html new file mode 100644 index 0000000000..c7d4cfc10f --- /dev/null +++ b/files/ko/webassembly/using_the_javascript_api/index.html @@ -0,0 +1,307 @@ +--- +title: 웹어셈블리의 자바스크립트 API 사용하기 +slug: WebAssembly/Using_the_JavaScript_API +tags: + - API + - 웹어셈블리 + - 자바스크립트 + - 컴파일 +translation_of: WebAssembly/Using_the_JavaScript_API +--- +<div>{{WebAssemblySidebar}}</div> + +<div></div> + +<p class="summary"><a href="/ko/docs/WebAssembly/C_to_wasm">Emscripten과 같은 도구를 사용하여 다른 언어의 모듈을 컴파일</a>했거나 <a href="/ko/docs/WebAssembly/Loading_and_running">코드를 직접로드하여 실행</a> 해봤다면 다음 단계에서는 WebAssembly JavaScript API의 다른 기능을 사용하는 방법에 대해 자세히 알아 봅니다. </p> + +<div class="note"> +<p><strong>Note</strong>: 여기에서 언급한 기본 개념에 익숙하지 않거나 더 많은 설명이 필요한 경우 <a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a>를 먼저 읽어보세요.</p> +</div> + +<h2 id="몇가지_간단한_예제">몇가지 간단한 예제</h2> + +<p>WebAssembly JavaScript API를 사용하는 방법과 웹 페이지에서 wasm 모듈을 로드하는 방법을 설명하는 몇 가지 예제를 실행 해 보겠습니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 샘플 코드는 <a href="https://github.com/mdn/webassembly-examples">webassembly-examples</a> GitHub repo에서 찾을 수 있습니다.</p> +</div> + +<h3 id="예제_준비하기">예제 준비하기</h3> + +<ol> + <li>먼저 wasm 모듈이 필요합니다! <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> 파일을 로컬 컴퓨터의 새 디렉토리에 저장하세요.</li> + <li>다음으로, wasm 파일과 동일한 디렉토리에 index.html이라는 간단한 HTML 파일을 작성해보세요 (<a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">simple template</a>을 참고하면 쉽습니다.)</li> + <li>이제 여기서 무슨 일이 벌어지는지 이해하기 쉽도록 하기위해 wasm 모듈 (<a href="/ko/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Converting WebAssembly format to wasm</a>을 참고)의 텍스트 표현을 살펴 보겠습니다. + <pre><code>(module + (func $i (import "imports" "imported_func") (param i32)) + (func (export "exported_func") + i32.const 42 + call $i))</code></pre> + </li> + <li>두 번째 줄에서 2단계의 import 네임스페이스가 있습니다. 즉, 내부 기능 <code>$i</code>는 <code>imports.imported_func</code>에서 가져옴을 알 수 있습니다. wasm 모듈로 가져올 객체를 작성할 때 JavaScript에서 이 2단계 네임스페이스를 반영해야 합니다.<br> + HTML 파일에 <code><script></script></code>요소를 만들고 다음 코드를 추가합니다. + <pre><code>var importObject = { + imports: { imported_func: arg => console.log(arg) } +};</code></pre> + </li> +</ol> + +<h3 id="웹어셈블리_모듈을_스트리밍하기">웹어셈블리 모듈을 스트리밍하기</h3> + +<p>Firefox 58의 새로운 기능으로 기본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화하는 기능이 있습니다. 이는 {{jsxref("WebAssembly.compileStreaming()")}} 와 {{jsxref("WebAssembly.instantiateStreaming()")}} 메소드를 사용하여 수행됩니다. 이 메소드는 바이트 코드를 직접 <code>Module</code>/<code>Instance</code> 인스턴스로 변환 할 수 있기 때문에 스트리밍이 아닌 방식의 메소드보다 작성이 쉽습니다. 별도로 {{domxref("Response")}}를 {{domxref("ArrayBuffer")}}로 호출할 필요성을 없애줍니다.</p> + +<p>이 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모와 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">view it live</a>를 보세요) <code>instantiateStreaming()</code>을 사용하여 wasm 모듈을 가져오고, JavaScript 함수를 가져오고, 컴파일하고 인스턴스화하며, 내 보낸 함수에 액세스하는 방법을 한번에 보여줍니다.</p> + +<p>첫 번째 블록 아래에 다음을 추가하십시오.</p> + +<pre><code>WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func());</code></pre> + +<p>그 결과, 내 보낸 WebAssembly 함수 인 <code>export_func</code>를 호출합니다.이 함수는 가져온 JavaScript 함수 <code>imported_func</code>를 호출합니다.이 함수는 WebAssembly 인스턴스 (42) 내부에 제공된 값을 콘솔에 기록합니다. 지금 예제 코드를 저장하고 WebAssembly를 지원하는 브라우저에 로드하면 이를 실제로 볼 수 있습니다!</p> + +<div class="note"> +<p><strong>Note</strong>: 이것은 매우 난해하고, 길고 지루한 예이지만 웹 응용프로그램에서 JavaScript와 함께 WebAssembly 코드를 사용하여 가능한 것을 설명하는 데 도움이 됩니다. 우리가 다른 곳에서 언급했듯이, WebAssembly는 JavaScript를 대체하려는 것이 아니라, 그 두 개가 상호 작용하여 서로의 강점을 이끌어 낼수 있습니다.</p> +</div> + +<h3 id="스트리밍하지_않고_웹어셈블리_모듈_로드">스트리밍하지 않고 웹어셈블리 모듈 로드</h3> + +<p>위에서 설명한 스트리밍 방법을 사용할 수 없거나 사용하지 않으려면 스트리밍하지 않는 메서드{{jsxref("WebAssembly.compile")}} / {{jsxref("WebAssembly.instantiate")}}를 대신 사용할 수 있습니다.</p> + +<p>이 메소드는 바이트 코드에 직접 액세스하지 않으므로 wasm 모듈을 컴파일 / 인스턴스화하기 전에 응답을 {{domxref ( "ArrayBuffer")}}로 변환하는 추가 단계가 필요합니다.</p> + +<p>이와 동등한 코드는 다음과 같습니다.</p> + +<pre><code>fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.instantiate(bytes, importObject) +).then(results => { + results.instance.exports.exported_func(); +});</code></pre> + +<h3 id="개발자_도구에서_웹어셈블리_보기">개발자 도구에서 웹어셈블리 보기</h3> + +<p>Firefox 54+에서 Developer Tool Debugger Panel에는 웹 페이지에 포함된 모든 wasm 코드의 텍스트 표현을 표시하는 기능이 있습니다. Debugger 패널로 이동하여 "wasm://" 항목을 클릭할 수 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15823/wasm-debug.png" style="display: block; height: 317px; margin: 0px auto; width: 1019px;"></p> + +<p>Firefox에서 WebAssembly를 텍스트로 보는 것 외에도 텍스트 형식을 사용하여 개발자는 WebAssembly를 디버깅할 수 있습니다(breakpoint, callstack 검사, 단일 단계 검사 등). 비디오 미리 보기는 <span class="watch-title" dir="ltr" id="eow-title" title="WebAssembly debugging with Firefox DevTools"><a href="https://www.youtube.com/watch?v=R1WtBkMeGds">WebAssembly debugging with Firefox DevTools</a></span>을 참조하십시오.</p> + +<h2 id="메모리_인스턴스">메모리 인스턴스</h2> + +<p>WebAssembly의 저수준 메모리 모델에서 메모리는 <a href="http://webassembly.org/docs/semantics/#linear-memory">Linear Memory</a>라고하는 형식이 지정되지 않은 바이트의 연속 범위로 표시되며 <a href="http://webassembly.org/docs/semantics/#linear-memory-accesses">load and store instructions</a>에 의해 모듈 내부에서 읽고 쓰여집니다. 이 메모리 모델에서 모든 load 또는 store는 linear memory의 모든 바이트에 액세스 할 수 있으므로 포인터와 같은 C / C ++ 개념을 충실하게 표현하는 데 필요합니다.</p> + +<p>그러나 네이티브 C / C ++ 프로그램과 달리 사용 가능한 메모리 범위가 전체 프로세스에 걸쳐있는 경우 특정 WebAssembly 인스턴스가 액세스 할 수있는 메모리는 WebAssembly 메모리 객체에 포함 된 특정 범위 (잠재적으로 매우 작은 범위)로 제한됩니다. 이를 통해 단일 웹 응용 프로그램은 WebAssembly를 내부적으로 사용하는 여러 독립 라이브러리를 사용하여 서로 완전히 격리 된 별도의 메모리를 가질 수 있습니다.</p> + +<p>자바 스크립트에서 Memory 인스턴스는 크기를 조정할 수있는 ArrayBuffer로 생각할 수 있으며, ArrayBuffers와 마찬가지로 하나의 웹 앱에서 많은 독립적 인 Memory 객체를 만들 수 있습니다. {{jsxref("WebAssembly.Memory()")}} 생성자를 사용하여 생성 할 수 있습니다. 생성자는 인수로 초기 크기와 (선택적으로) 최대 크기를 인수로 취합니다.</p> + +<p>빠르게 예제를 살펴봅시다.</p> + +<ol> + <li> + <p>새로운 간단한 HTML 페이지를 만들고 (<a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">simple template</a>을 복사하십시오) <code>memory.html</code>을 호출하십시오. <code><script></script></code> 요소를 페이지에 추가하십시오.</p> + </li> + <li> + <p>이제 스크립트 맨 위에 다음 행을 추가하여 메모리 인스턴스를 만듭니다.</p> + + <pre><code>var memory = new WebAssembly.Memory({initial:10, maximum:100});</code></pre> + + <p><code>initial</code> 및 <code>maximum</code> 단위는 WebAssembly 페이지이며 크기는 64KB로 고정되어 있습니다. 즉, 위 메모리 인스턴스의 초기 크기는 640KB이고 최대 크기는 6.4MB입니다.</p> + + <p>WebAssembly 메모리는 ArrayBuffer를 반환하는 버퍼 getter / setter를 제공함으로써 바이트를 노출합니다. 예를 들어 선형 메모리의 첫 번째 단어에 직접 42를 쓰려면 다음과 같이하면됩니다.</p> + + <pre><code>new Uint32Array(memory.buffer)[0] = 42;</code></pre> + + <p>그런 다음 다음을 사용하여 동일한 값을 반환 할 수 있습니다.</p> + + <pre><code>new Uint32Array(memory.buffer)[0]</code></pre> + </li> + <li> + <p>데모에서 지금 사용해보십시오. 지금까지 추가 한 내용은 저장하고 브라우저에로드 한 다음 JavaScript 콘솔에 위의 두 줄을 입력 해보십시오.</p> + </li> +</ol> + +<h3 id="메모리의_확장">메모리의 확장</h3> + +<p>메모리 인스턴스는 {{jsxref("Memory.prototype.grow()")}}를 호출하여 확장 할 수 있습니다. 여기서 인수는 WebAssembly 페이지 단위로 입력합니다.</p> + +<pre><code>memory.grow(1);</code></pre> + +<p>메모리 인스턴스 생성시 최대 값이 제공되었을 때 이 최대 값을 초과하여 증가하려고 시도하면 {{jsxref("WebAssembly.RangeError")}} 예외가 발생합니다. 엔진은 이 상한값을 이용하여 미리 메모리를 예약하므로 크기를 보다 효율적으로 조정할 수 있습니다.</p> + +<p>{{domxref("ArrayBuffer")}}의 byteLength는 불변이므로, {{jsxref("Memory.prototype.grow()")}} 오퍼레이션이 성공하면, 버퍼 getter는 (새로운 byteLength로) 새로운 ArrayBuffer 객체를 돌려 주어, 이전의 모든 ArrayBuffer 객체는 「detached」가되거나, 이전에 가리켰던 기본 메모리와의 접속이 끊어집니다.</p> + +<p>함수와 마찬가지로 선형 메모리를 모듈 내부에서 정의하거나 가져올 수 있습니다. 마찬가지로 모듈은 메모리를 선택적으로 내보낼수도 있습니다. 즉, JavaScript는 새 WebAssembly.Memory를 만들고 가져 오기로 전달하거나 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>를 통해 메모리 내보내기를 하여 WebAssembly 인스턴스의 메모리에 액세스 할 수 있습니다.</p> + +<h3 id="심화된_메모리_예제">심화된 메모리 예제</h3> + +<p>앞서 정의한 메모리 인스턴스를 가져 와서 정수 배열로 채운 다음 더 합친 WebAssembly 모듈을 통해 더 많은 관련 메모리 예제를 살펴봄으로써 위의 내용을 보다 자세히 알아 보겠습니다. <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/memory.wasm">memory.wasm</a>에서 찾을 수 있습니다.</p> + +<ol> + <li> + <p><code>memory.wasm</code>을 이전과 같이 같은 폴더에 복사합니다.</p> + + <div class="note"> + <p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat">memory.wat</a>에서 모듈의 텍스트 표현을 볼 수 있습니다.</p> + </div> + </li> + <li> + <p><code>memory.html</code> 샘플 파일로 돌아가서 이전처럼 wasm 모듈을 가져 와서 컴파일하고 인스턴스화합니다. - 스크립트의 맨 아래에 다음을 추가하세요.</p> + + <pre><code>WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) +.then(results => { + // add code here +});</code></pre> + </li> + <li> + <p>이 모듈은 메모리를 내보내므로 instance라는 이 모듈의 인스턴스가 export 된 함수 <code>accumulate()</code>를 사용하여 모듈 인스턴스의 선형 메모리 (<code>mem</code>)에 직접 입력 배열을 만들고 채울 수 있습니다. 코드에 다음을 추가하십시오.</p> + + <pre><code>var i32 = new Uint32Array(memory.buffer); + +for (var i = 0; i < 10; i++) { + i32[i] = i; +} + +var sum = results.instance.exports.accumulate(0, 10); +console.log(sum);</code></pre> + </li> +</ol> + +<p>Memory 객체의 버퍼 (<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>)에서 {{domxref ("Uint32Array")}} 뷰를 만드는 방법에 유의하십시오.</p> + +<p>메모리 가져 오기는 함수 가져 오기와 마찬가지로 작동하며 메모리 개체 만 JavaScript 함수 대신 값으로 전달됩니다. 메모리 가져 오기는 다음과 같은 두 가지 이유로 유용합니다.</p> + +<ul> + <li>그것들은 자바 스크립트가 모듈 컴파일 이전에 또는 모듈 컴파일과 동시에 메모리의 초기 내용을 가져오고 생성 할 수 있도록합니다.</li> + <li>WebAssembly에서 동적 연결을 구현하는 데 중요한 구성 요소인 multiple module instances에서 단일 Memory 객체를 가져올 수 있습니다.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a>에서 완전히 동작하는 예제를 확인할 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">see it live also</a>)</p> +</div> + +<h2 id="테이블_인스턴스">테이블 인스턴스</h2> + +<p>WebAssembly 테이블은 JavaScript 및 WebAssembly 코드로 액세스 할 수 있는 크기가 조정가능한 형식의 <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">references</a> 배열입니다. 메모리는 크기를 조정할 수있는 원시 바이트 배열을 제공하지만 참조는 안전성, 이식성 및 안정성을 이유로 내용으로 직접 읽거나 쓰지 않아야하는 engine-trusted 값이므로 참조가 메모리에 저장되는 것은 안전하지 않습니다.</p> + +<p>테이블에는 테이블에 저장할 수있는 참조 유형을 제한하는 요소 유형이 있습니다. WebAssembly의 현재 반복에서는 WebAssembly 코드 함수에 필요한 참조 유형이 하나뿐이므로 올바른 요소 유형이 하나만 있습니다. 향후 반복에서는 더 많은 요소 유형이 추가됩니다.</p> + +<p>함수 참조(Function references)는 함수 포인터가 있는 C / C ++와 같은 언어를 컴파일하는 데 필요합니다. C / C ++의 네이티브 구현시 함수 포인터는 프로세스의 가상 주소 공간에있는 함수 코드의 원시 주소로 표시되므로 위에서 언급 한 안전상의 이유로 선형 메모리에 직접 저장할 수 없습니다. 대신 함수 참조는 테이블에 저장되며 선형 메모리에 저장 할 수 있는 정수인 인덱스가 대신 전달됩니다.</p> + +<p>함수 포인터를 호출 할 때 WebAssembly 호출자는 인덱스를 제공합니다.이 호출자는 인덱싱 된 함수 참조를 인덱싱하고 호출하기 전에 테이블에 대해 safety bounds를 검사 할 수 있습니다. 따라서 테이블은 현재 저수준 프로그래밍 언어 기능을 안전하고 이식 가능하게 컴파일하는 데 사용되는 다소 낮은 수준의 프리미티브(primitive)입니다.</p> + +<p>테이블은 테이블의 값 중 하나를 업데이트하는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>과 테이블에 저장할 수있는 값의 수를 늘리는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>를 통해 변형 될 수 있습니다. 이를 통해 간접적으로 호출 할 수있는 함수 집합이 시간이 지남에 따라 변경 될 수 있으며 이는 <a href="http://webassembly.org/docs/dynamic-linking/">dynamic linking techniques</a>에 필요합니다. mutations는 JavaScript의 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>과 wasm 모듈을 통해 즉시 액세스 할 수 있습니다.</p> + +<h3 id="테이블_예제">테이블 예제</h3> + +<p>두 요소가 있는 테이블(요소 0은 13을 반환하고 요소 1은 42를 반환)을 만들고 내보내는 WebAssembly 모듈(<a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/table.wasm">table.wasm</a>에서 확인 가능)로 간단한 테이블 예제를 보겠습니다.</p> + +<ol> + <li> + <p>새로운 디렉토리에 <code>table.wasm</code>을 복사하여 만듭니다.</p> + + <div class="note"> + <p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">table.wat</a>에서 모듈의 텍스트 표현(text representation)을 확인할 수 있습니다.</p> + </div> + </li> + <li> + <p><a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML template</a>를 같은 디렉토리에 복사하여 <code>table.html</code>라는 파일명으로 저장합니다.</p> + </li> + <li> + <p>wasm 모듈을 fetch, compile, instantiate하기 전 다음의 코드를 HTML body아래의 {{htmlelement("script")}} 요소안에 넣습니다.</p> + + <pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table.wasm')) +.then(function(results) { + // add code here +});</pre> + </li> + <li> + <p>이제 테이블 안에 있는 정보에 엑세스 하겠습니다. 다음의 코드를 위의 add code here 부분에 넣습니다.</p> + + <pre class="brush: js">var tbl = results.instance.exports.tbl; +console.log(tbl.get(0)()); // 13 +console.log(tbl.get(1)()); // 42</pre> + </li> +</ol> + +<p>이 코드는 테이블에 저장된 각 함수 참조를 차례로 액세스하고 인스턴스화하여 가지고 있는 값을 콘솔에 출력합니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> 호출로 각 함수 참조를 검색 한 다음 추가 세트를 추가합니다 실제로 함수를 호출하려면 끝에 괄호를 사용하십시오.</p> + +<div class="note"> +<p><strong>Note</strong>: 우리의 완전한 데모는 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a>에서 찾을 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">see it live also</a>) </p> +</div> + +<h2 id="Globals">Globals</h2> + +<p>WebAssembly는 하나 이상의 {{jsxref ( "WebAssembly.Module")}} 인스턴스 전체에서 JavaScript와 가져오기 / 내보내기가 가능한 전역 변수 인스턴스를 생성 할 수 있습니다. 이는 여러 모듈을 동적으로 연결할 수 있으므로 매우 유용합니다.</p> + +<p>JavaScript 내부에서 WebAssembly 전역 인스턴스를 만들려면 다음과 같은 {{jsxref ( "WebAssembly.Global ()")}} 생성자를 사용합니다.</p> + +<pre><code>const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);</code></pre> + +<p>다음 두가지 매게변수를 확인 할 수 있습니다.</p> + +<ul> + <li>전역 변수를 설정하는 두 가지 속성이 포함 된 객체. + <ul> + <li><code>value</code>: WebAssembly 모듈에서 사용할 수 있는 데이터 타입입니다. 다음의 값을 사용할 수 있습니다. — <code>i32</code>, <code>i64</code>, <code>f32</code>, <code>f64</code>.</li> + <li><code>mutable</code>: boolean 값이며 mutable이 가능한지 여부를 지정합니다.</li> + </ul> + </li> + <li>변수의 실제 값을 포함하는 값. 유형이 지정된 데이터 유형과 일치하면 어떤 값이든 될 수 있습니다.</li> +</ul> + +<p>다음예제에서 mutable <code>i32</code>타입으로 정의되고 value 0을 가진 global로 어떻게 사용하는지 알아보겠습니다.</p> + +<p>global 값은 <code>Global.value</code> 속성을 사용하여 처음 42로 변경된 다음 <code>global.wasm</code>module에서 내보낸 <code>incGlobal()</code> 함수를 사용하여 43으로 변경됩니다. 이것은 값이 주어진 값에 1을 더한 다음 새 값을 반환합니다.</p> + +<pre><code>const output = document.getElementById('output'); + +function assertEq(msg, got, expected) { + output.innerHTML += `Testing ${msg}: `; + if (got !== expected) + output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`; + else + output.innerHTML += `SUCCESS! Got: ${got}<br>`; +} + +assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function"); + +const global = new WebAssembly.Global({value:'i32', mutable:true}, 0); + +WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } }) +.then(({instance}) => { + assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0); + global.value = 42; + assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42); + instance.exports.incGlobal(); + assertEq("getting wasm-updated value from JS", global.value, 43); +});</code></pre> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">running live on GitHub</a>에서 라이브 예제를 확인하고 에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">source code</a> 소스코드를 확인 할 수 있습니다.</p> +</div> + +<h2 id="Multiplicity">Multiplicity</h2> + +<p>이제 우리는 WebAssembly 기본 블록의 사용법을 보여주었습니다. 다중성의 개념을 언급하기에 좋은 곳입니다. 여기서 구조적 효율성 측면에서의 다양한 발전과 함께 WebAssembly를 제공합니다.</p> + +<ul> + <li>하나의 모듈은 하나의 함수 리터럴이 N 개의 클로저 값을 생성 할 수있는 것과 같은 방식으로 N 개의 인스턴스를 가질 수 있습니다.</li> + <li>하나의 모듈 인스턴스는 인스턴스의 "주소 공간"을 제공하는 0-1 메모리 인스턴스를 사용할 수 있습니다. WebAssembly의 이후 버전에서는 모듈 인스턴스 당 0-N 개의 메모리 인스턴스가 허용 될 수 있습니다 (<a href="http://webassembly.org/docs/future-features/#multiple-tables-and-memories">Multiple Tables and Memories</a> 참조).</li> + <li>하나의 모듈 인스턴스는 0-1 테이블 인스턴스를 사용할 수 있습니다. 이것은 C 함수 포인터를 구현하는 데 사용되는 인스턴스의 "함수 주소 공간"입니다. WebAssembly의 향후 버전에서는 향후 모듈 인스턴스 당 0-N 테이블 인스턴스를 허용 할 수 있습니다.</li> + <li>하나의 메모리 또는 테이블 인스턴스는 0-N 모듈 인스턴스에서 사용할 수 있습니다.이 인스턴스는 모두 동일한 주소 공간을 공유하므로 <a href="http://webassembly.org/docs/dynamic-linking">dynamic linking</a>이 가능합니다.</li> +</ul> + +<p>Understanding text format에서 multiplicity in action를 확인 할 수있습니다. - <a href="/ko/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking section</a>을 참조하십시오.</p> + +<h2 id="요약">요약</h2> + +<p>여기서 WebAssembly JavaScript API를 사용하여 JavaScript 컨텍스트에 WebAssembly 모듈을 포함하고 해당 기능을 사용하는 방법과 JavaScript에서 WebAssembly 메모리 및 테이블을 사용하는 방법에 대해 살펴 보았습니다. 그리고 다중성의 개념에 대해서도 언급했습니다.</p> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a href="http://webassembly.org/">webassembly.org</a></li> + <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> + <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li> +</ul> |