WebAssembly - "Hello World"

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 WebAssembly의 세계로 흥미로운 여정을 시작할 것입니다. 코드를 한 줄도 작성해본 적이 없어도 걱정하지 마세요 - 우리는 매우 기초적인 것부터 단계별로 진행할 것입니다. 이 튜토리얼의 끝까지 따라오시면, 전통적인 "Hello World" 메시지를 표시하는 첫 번째 WebAssembly 프로그램을 만들어 보실 수 있습니다. 그럼 시작해 보겠습니다!

What is WebAssembly?

코딩을 시작하기 전에 WebAssembly이 무엇인지 이해해 보겠습니다. WebAssembly, 흔히 Wasm으로 약자를 사용합니다,은 스택 기반 가상 머신의 이진 지시 형식입니다. 고 수준 언어인 C, C++, 그리고 Rust와 같은 언어의 컴파일 목적을 위한 이식 가능한 타겟으로 설계되었습니다. 웹에서 클라이언트와 서버 애플리케이션을 배포할 수 있게 합니다.

WebAssembly을 높은 성능의 코드를 웹 브라우저에서 실행할 수 있는 방법으로 생각해 보세요. 여러분의 웹 애플리케이션에 초능력을 부여하는 것과 같습니다!

Setting Up Our Environment

WebAssembly을 시작하려면 우리의 개발 환경을 설정해야 합니다. 이 튜토리얼에서는 간단한 온라인 도구인 WasmFiddle(https://wasmldedle.net/)을 사용할 것입니다. 이 도구는 브라우저에서 WebAssembly 코드를 작성하고 컴파일하며 실행할 수 있게 해줍니다.

Our First WebAssembly Program

Step 1: Writing the C Code

먼저 간단한 C 프로그램을 작성하여 "Hello World"를 인쇄해 보겠습니다. C 언어에 익숙하지 않으신 분도 걱정 마세요. 각 줄을 설명해 드리겠습니다.

#include <stdio.h>

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

이를 간단히 설명하자면:

1. #include <stdio.h>: 이 줄은 컴파일러에게 표준 입력/출력 라이브러리를 포함하도록 지시합니다. printf 함수를 사용하기 위해 필요합니다.
2. int main(): 이는 우리의 프로그램이 실행되는 주요 함수입니다.
3. printf("Hello World!\n");: 이 줄은 "Hello World!"를 콘솔에 인쇄합니다. 끝에 있는 \n은 새 줄을 추가합니다.
4. return 0;: 이는 프로그램이 성공적으로 완료되었음을 나타냅니다.

Step 2: Compiling to WebAssembly

이제 이 C 코드를 WebAssembly로 컴파일해 보겠습니다. WasmFiddle에서는 C 코드를 왼쪽 패널에 붙여넣고 "Build"를 클릭하기만 하면 됩니다. WebAssembly 코드는 중간 패널에 나타날 것입니다.

Step 3: Running the WebAssembly

WebAssembly 코드를 실행하려면 WasmFiddle은 오른쪽에 JavaScript 패널을 제공합니다. 우리의 WebAssembly를 실행하는 코드는 다음과 같습니다:

Module.onRuntimeInitialized = function() {
Module._main();
};

이 코드는 브라우저가 WebAssembly 모듈이 초기화되면 우리의 main 함수를 실행하도록 지시합니다.

Output

WasmFiddle에서 "Run"을 클릭하면, 페이지 하단의 콘솔 출력에 "Hello World!"가 표시되어야 합니다. 축하드립니다! 여러분은 첫 번째 WebAssembly 프로그램을 실행했습니다!

Understanding What Happened

이제 잠시 동안 무슨 일이 일어났는지 이해해 보겠습니다:

1. 우리는 간단한 C 프로그램을 작성했습니다.
2. 이 C 프로그램은 웹 브라우저에서 실행할 수 있는 저수준 언어인 WebAssembly로 컴파일되었습니다.
3. 우리는 JavaScript를 사용하여 WebAssembly 코드를 로드하고 실행했습니다.
4. WebAssembly 코드는 우리의 printf 함수를 실행하여 콘솔에 "Hello World!"를 표시했습니다.

이는 우리가 브라우저에게 새로운 언어를 가르쳐주고 그 언어를 사용하여 세상에 인사하는 것과 같습니다!

Why Use WebAssembly?

"WasmFiddle에서 JavaScript를 사용하는 것보다 이렇게 귀찮게 해야 하나요?"라는 생각이 드실 수도 있습니다. 훌륭한 질문입니다! WebAssembly은 여러 가지 장점을 가지고 있습니다:

1. 성능: WebAssembly은 거의 네이티브 속도에 가까운 속도로 실행되므로, 계산적으로 복잡한 작업에 대해 JavaScript보다 훨씬 빠릅니다.
2. 언어 선택: C, C++, 또는 Rust와 같은 언어로 코드를 작성할 수 있어, 특정 작업에 더 적합하거나 개발자에게 더 익숙한 언어를 선택할 수 있습니다.
3. 보안: WebAssembly은 샌드박스 환경에서 실행되므로, 추가적인 보안 층을 제공합니다.

Conclusion

축하합니다! 여러분은 첫 번째 WebAssembly 프로그램을 작성하고 실행했습니다! 우리는 WebAssembly의 가능성의 표면만을 긁었지만, 이 튜토리얼이 이 강력한 기술에 대한 여러분의 관심을 불러일으킨 것을 바랍니다.

기억하세요, 모든 전문가는 한때 초보자였습니다. 꾸준히 연습하고, 호기심을 유지하며, 두려워하지 말고 실험해 보세요. 누가 알겠습니까? 다음 혁명적인 웹 애플리케이션이 여러분이 현재 개발하고 있는 WebAssembly 기술로 만들어질 수도 있습니다!

다음 강의에서는 더 복잡한 WebAssembly 예제를 탐구하고, WebAssembly을 HTML과 CSS와 통합하여 상호작용적인 웹 페이지를 만드는 방법을 배우겠습니다. 그 전까지, 즐겁게 코딩하세요!

Method	Description
#include <stdio.h>	표준 입력/출력 라이브러리를 포함합니다
int main()	프로그램 실행이 시작되는 주요 함수를 정의합니다
printf()	포맷된 출력을 콘솔에 인쇄합니다
return 0;	프로그램이 성공적으로 완료되었음을 나타냅니다
Module.onRuntimeInitialized	WebAssembly 모듈이 준비되면 코드를 실행하는 JavaScript 메서드
Module._main()	WebAssembly 모듈의 main 함수를 호출합니다

Credits: Image by storyset