웹어셈블리가 무엇인지, 웹어셈블리 모듈을 어떻게 작성하고 빌드하는지가 궁금하다면 이 책을 보자. 작성한 웹어셈블리 모듈과 자바스크립트가 어떻게 상호작용하는지, 웹어셈블리를 이용해서 어떤 웹 애플리케이션을 만들 수 있는지 자세히 배울 수 있다.

이 책의 구성

1장, ‘웹어셈블리란 무엇인가’에서는 웹어셈블리의 기원과 기술에 관해 개요를 간략하게 설명한다. 웹어셈블리가 어떻게 사용되고, 어떤 프로그래밍 언어가 지원되는지, 현재 어떤 제한이 있는지 설명한다.
2장, ‘웹어셈블리의 요소 - Wat, Wasm, 그리고 자바스크립트 API’에서는 웹어셈블리를 구성하는 요소를 설명한다. 텍스트 포맷과 바이너리 포맷을 자세히 설명하며 이와 관련된 자바스크립트 API와 Web API에 대해서도 설명한다.
3장, ‘개발 환경 세팅’에서는 웹어셈블리로 개발하는 데 사용되는 도구를 알아본다. 각 플랫폼별 설치 방법과 개발 경험을 향상시키기 위한 권장 내용도 포함한다.
4장, ‘필수 종속성 설치’에서는 각 플랫폼별로 설치가 필요한 툴체인 설치 방법을 제공한다. 4장을 통해 C와 C++를 웹어셈블리 모듈로 컴파일할 수 있게 될 것이다.
5장, ‘웹어셈블리 모듈 생성과 로딩’에서는 Emscripten을 이용해 웹어셈블리 모듈을 만드는 방법과 컴파일러 출력물에 영향을 주는 플래그를 컴파일러에 전달하는 방법을 설명한다. 브라우저에서 웹어셈블리 모듈을 로딩하는 기술에 대해서도 설명한다.
6장, ‘자바스크립트와의 상호작용과 디버깅’에서는 Emscripten의 Module 객체와 브라우저의 전역 WebAssembly 객체와의 차이에 대해 자세히 설명한다. Emscripten이 제공하는 기능과 소스 맵을 만드는 절차에 대해서도 설명한다.
7장, ‘웹 어셈블리 애플리케이션 만들기’에서는 웹어셈블리 모듈과 상호작용하는 자바스크립트 회계 애플리케이션을 만들어 볼 것이다. 회계 거래를 계산하고 자바스크립트와 컴파일된 웹어셈블리 모듈 간에 데이터를 전단하기 위한 C 코드를 작성할 것이다.
8장, ‘Emscripten으로 게임 포팅’에서는 기존의 C++ 게임을 Emscripten을 이용해서 웹어셈블리로 포팅하는 과정을 단계별로 설명한다. 기존의 C++ 코드를 검토한 후에는 게임이 브라우저에서 실행될 수 있도록 적절히 파일을 수정할 것이다.
9장, ‘Node.js와 통합’에서는 서버와 클라이언트에서 Node.js와 npm이 웹어셈블리에서 어떻게 사용되는지 설명한다. Express 애플리케이션에서의 웹어셈블리 사용과 웹어셈블리와 webpack과의 통합 그리고 Jest를 이용해서 웹어셈블리를 테스트하는 방법을 설명한다.
10장, ‘고급 도구와 향후 기능’에서는 고급 도구와 사용 사례, 현재 표준화 절차에 있는 새로운 웹어셈블리의 기능을 설명한다. 또한 WABT과 Binaryen, 온라인에서 사용 가능한 도구에 관해서도 설명한다. LLVM을 이용해서 웹어셈블리 모듈로 컴파일하는 방법과 Web Workers와 웹어셈블리가 어떻게 함께 사용되는지에 대해서도 배우게 될 것이다. 표준화 절차와 스펙에 추가되기 위한 과정에 있는 몇 가지 흥미로운 기능을 살펴본다.

1장. 웹어셈블리란 무엇인가
웹어셈블리로의 여정
자바스크립트의 진화
구글과 네이티브 클라이언트
모질라와 asm.js
웹어셈블리의 탄생
웹어셈블리가 정확히 무엇이고 어디에 사용할 수 있는가?
공식적인 정의
Core Specification
자바스크립트와 Web API
그렇다면 웹어셈블리가 자바스크립트를 대체할까?
어디에서 사용할 수 있을까?
어떤 언어가 지원되는가?
C와 C++
Rust
다른 언어들
웹어셈블리의 한계는 무엇인가?
가비지 컬렉션()이 없음
DOM에 대한 직접적인 접근이 없음
오래된 브라우저에 대한 지원이 없음
Emscripten과의 관계
Emscripten의 역할
EMSDK와 Binaryen
요약
질문
추가 자료

2장. 웹어셈블리의 요소 - Wat, Wasm 그리고 JavaScript API
공통 구조와 추상 구문
Wat
정의와 S-표현
값, 타입 그리고 명령
개발 과정에서의 역할
바이너리 포맷과 모듈 파일
정의와 모듈 개요
모듈 섹션
자바스크립트 API와 Web API
웹어셈블리 저장소와 객체 캐시
모듈 로딩과 웹어셈블리 네임스페이스 메소드
WebAssembly 객체
WasmFiddle을 이용한 개념 연결
WasmFiddle이란?
C 코드에서 Wat로
Wasm에서 자바스크립트로
요약
질문
추가 자료

