[도서]WebAssembly in Action - 1

웹어셈블리 인 액션(WebAssembly in Action) 

 

소프트웨어 캠퍼스(socam) 자비에(Xavier)

 

참고 : www.yes24.com/Product/Goods/92907281?OzSrank=1

웹어셈블리 인 액션

웹어셈블리 인 액셥 번역본 책을 보면서 내용을 정리하려고 합니다. 아마 요약정리가 될거구요. 웹어셈블리에 대해서 이해하고 싶으신 분들은 같이 보시면서 이해해 보면 좋지 않을까 싶습니다. 책도 많이 나오고, 할것들은 늘어만 가는군요 ㅠㅠ 아마 이번이 1편이 될거같고, 지속적으로 올릴것 같습니다.

 

1. 웹 어셈블리 소개

• ‘자바스크립트는 훌륭한 프로그래밍 언어이지만, 이 언어가 원래 의도한 것보다 더 많은 일(예: 계산량이 많은 게임 개발)을 더 빨리 수행하도록 만들 수는 없을까요?’ 라는 생각에서 성능 개선 방법을 모색하기 시작했다.
• 파이어 폭스 제작사인 모질라(Mozilla) 재단은 asm.js라는 자바스크립트 서브셋(subset, 작은 세트 )을 발표했다. asm.js는 웹 어셈블리의 전신이다.

2. asm.js

• 예제코드
  

function AsmModul(){
     "use asm";  // asm.js 코드가 나온다고 알리는 플래그
     return {
         add : function(a, b) {
             a = a | 0;  // 매개변수가 32비트 정수임을 알리는 타입 힌트
             b = b | 0;
             return (a + b) | 0; // 반환값이 32비트 정수임을 알리는 타입 힌트
         }
     }
}

• [장점]
• 직접 코드를 작성하는 대신 C/C++로 구현한 후 자바스크립트로 변환한다. 
• 이렇게 하나의 언어로 작성한 후 다른 언어로 변환하는 작업을 트랜스필링(transfiling)이라고 한다.
• “use asm”; 이라는 특수 문자열을 사용하면 고비용의 자바스크립트 대신 저비용의 시스템으로 수행하며, 계산량이 많은 코드를 더 빠르게 실행할 수 있다.
• 자바스크립트 엔진의 변수에 어떤 자료형인진는 모르겠지만 데이터만 할당한다는 타입힌트(type-hint)가 포함되어 있어 코드가 빠르게 실행된다.
  • a | 0 => a라는 변수에 32비트 정수를 할당하겠다는 의미
• [단점] 
• 타입힌트(type-hint) 때문에 파일이 커질 수 있다.
• 스마트폰 등의 디바이스에서는 로드 시간이 느려지거나 배터리가 빠르게 소모될 수 있다.
• 기능을 추가할 경우 브라우저 제작사가 자바스크립트 언어 자체를 수정해야 한다.
• 자바 스크립트는 원래 컴파일러 타깃으로 만든 프로그래밍 언어가 아니다.

3. MVP5(Minimum Viable Product)

• 웹 어셈블리 최소 요건을 충족하는 시제품(Minium Viable Product) 발표 
• 2017년 구글, 마이크로소프트, 애플, 모질라는 Wasm라는 MVP가 지원되도록 자사 브라우저를 업데이트 함.
• 웹어셈블리는 모든 현대 데스크톱 브라우저 및 대다수 모바일 브라우저에서 거의 네이티브 속도로 실행 가능한 언어 
• 웹어셈블리 파일은 빠르게 전달하고 내려받을 수 있도록 단순하게 압축된 형태로 만들어 졌고, 신속하게 파싱과 실행이 가능한 형태로 설계되었다.
• 웹어셈블리는 C++,러스트(Rust) 등 다른 언어로 작성된 코드를 웹에서 실행할 수 있도록 처음부터 컴파일된 결과물(컴파일 타깃) 형태로 설계됐다.
• 웹어셈블리는 개발자가 코드를 다시 작성할 필요 없이 기존코드를 재활용이 가능하다.
• 웹어셈블리는 이식성(portability)을 염두에 두고 만들어졌기 때문에 브라우저가 아닌 환경에서도 사용이 가능하다.(주로 웹브라우저에서 많이 사용)

4. 웹어셈블리인 MVP는 asm.js의 어떤 문제를 해결했나? 

• 성능개선
• 자바스크립트보다 실행 속도가 빠르다.
• 브라우저에서 자바스크립트 이외의 언어를 사용할 수 있다. 
• 코드를 재사용할 수 있다.

5. 웹어셈블리 동작 방식

WebAssembly 동작방식

JavaScript 동작방식

6. 컴파일러의 작동원리 

• 개발자가 작성한 코드 -> 컴파일러 프론트 엔드 -> IR -> 컴파일러 백엔드 -> .wasm(byte code) ->  브라우저가 실행중인 디바이스의 기계어로 컴파일
• IR(Intermediate Representation) : 중간 표현형

컴파일러의 작동 원리

7. 로딩, 컴파일, 모듈 인스턴스화

• ES6모듈과 상호작용이 적용되면 전용 HTML 태그(<script type=”module”>)로 웹어셈블리 모듈을 로드할 수 있다. 현재는 브라우저에서 Wasm파일을 로드하고, 자바스크립트 함수를 호출해야 한다. 
• Wasm은 검증, 기계어 컴파일, 인스턴스화 프로세스를 최대한 빨리 처리하기 위해 단일 패스로 검증될 수 있도록 고도로 구조화된 파일이다.
• 웹 브라우저에서 기계어로 컴파일된 다음에는 컴파일된 모듈을 웹워커나 다른 브라우저 창에 전달할 수 있다.
• 컴파일된 Wasm 파일은 인스턴스화 해야한다.
  • 인스턴스화(instantiation)란 필요한 객체를 모두 임포트하고, 모듈 구성요소들을 초기화 하고, 프로그램을 시작할 함수를 호출해서, 모듈 인스턴스들을 실행환경에 반영하는 것을 말한다.

