웹어셈블리 [Wasm과 C/C++를 이용한 고성능 웹 애플리케이션 개발]
- 원서명Learn WebAssembly: Build web applications with native performance using Wasm and C/C++ (ISBN 9781788997379)
- 지은이마이크 루크(Mike Rourke)
- 옮긴이윤우빈
- ISBN : 9791161752990
- 30,000원
- 2019년 04월 30일 펴냄
- 페이퍼백 | 388쪽 | 188*235mm
- 시리즈 : acorn+PACKT, 프로그래밍 언어
책 소개
소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
본문에 쓰인 컬러 이미지는 여기에서 내려 받으세요.
요약
웹어셈블리가 무엇인지, 웹어셈블리 모듈을 어떻게 작성하고 빌드하는지가 궁금하다면 이 책을 보자. 작성한 웹어셈블리 모듈과 자바스크립트가 어떻게 상호작용하는지, 웹어셈블리를 이용해서 어떤 웹 애플리케이션을 만들 수 있는지 자세히 배울 수 있다.
이 책에서 다루는 내용
■ 웹어셈블리의 개념과 관련 요소(텍스트 포맷, 모듈, 자바스크립트 API)
■ 웹어셈블리 모듈 생성과 로드, 디버깅(에디터와 컴파일러, 툴체인)
■ C와 웹어셈블리를 이용한 고성능 애플리케이션 작성 방법
■ 기존의 C++로 작성된 게임을 Emscripten을 이용해 웹어셈블리로 포팅
■ 웹어셈블리의 향후 기능과 Node.js와의 통합, 또 다른 컴파일 방법
이 책의 대상 독자
웹을 위한 애플리케이션을 만들고자 하는 C/C++ 프로그래머이거나 자바스크립트 애플리케이션의 성능을 향상시키고자 하는 웹 개발자라면 이 책은 여러분을 위한 책이다. 이 책은 C와 C++를 배우는 것을 개의치 않는 자바스크립트 개발자나 또는 그 반대 경우의 개발자를 대상으로 한다. C/C++ 프로그래머와 자바스크립트 프로그래머를 위해 두 가지의 예제를 제공한다.
이 책의 구성
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 페이지
- 실행과 테스트
- 요약
- 질문
- 추가 자료
- 글루 코드로 C 컴파일
- 6장. 자바스크립트와의 상호작용과 디버깅
- Emscripten Module과 WebAssembly 객체
- Emscripten의 Module이 무엇일까?
- 글루 코드의 디폴트 메소드
- WebAssembly 객체와의 차이점
- 자바스크립트에서 컴파일된 C/C++ 함수 호출
- Module에서 함수 호출
- 웹어셈블리 인스턴스에서 함수 호출
- C/C++에서 자바스크립트 함수 호출
- 글루 코드를 이용한 자바스크립트와의 통합
- 글루 코드 이용 예
- 글루 코드 없이 자바스크립트와 통합
- 글루 코드 없는 예
- 고급 Emscripten 기능
- Embind
- 파일 시스템 API
- Fetch API
- 브라우저에서 디버깅
- 하이 레벨의 개요
- 소스 맵 이용
- 요약
- 질문
- 추가 자료
- Emscripten Module과 WebAssembly 객체
- 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로 웹어셈블리 모듈 테스트
- 테스트 대상 코드
- 테스트 설정
- 테스트 파일
- 테스트 실행
- 요약
- 질문
- 추가 자료
- 왜 Node.js인가?
- 10장. 고급 도구와 향후 기능
- WABT와 Binaryen
- WABT-웹어셈블리 바이너리 툴킷
- Binaryen
- LLVM으로 컴파일
- 설치 과정
- 예제 코드
- 컴파일과 실행
- 온라인 도구
- WasmFiddle
- WebAssembly Explorer
- WebAssembly Studio
- Web Workers로 Wasm 병렬 처리
- Web Workers와 웹어셈블리
- 코드의 개요
- C 코드
- 자바스크립트 코드
- 웹 자산
- 애플리케이션 빌드와 실행
- 향후 기능
- 표준화 절차
- 스레드
- 호스트 바인딩
- 가비지 컬렉션
- 레퍼런스 타입
- 요약
- 질문
- 추가 자료
- WABT와 Binaryen