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

안녕하세요 여러분,

이 게시물은 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)를 사용하여 실행하세요. 두 개의 숫자를 입력하고 "추가"를 클릭하면 결과를 볼 수 있습니다.

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="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; }

컴파일:

brew install emscripten

이 기능을 사용하려면 HTML을 생성(또는 수정)하세요: [WASM 함수를 호출하고 배경색을 업데이트하는 HTML 코드]

버튼을 클릭하면 페이지 배경색이 변경됩니다.

전체 코드: [코드 링크]

결론

간단한 WebAssembly 애플리케이션을 구축했습니다! 이는 웹에 고성능 코드를 제공하는 WebAssembly의 힘을 보여줍니다. 향후 게시물에서는 더욱 발전된 응용 프로그램을 살펴볼 것입니다. 계속 지켜봐주세요!

위 내용은 첫 번째 웹어셈블리 프로젝트 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!