8. 웹어셈블리 구조 

• 지원하는 자료형
  • 32비트 정수(integer)
  • 64비트 정수
  • 32비트 부동소수(float)
  • 64비트 부동소수
• 웹어셈블리 파일의 기본 구조
  

웹어셈블리 파일의 기본 구조

• Preamble
  1. 웹어셈블리를 인식하게 하는 매직넘버, 바이너리 포맷 버전
  2. 현재 바이너리 포맷 버전은 한가지
  3. 기능이 추가되더라도 전체 하위 호환성을 유지
• 표준 섹션(옵션)
  1. 각 표준세션은 한번만 넣을 수 있고, 순서가 정해져 있다.
  2. 고유한 사용방법이 있고, 구조가 명확하고, 모듈 인스턴스화 시점에 검증
• 커스텀 섹션(옵션)
  1. 모듈 내부에 데이터를 넣고 표준 섹션에 해당되지 않는 용도로 사용
  2. 모듈안 어디서나 여러번 나올 수 있다. 
  3. 여러 커스텀 섹션이 동일한 이름을 재사용도 가능하다.
  4. 커스텀 섹션은 정확하게 배치되지 않아도 에러가 발생하지 않음
  5. name이란 커스텀 섹션은 웹어셈블리 모듈 디버깅시 함수명,변수명을 텍스트 형식으로 모듈에 담아두는 용도로 사용하고, 딱 한번, Data 섹션 다음에만 옵니다.

9. 웹어셈블리 모듈을 작성할 수 있는 언어

• C/C++
• 러스트(Rust) : 웹어셈블리를 위한 프로그래밍 언어를 목표로 한다.
• 어셈블리스크립트(AsemblyScript) : 타입스크립트를 받아 웹어셈블리로 변환하는 새로운 컴파일러이다. 
• TeaVM : 자바를 자바스크립트로 트랜스파일하는 툴로서, 지금은 웹어셈블리도 생성한다.
• Go : 1.11 버전부터 가비지 수집기를 컴파일된 웹어셈블리 모듈의 일부로 포함하여 포팅하는 실험을 진행중이다. 
• 파이어다이드(Pyodide) : 파이썬의 과학 기술 계산(Numpy, Pandas, Matplotlib)의 코어 패키지를 포함한 파이썬 런타임이다.
• 블레이저(Blazor) : C#을 웹어셈블리에 가져오기 위해 마이크로소프트 사에서 실험중인 웹 프레임워크이다.
• 웹어셈블리로 컴파일 가능한 언어와 자체 VM을 갖고 있는 언어를 잘 정리해 놓은 사이트
  • URL https://github.com/appcypher/awesome-wasm-langs

10. 웹어셈블리는 왜 안전한가? 

• 실행환경과 격리되어 오랫동안 보안 테스트를 거치면서 견고해진 자바스크립트 VM을 공유하는 최초의 언어이기 때문이다. 
• 자바스크립트로 접근할 수 없는 것은 당연히 웹어셈블리도 접근할 수 없다.
• 웹어셈블리 모듈은 디바이스 메모리에 접근할 수 없기 때문에 모듈 인스턴스화 시 실행되는 환경에서 모듈에게 ArrayBuffer를 전달한다.
• 모듈은 이 ArrayBuffer를 선형 메모리로 사용하고 웹어셈블리 프레임워크는 코드를 이 배열의 경계 내에서 작동시킨다.
• 웹어셈블리 실행 스택은 선형 메모리와 떨어져 있고, 코드로 접근이 불가하다.
• 웹어셈블리 보안 모델에 관한 자세한 내용 
  • https://webassembly.org/docs/security/

11. 웹어셈블리 모듈은 어떻게 활용 가능한가? 

• 웹어셈블리는 처음부터 이식성을 염두에 두고 설계됐기 때문에 브라우저 아닌 환경에서도 사용할 수 있다.
• 대표적 브라우저가 아닌 환경 : Node.js(V8.0+)
• 웹어셈블리는 자바스크립트를 대체하는 기술이 아니라 보완하는 기술
• 하여, 웹어셈블리 기술과 자바스크립트 기술중 상황에 맞게 더 적합한 기술을 사용하면 된다.
• 또한, 언어에 능통한 개발자들이 만든 코드를 웹에서도 동작할 수 있도록 해줄 것이다.

12. 웹어셈블리는 왜 안전한가?

• 실행환경과 격리되어 오랫동안 보안 테스트를 거치면서 견고해진 자바스크립트 VM을 공유하는 최초의 언어이기 때문이다. 
• 자바스크립트로 접근할 수 없는 것은 당연히 웹어셈블리도 접근할 수 없다.
• 웹어셈블리 모듈은 디바이스 메모리에 접근할 수 없기 때문에 모듈 인스턴스화 시 실행되는 환경에서 모듈에게 ArrayBuffer를 전달한다.
• 모듈은 이 ArrayBuffer를 선형 메모리로 사용하고 웹어셈블리 프레임워크는 코드를 이 배열의 경계 내에서 작동시킨다.
• 웹어셈블리 실행 스택은 선형 메모리와 떨어져 있고, 코드로 접근이 불가하다.
• 웹어셈블리 보안 모델에 관한 자세한 내용
  • webassembly.org/docs/security/