3장. 개발 환경 세팅
개발 툴 설치
운영체제와 하드웨어
패키지 매니저
Git
Node.js
GNU make와 rimraf
VS Code
VS Code 설정
설정과 사용자 정의 관리
확장 프로그램 개요
C/C++와 웹어셈블리를 위한 설정
다른 유용한 확장 프로그램들
Bracket pair colorizer
웹을 위한 설정
책 예제 코드 저장소 복제
로컬 서버 설치
브라우저 확인
다른 툴들
맥OS를 위한 iTerm2
우분투를 위한 Terminator
윈도우를 위한 cmder
Zsh와 Oh-My-Zsh
요약
질문
추가 자료

4장. 필수 종속성 설치
개발 워크플로
워크플로의 단계
워크플로에 툴을 통합
Emscripten과 EMSDK
Emscripten 개요
EMSDK는 어디에 적합한가?
필수 구성 요소 설치
공통적으로 필요한 필수 구성 요소
맥OS에 필수 구성 요소 설치하기
우분투에 필수 구성 요소 설치하기
윈도우에 필수 구성 요소 설치하기
EMSDK 설치와 설정
모든 플랫폼에서의 설치 절차
맥OS와 우분투에서의 설치
윈도우에서의 설치와 설정
VS Code 설정
컴파일러 테스트
C 코드
C 코드 컴파일
요약
질문
추가 자료

5장. 웹어셈블리 모듈 생성과 로딩
글루 코드로 C 컴파일
예제 C 코드 작성
예제 C 코드 컴파일
Emscripten 모듈 로딩
사전에 생성된 로딩 코드
사용자 정의 로딩 코드 작성
글루 코드 없이 C 컴파일
웹어셈블리를 위한 C 코드
VS Code의 Build Task로 컴파일
Wasm 파일을 가져오고 인스턴스화하기
일반적인 자바스크립트 로딩 코드
HTML 페이지
실행과 테스트
요약
질문
추가 자료

6장. 자바스크립트와의 상호작용과 디버깅
Emscripten Module과 WebAssembly 객체
Emscripten의 Module이 무엇일까?
글루 코드의 디폴트 메소드
WebAssembly 객체와의 차이점
자바스크립트에서 컴파일된 C/C++ 함수 호출
Module에서 함수 호출
웹어셈블리 인스턴스에서 함수 호출
C/C++에서 자바스크립트 함수 호출
글루 코드를 이용한 자바스크립트와의 통합
글루 코드 이용 예
글루 코드 없이 자바스크립트와 통합
글루 코드 없는 예
고급 Emscripten 기능
Embind
파일 시스템 API
Fetch API
브라우저에서 디버깅
하이 레벨의 개요
소스 맵 이용
요약
질문
추가 자료

7장. 웹어셈블리 애플리케이션 만들기
분식 회계-웹어셈블리를 신뢰성 있게 만들기
개요와 기능
사용된 자바스크립트 라이브러리
C와 빌드 절차
프로젝트 셋업
Node.js 설정
파일과 폴더 추가
빌드 절차 설정
목업 API 설정
C stdlib Wasm 다운로드
최종 결과
C 부분 빌드
개요
C 파일 내용
Wasm으로 컴파일
자바스크립트 부분 빌드
개요
initializeWasm.js에서 Wasm 인스턴스 생성
WasmTransactions.js에서 Wasm과 상호작용
api.js에서 API 이용
store.js에서 전역 상태 관리
main.js에서 애플리케이션 로드
웹 자산 추가
Vue 컴포넌트 생성
애플리케이션 실행
/src 폴더 확인
시작!
테스트
마무리
요약
질문
추가 자료

8장. Emscripten으로 게임 포팅
게임의 개요
테트리스 게임
소스코드의 출처
테트리스 소스코드 가져오기
네이티브 프로젝트 빌드
게임 실행
코드의 세부 내용
코드를 객체로 분해하기
constants 파일
piece 클래스
Board 클래스
Game 클래스
main.cpp 파일
Emscripten으로 포팅
포팅을 위한 준비
무엇이 변경되는가?
웹 자산 추가
기존 코드 포팅
게임 빌드와 실행
VS Code Task로 빌드
Makefile로 빌드
게임 실행
요약
질문
추가 자료

9장. Node.js와 통합
왜 Node.js인가?
매끄러운 통합
상호 보완적인 기술
npm으로 개발
xpress를 이용한 서버 사이드 웹어셈블리
프로젝트 개요
Express 설정
Node.js로 Wasm 모듈 인스턴스화
목업 데이터베이스 만들기
웹어셈블리 모듈과의 상호작용
애플리케이션 빌드와 실행
Webpack을 이용한 클라이언트 사이드 웹어셈블리
프로젝트 개요
Webpack이 무엇인가?
Webpack 설치와 설정
C 코드
자바스크립트 코드
애플리케이션 빌드와 실행
Jest로 웹어셈블리 모듈 테스트
테스트 대상 코드
테스트 설정
테스트 파일
테스트 실행
요약
질문
추가 자료

10장. 고급 도구와 향후 기능
WABT와 Binaryen
WABT-웹어셈블리 바이너리 툴킷
Binaryen
LLVM으로 컴파일
설치 과정
예제 코드
컴파일과 실행
온라인 도구
WasmFiddle
WebAssembly Explorer
WebAssembly Studio
Web Workers로 Wasm 병렬 처리
Web Workers와 웹어셈블리
코드의 개요
C 코드
자바스크립트 코드
웹 자산
애플리케이션 빌드와 실행
향후 기능
표준화 절차
스레드
호스트 바인딩
가비지 컬렉션
레퍼런스 타입
요약
질문
추가 자료