diff options
Diffstat (limited to 'files/ko/webassembly/index.html')
| -rw-r--r-- | files/ko/webassembly/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
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> |