첫 번째 웹어셈블리 프로젝트 빌드-JS 튜토리얼-php.cn

웹어셈블리 설정

간단한 추가 예시

16진수의 이해

임의 색상 생성기

결론

집

웹 프론트엔드

JS 튜토리얼

첫 번째 웹어셈블리 프로젝트 빌드

Barbara Streisand

Jan 21, 2025 pm 12:31 PM

안녕하세요 여러분,

이 게시물은 WebAssembly를 탐구하는 시리즈의 일부입니다. 다른 부분은 여기에서 확인하세요[시리즈의 다른 부분 링크].

WebAssembly에 대해 들어본 적이 있고 너무 복잡하다고 생각한 적이 있나요? 오늘은 처음부터 간단한 WebAssembly 프로젝트를 빌드해 보겠습니다. 우리는 이를 매우 기본적으로 유지합니다: 임의의 16진수 색상 코드 생성기입니다. "Hello, World!"라고 생각하세요. WebAssembly이지만 다채로운 변형이 있습니다. JavaScript로 간단한 WebAssembly 코드를 작성, 컴파일 및 사용하여 브라우저에서 임의의 색상을 생성하는 방법을 배우게 됩니다.

웹어셈블리 설정

이 시리즈에서는 C 및 C 예제를 사용하므로 Emscripten을 사용하여 C/C를 WASM으로 컴파일합니다. 해당 컴파일러에서 다른 언어를 사용할 수 있습니다.

Emscripten 설정은 쉽습니다. 다음 지침을 따르세요. https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

macOS 사용자는 Homebrew를 사용할 수 있습니다.

brew install emscripten

로그인 후 복사

Linux 사용자는 다음 지침을 따르세요. https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

설치 후 다음을 통해 확인하세요.

emcc -v

로그인 후 복사

간단한 추가 예시

색상 생성기를 구축하기 전에 WASM 워크플로를 이해하기 위한 간단한 추가 애플리케이션을 만들어 보겠습니다. 먼저 JavaScript로 빌드한 다음 WASM으로 변환하겠습니다. index.html:

만들기

<!-- index.html -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script src="add.js"></script>

로그인 후 복사

이제 생성하세요 add.c:

// add.c
int addTwoNumbers(int num1, int num2) {
    return num1 + num2;
}

로그인 후 복사

C 코드를 WASM으로 컴파일:

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_addTwoNumbers']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

로그인 후 복사

이 명령:

add.c을 JavaScript(add.js)로 컴파일합니다.
JavaScript 사용을 위해 addTwoNumbers 함수를 내보냅니다(밑줄은 명령의 일부입니다).
JavaScript 상호작용에 필요한 런타임 함수(ccall, cwrap)를 내보냅니다.

이렇게 하면 add.wasm(WASM 바이너리) 및 add.js(글루 코드)가 생성됩니다. WASM 기능을 포함하도록 index.html을 수정하세요.

<!-- index.html (modified) -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script>
  const Module = {
    onRuntimeInitialized: () => {
      const addTwoNumbers = Module.cwrap('addTwoNumbers', 'number', ['number', 'number']);
      function addNumbers() {
        const num1 = parseInt(document.getElementById('num1').value);
        const num2 = parseInt(document.getElementById('num2').value);
        document.getElementById('result').innerText = addTwoNumbers(num1, num2);
      }
    }
  };
</script>
<script src="add.js"></script>

로그인 후 복사

로컬 서버(예: python -m http.server, python3 -m http.server 또는 live-server)를 사용하여 실행하세요. 두 개의 숫자를 입력하고 "추가"를 클릭하면 결과를 볼 수 있습니다.

Build your first webassembly project

JavaScript는 DOM 조작을 처리하고 WASM(C 코드)은 추가를 수행합니다. 전체 코드는 여기 [코드 링크]에서 확인할 수 있습니다.

16진수의 이해

16진수(16진수)는 16개의 기호(0-9, A-F, A=10 등)를 사용합니다. 6자리 16진수 코드는 색상을 나타냅니다(예: #FF5733, #42A5F5). 여기[설명 링크]에서 16진수 색상에 대해 자세히 알아보세요.

임의 색상 생성기

만들기 random_color.c:

// random_color.c
#include <stdlib.h>
#include <time.h>

char* intToHex(int num) {
    static char hexStr[3];
    const char hexDigits[] = "0123456789ABCDEF";
    hexStr[0] = hexDigits[(num >> 4) & 0xF];
    hexStr[1] = hexDigits[num & 0xF];
    hexStr[2] = '<pre class="brush:php;toolbar:false"><code class="language-bash">emcc random_color.c -o random_color.js -s EXPORTED_FUNCTIONS="['_generateRandomHexColor']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'UTF8ToString']"

로그인 후 복사

'; return hexStr; } char* generateRandomHexColor() { static char color[8]; srand(time(NULL)); color[0] = '#'; char* r = intToHex(rand() % 256); color[1] = r[0]; color[2] = r[1]; char* g = intToHex(rand() % 256); color[3] = g[0]; color[4] = g[1]; char* b = intToHex(rand() % 256); color[5] = b[0]; color[6] = b[1]; color[7] = '<🎝🎝🎝>'; return color; }

컴파일: