한국어 (ko) 번역

안녕하세요, 도전하는 프로그래머 여러분! 웹어셈블리(WWebAssembly)와 C++의 세계로 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 10년 넘게 컴퓨터 과학을 가르쳐온 경험을 바탕으로 이 주제가처음에는 어려워 보일 수 있지만, 우리는 이를 입이 딱딱하게 먹을 수 있는 작은 조각으로 쪼개서 설명할 것입니다. 그麼, 손을 걷어붙이고 시작해 보죠!

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

코드로 뛰어들기 전에 웹어셈블리에 대해 이해해 보겠습니다. 상상해 보세요, 당신이 당신의 언어를 몰라하는 사람과 이야기하려고 할 때. 통역사가 필요할 것 같죠? 웹어셈블리는 당신의 웹 브라우저에서 통역사 역할을 합니다. C++와 같은 언어로 작성된 프로그램이 웹 브라우저에서 거의 네이티브 속도에 가깝게 실행할 수 있게 해줍니다. 멋지죠?

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

"C++인가요?"라고 물어볼 수도 있습니다. C++는 프로그래밍 언어 중 스위스 아미Knife와 같은 존재입니다 - 강력하고 유연하며 오랫동안 존재해 왔습니다. 웹어셈블리와 결합할 때, 우리는 높은 성능의 애플리케이션을 웹에 가져올 수 있습니다. 웹사이트를 터보차지하는 것과 같습니다!

환경 설정

첫 줄 코드를 작성하기 전에 우리는 작업 공간을 설정해야 합니다. 걱정하지 마세요, 나는 단계별로 안내해 드릴 테니까요:

1. Emscripten 설치: 이는 C++를 웹어셈블리로 변환하는 마법의 지팡이입니다.
2. 텍스트 편집기 설정: Visual Studio Code를 추천하지만, 어떤 텍스트 편집기라도 됩니다.
3. 터미널 열기: 우리는 이를 사용하여 코드를 컴파일합니다.

우리의 첫 웹어셈블리 프로그램

간단한 "Hello, World!" 프로그램으로 시작해 보겠습니다. 여기 코드가 있습니다:

#include <emscripten/emscripten.h>
#include <stdio.h>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    void sayHello() {
        printf("Hello, WebAssembly World!\n");
    }
}

이를 하나씩 풀어보겠습니다:

• #include <emscripten/emscripten.h>: 이 줄은 Emscripten 헤더 파일을 포함하여 웹어셈블리 관련 함수에 접근할 수 있게 합니다.
• extern "C": 이는 컴파일러에게 우리의 함수를 C 스타일 이름으로 사용하도록 알립니다.
• EMSCRIPTEN_KEEPALIVE: 이는 우리의 함수에 "지우지 마오" 표지를 달아주는 것처럼, JavaScript에서 사용할 수 있도록 합니다.
• void sayHello(): 이는 인사를 출력하는 우리의 함수입니다.

코드 컴파일

마법의 지팡이를 흔들 때가 되었습니다! 터미널에서 다음 명령어를 실행합니다:

emcc hello.cpp -o hello.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

이 명령어는 마법의 신비로운 문이지만, 설명해드리겠습니다:

• emcc: 이는 우리의 컴파일러입니다.
• hello.cpp: 우리의 소스 파일입니다.
• -o hello.html: 이는 브라우저에서 열 수 있는 HTML 파일을 생성합니다.
• 나머지는 JavaScript와 잘 어울리게 웹어셈블리를 설정하는 특별한 플래그입니다.

웹어셈블리 실행

생성된 hello.html 파일을 브라우저에서 열고 콘솔을 열어 다음을 타이پ합니다:

Module.ccall('sayHello', null, null, null);

콘솔에 "Hello, WebAssembly World!"가 보이면 축하합니다! 당신은刚刚 브라우저에서 C++를 실행했습니다!

더 복잡한 예제: 피보나치 계산기

이제 우리는 발을 젖히고 더 복잡한 것을 시도해 보겠습니다 - 피보나치 수 계산기.

#include <emscripten/emscripten.h>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    int fibonacci(int n) {
        if (n <= 1) return n;
        return fibonacci(n-1) + fibonacci(n-2);
    }
}

이 함수는 피보나치 수를 재귀적으로 계산합니다. 이 방법은 가장 효율적이지 않지만, 데모에 적합합니다!

이전과 같은 방법으로 컴파일하고, JavaScript에서 다음과 같이 호출합니다:

console.log(Module.ccall('fibonacci', 'number', ['number'], [10]));

이는 10번째 피보나치 수(55입니다)를 출력해야 합니다.

배열과의 작업

이제 우리는 배열과의 작업을 한 단계 더 높여보겠습니다. 여기 배열의 합을 계산하는 함수가 있습니다:

#include <emscripten/emscripten.h>

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

JavaScript에서 이를 사용하기 위해서는 약간 더 많은 작업이 필요합니다:

let arr = new Int32Array([1, 2, 3, 4, 5]);
let buffer = Module._malloc(arr.length * arr.BYTES_PER_ELEMENT);
Module.HEAP32.set(arr, buffer >> 2);
let sum = Module.ccall('sumArray', 'number', ['number', 'number'], [buffer, arr.length]);
Module._free(buffer);
console.log(sum);  // 15를 출력해야 합니다

이 작업은 다음과 같은 것을 포함합니다:

1. JavaScript에서 배열 생성
2. 웹어셈블리 힙에 메모리 할당
3. 우리의 배열을 그 메모리에 복사
4. 함수 호출
5. 할당된 메모리 해제

결론

축하합니다! 당신은 C++와 웹어셈블리의 세계로 첫 걸음을 내딛었습니다. 우리는 많은 내용을 다루었고, 기본적인 "Hello, World!"에서 배열과의 작업까지 이르렀습니다. 코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 처음에는 이해가 되지 않을 수 있지만, 계속 실험하고, 코드를 작성하며, 가장 중요한 것은 즐겁게 만들어 나가세요!

여기 우리가 사용한 주요 메서드를 요약한 표입니다:

메서드	설명
emcc	Emscripten 컴파일러 명령어
EMSCRIPTEN_KEEPALIVE	함수가 최적화되지 않도록 방지하는 마クロ
Module.ccall	JavaScript 메서드로 C++ 함수 호출
Module._malloc	웹어셈블리 힙에 메모리 할당
Module._free	할당된 메모리 해제
Module.HEAP32	웹어셈블리 메모리의 Int32Array 뷰

웹어셈블리와 C++는 웹 개발의 새로운 가능성을 열어줍니다. 하늘은 한계가 없습니다! 계속 코드를 작성하고, 배우고, 몇 년 후 이 강의를 가르치는 사람이 당신이 될지도 모릅니다!

Credits: Image by storyset