WebAssembly의 헤일로 월드

WebAssembly란?



브라우저에서 어셈블리 언어를 실행할 수 있는 기술입니다.
고속화 수단, 혹은 JavaScript의 처리계로 할 수 없는 일을 하는 등의 목적으로 사용한다.

2015년 6월 Mozilla, Google, Microsoft, Apple이 표준 형식으로 개발하기로 합의했다.

대응 언어는 C/C++, Rust 등. 최근에는 Golang도 사용할 수 있도록.

Can I use WebAssembly?



현재 IE 이외의 거의 모든 브라우저에서 지원됩니다.

어셈블리 언어란?


  • 기계어 (0과 1의 세계)와 직접 일대일에 대응하는 프로그래밍 언어
  • 어셈블러라고도합니다 (이것은 어셈블리 언어를 기계어로 변환하는 소프트웨어라고도 함)
  • "어셈블": 어셈블리 언어로 작성된 프로그램을 기계어 코드로 변환합니다.

    예를 들어, C++로 작성한 Hello World 프로그램을 어셈블리 언어로 살펴보겠습니다.

    hello.cpp
    #include <iostream>
    using namespace std;
    
    int main() {
        cout << "Hello World!" << endl;
        return 0;
    }
    

    g++에 S 옵션을 붙이면 어셈블리 언어를 볼 수 있습니다.
    $ g++ -S hello.cpp
    

    그러면 hello.s라는 어셈블러 파일이 생성됩니다.

    1000행 이상의 파일이 되므로, 여기에는 처음 15행만 올려 보겠습니다.
        .section    __TEXT,__text,regular,pure_instructions
        .macosx_version_min 10, 13
        .globl  _main                   ## -- Begin function main
        .p2align    4, 0x90
    _main:                                  ## @main
        .cfi_startproc
    ## %bb.0:
        pushq   %rbp
        .cfi_def_cfa_offset 16
        .cfi_offset %rbp, -16
        movq    %rsp, %rbp
        .cfi_def_cfa_register %rbp
        subq    $32, %rsp
        movq    __ZNSt3__14coutE@GOTPCREL(%rip), %rdi
        leaq    L_.str(%rip), %rsi
    

    WebAssembly에서 Hello World



    여기부터가 본제입니다.

    Emscripten 설치



    가장 인기있는 Emscripten을 소개합니다.
    git clone https://github.com/juj/emsdk.git
    cd emsdk
    
    # 最新のSDKツールをインストール
    ./emsdk install latest
    
    # アクティベイト
    ./emsdk activate latest
    
    # パスと環境変数を設定
    source ./emsdk_env.sh
    

    상당히 시간이 걸리기 때문에, 차도 마셔 마십니다.

    실행하다



    빌드 환경이 생겼으므로, 즉시 컴파일하고 실행합니다.
  • C 파일 준비

  • hello.c
    #include <stdio.h>
    
    int main() {
        printf("Hello World!\n");
        return 0;
    }
    
  • 빌드 및 실행
  • $ emcc -0 hello.js -O0 hello.c
    $ node hello.js
    Hello World!
    

    출력 파일을 .html로 설정


    $ emcc -o index.html hello.c
    
    # ローカルサーバーを立てる
    ## Python3.x系
    $ python -m http.server
    Serving HTTP on 0.0.0.0 port 8000 ...
    
    ## Python2.x系
    $ python -m SimpleHTTPServer
    Serving HTTP on 0.0.0.0 port 8000 ...
    
    

    http://localhost:8000/에 접속하면,



    제대로 Hello World!라고 표시됩니다.

    끝에



    이번에는 WebAssembly에서 Hello World를 시도했습니다.

    신경이 쓰이면 더 복잡한 연산 처리도 해 보세요.

    이상입니다!

    좋은 웹페이지 즐겨찾기