WASM란? 그리고 테스트 해보기

WASM 란?

---

WebAssembly 의 약자로, Web과 Assembly가 합쳐져 WebAssembly라 불리고,

LLVM(Low Level Virtual Machine) 기반의 언어들(C, C++, Rust)을 기계 친화 언어인 바이트 코드로 변환한 웹을 위한 새로운 바이너리 포맷입니다.

사실 더 간단명료한 설명은 코딩애플님께서 영상으로 남겨주셨습니다.
https://www.youtube.com/watch?v=VJag_H2Cosc

저는 WASM을 웹 브라우저에서 Js의 부족한 기능, 무거운 실행시간을 로우 레벨단에 있는 언어들을 사용하여

웹에서도 무거운 앱을 네이티브에 가깝게 돌려보자 라는 취지로 만들어진 표준이라고 생각합니다.

 

현재 글을 읽고 계신 이 티스토리도 이미지 편집 기능 중 필터 기능을 WASM으로 구현했다고 합니다.

 

또한 WASM을 언급하면 절대 빠지지 않는 Asm.js도 있습니다.

Asm은 별도로 공부 후 포스팅 하겠습니다. 우선은 아래 블로그에서 이해해주시면 감사합니다.

https://blog.outsider.ne.kr/927

asm.js에 대해서 :: Outsider's Dev Story

 

WASM의 사용처

---

출처 : https://www.fortinet.com/blog/threat-research/webassembly-101-bringing-bytecode-to-the-web

원본 사진은 LLVM언어를 컴파일하는 과정까지 설명되어 있어 일부분을 잘랐습니다.

• WASM(.wasm 파일)을 실행하기 위한 JS Glue코드를 생성 (JavaScript부분) 합니다.(이 때 HTML도 같이 생성됩니다)

Glue 코드 : .wasm을 실행하기 위해 js에 추가되는 코드(간단하게 wasm 로더)

• 최종적으로 .wasm을 실행하기 위해 VM에 로드합니다.

 

V8 접근 방식 : 지연 컴파일

위 사진의 저작권은 Huiseoul Enginerring 에 있습니다.

V8 파이프라인의 최적화 컴파일러 중 하나인 TurboFan이 있습니다.

WASM은 아래 사진과 같이 위치하고 실행이 됩니다.

 

V8 파이프라인 디자인 + WASM

위 사진의 저작권은 Huiseoul Enginerring 에 있습니다.

사진에선 decode 되어 TurboFan에서 돌아가는 거 같으나 이경우는 Optimizing이 필요할 경우이며

Mozilla의 설명에 의하면 VM과 나란히 구동된다고 합니다.

 

 

즉 결론은 VM에선 JS만 로드/실행이 아닌

WASM이 추가되어 Js, WASM 2가지 코드를 로드/실행합니다.

 

WASM 만들고 테스트하기 (C/C++)

---

필요 환경
  윈도우10
  IIS
  python 최신버전
  Git
  emscripten
  C++

C/C++을 .wasm으로 컴파일 하기 위해선 여러 방법이 있지만 이 포스팅에선 Emscripten을 사용하겠습니다.

IIS와 Git은 기본으로 설치되어있다는 가정하에 진행하겠습니다.

 

1. 파이썬 설치

https://www.python.org/downloads/

Download Python

Emscripten는 파이썬 스크립트로 이루어져 있습니다. CMD에 python입력 시 설치 확인이 된다면 다음 스탭으로.

 

2. Emscripten 설정

https://emscripten.org/docs/getting_started/downloads.html

Download and install — Emscripten 3.1.6-git (dev) documentation

위 링크에서도 다운로드 및 설정하는 방법이 있습니다.

 

 

CMD 관리자 권한으로 아래 명령어를 실행합니다.

# Github에서 레파짓 클론
git clone https://github.com/emscripten-core/emsdk.git

# 클론 한 프로젝트 폴더로 이동
cd emsdk

# 최신 버전의 EmSDK를 다운 및 설치 (윈도우에선 " ./ " 를 안 붙여야 작동합니다)
emsdk install latest

# 최신 버전의 SDK를 활성화함 (이상하게도 컴파일할 때는 EmSDK를 Active 한 CMD 창에서만 작동합니다)
emsdk activate latest

# EmSDK의 Path설정
emsdk_env.bat 

여기까지 별 탈 없이 오셨다면 50퍼 준비됐습니다. CMD창은 닫으시면 안 됩니다.

만약 3번째 명령어부터 입력했는데 Python 이라고만 출력된다면 파이썬 설치가 안됐다는 뜻입니다.

 

 

3. CPP 파일 작성 및 컴파일

CMD에 경로 입력하기 편한 위치에 cpp파일을 생성합니다.

대충 문자열 출력만 했다는 짤

자세한 설명은 모질라 개발자 문서에서 확인하실 수 있습니다.

 

# 위에서 폴더 아무것도 안 건드렸다면, EmSDK 폴더 안에 있는 main.cpp를 컴파일하여 iis www 폴더로 출력
em++ main.cpp -o C:\inetpub\wwwroot

정상적으로 3개의 파일이 생성됨

 

4. 확인하기!

localhost로 들어가 보면 

잔짜잔

이렇게 잘 됩니다!

 

마무리하며

---

게임 서버 개발하는 입장에서 이걸 보고 있으면 Rest Api 서버 만들 때 어디에 붙이면 좋을까 라는 생각을 하게 되는 거 같습니다.

13년부터 나온 기술이지만 표준으로 채택되면서 나에겐 신기술!!