웹어셈블리 - C와 함께 작업하기

웹어셈블리와 C에 대한 소개

안녕하세요, 미래의 코딩 마법사 여러분! 오늘 우리는 웹어셈블리와 C의 세계로 흥미로운 여정을 떠납니다. 여러분의 친구 겸 컴퓨터 과학 교사로서, 저는 첫 번째로 코딩의 마법을 발견했을 때와 같은 열정으로 이 여정을 안내해 드리겠습니다. 지금 seatbelt를 체크하고 다이빙해 봅시다!

WebAssembly - Working with C

웹어셈블리는 무엇인가요?

웹어셈블리, 짧게는 Wasm이라고 부릅니다,는 브라우저가 초고속 코드를 실행할 수 있는 비밀 언어입니다. 브라우저가 갑자기 초능력을 얻은 것처럼 생각해 보세요 - 웹어셈블리가 하는 일입니다! C와 같은 언어로 코드를 작성하고 브라우저에서 거의 원생 속도로 실행할 수 있습니다.

왜 웹어셈블리와 C인가요?

이제 여러분은 "왜 C인가? 그게 아니면 오래된 언어 아닌가요?"라고 물을 수도 있습니다. 제 젊은 제자들이여, C는 프로그래밍 언어의 지혜로운 조상입니다. 오랫동안 존재해 왔고, 그 이유가 있습니다! C는 빠르고 효율적이며, 우리가 활용할 수 있는 풍부한 기존 코드가 많습니다. C를 웹어셈블리와 함께 사용하면 이 강력한 도구를 웹으로 데려올 수 있습니다.

환경 설정

코딩을 시작하기 전에 우리의 디지털 워크숍을 설정해야 합니다. 걱정 마세요, IKEA 가구 조립보다 쉽습니다!

Emscripten 설치

Emscripten은 C 코드를 웹어셈블리로 변환하는 우리의 마법 도구입니다. 다음과 같이 설치합니다:

터미널을 엽니다 (무서워하지 마세요, 그냥 텍스트 기반의 친구입니다)
다음 명령어를 실행합니다:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

축하합니다! 여러분은 웹어셈블리 연구실을 설정했습니다.

첫 번째 웹어셈블리 프로그램

이제 간단한 "Hello, World!" 프로그램으로 시작해 보겠습니다. 이는 아기의 첫 말처럼 중요하지만, 코드로 표현하는 것은 훨씬 더 멋집니다!

C 코드 작성

hello.c라는 파일을 만들고 다음 코드를 추가합니다:

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

이 작은 스니펫은 컴퓨터에게 인사말을 출력하도록 지시합니다.鹦鹉이 "안녕하세요"라고 말하는 것을 가르치는 것과 같지만, 훨씬 더 멋집니다!

웹어셈블리로 컴파일

이제 우리의 C 코드를 웹어셈블리로 변환합니다. 터미널에서 다음 명령어를 실행합니다:

emcc hello.c -s WASM=1 -o hello.html

이 명령어는 마법의 지팡이를 흔드는 것과 같습니다. hello.html, hello.js, 그리고 hello.wasm 세 가지 파일을 생성합니다.

웹어셈블리 프로그램 실행

hello.html 파일을 브라우저에서 엽니다. "Hello, WebAssembly World!"가 출력되어야 합니다. 축하합니다! 여러분은 첫 번째 웹어셈블리 프로그램을 실행했습니다!

함수 작업

이제 인사를 했으니, 실제 작업을 할 수 있는 함수를 만들어 보겠습니다. 두 수를 더하는 함수를 만들겠습니다.

간단한 더하기 함수 생성

math.c라는 새 파일을 만들고 다음 코드를 추가합니다:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

EMSCRIPTEN_KEEPALIVE는 컴파일러에게 "이 함수가 중요하니 제거하지 말아라!"라고 알립니다.

함수 컴파일

다음과 같이 컴파일합니다:

emcc math.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o math.js

이제 math.js와 math.wasm 파일이 생성됩니다.

JavaScript에서 함수 사용

이제 JavaScript에서 C 함수를 사용해 보겠습니다. index.html 파일을 만들고 다음 코드를 추가합니다:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Math</title>
</head>
<body>
<h1>WebAssembly Math</h1>
<p>Result: <span id="result"></span></p>
<script src="math.js"></script>
<script>
Module.onRuntimeInitialized = function() {
var result = Module._add(5, 7);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

브라우저에서 이를 엽니다, 5 + 7의 결과를 볼 수 있습니다!

메모리 작업

이제 조금 더 고급 기능을 사용해 메모리를 작업해 보겠습니다. 이는 웹어셈블리의 초능력을 메모리 노트북에 기록할 수 있게 해줍니다.

메모리 할당 및 사용

memory.c라는 파일을 만들고 다음 코드를 추가합니다:

#include <emscripten.h>
#include <stdlib.h>

EMSCRIPTEN_KEEPALIVE
int* create_array(int size) {
return (int*)malloc(size * sizeof(int));
}

EMSCRIPTEN_KEEPALIVE
void fill_array(int* arr, int size) {
for (int i = 0; i < size; i++) {
arr[i] = i * 2;
}
}

EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}

EMSCRIPTEN_KEEPALIVE
void free_array(int* arr) {
free(arr);
}

이를 다음과 같이 컴파일합니다:

emcc memory.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_create_array", "_fill_array", "_sum_array", "_free_array"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o memory.js

이제 JavaScript에서 이 함수들을 사용해 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Memory</title>
</head>
<body>
<h1>WebAssembly Memory Management</h1>
<p>Sum of array: <span id="result"></span></p>
<script src="memory.js"></script>
<script>
Module.onRuntimeInitialized = function() {
const create_array = Module.cwrap('create_array', 'number', ['number']);
const fill_array = Module.cwrap('fill_array', null, ['number', 'number']);
const sum_array = Module.cwrap('sum_array', 'number', ['number', 'number']);
const free_array = Module.cwrap('free_array', null, ['number']);

const size = 10;
const ptr = create_array(size);
fill_array(ptr, size);
const sum = sum_array(ptr, size);
free_array(ptr);

document.getElementById('result').textContent = sum;
};
</script>
</body>
</html>

이 예제는 메모리 할당, 배열 채우기, 합계 계산, 그리고 메모리 해제를 C 함수를 호출하여 JavaScript에서 수행하는 방법을 보여줍니다!

결론

축하합니다, 여러분은 C와 웹어셈블리의 세계로 첫 걸음을 뗐습니다! 우리는 기본적인 내용에서 메모리 작업까지 다루었습니다. 코드를 작성하는 것은 새로운 언어를 배우는 것과 같아서, 연습과 인내가 필요합니다. 하지만 코드를 작성할 때마다 컴퓨터 언어에 더 능숙해집니다.

마무리로, 우리가 배운 주요 함수를 요약한 표를 제공합니다:

함수	설명	예제
printf()	콘솔에 텍스트 출력	printf("Hello, World!");
malloc()	메모리 할당	int arr = (int)malloc(size * sizeof(int));
free()	할당된 메모리 해제	free(arr);
EMSCRIPTEN_KEEPALIVE	함수를 최적화하지 않음	EMSCRIPTEN_KEEPALIVE int add(int a, int b)

계속 코딩하고 배우며, 컴퓨터 프로그래밍의 세계에서 상상력이 유일한 제한임을 기억하세요! 미래의 기술 슈퍼스타 여러분, 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:

WebAssembly - 보안

다음 튜토리얼:

WebAssembly - C++와 함께 작업