웹어셈블리 (Wasm과 C/C++를 이용한 고성능 웹 애플리케이션 개발)

마이크루크

10년넘게코드를작성해왔다.VBA로마이크로소프트액세스애플리케이션작성을시작했고모질라파이어폭스확장프로그램(MozillaFirefoxextension)을작성한이후,자바스크립트풀타임개발자로일하기로결정했다.기계공학을전공했으며2017년소프트웨어엔지니어가되기전에는주로제품설계/제조엔지니어로일했다.현재시카고에기반을둔컨설팅회사에서일하고있으며프론트엔드자바스크립트개발에몰두하고있다.코드를작성하지않을때는소울메이트들과함께캠핑하기위해숲으로간다

지은이소개
기술감수자소개
옮긴이소개
옮긴이의말
들어가며

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

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

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

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

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

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

7장.웹어셈블리애플리케이션만들기
__분식회계-웹어셈블리를신뢰성있게만들기
____개요와기능
____사용된자바스크립트라이브러리
____C와빌드절차
____프로젝트셋업
____Node.js설정
____파일과폴더추가
____빌드절차설정
____목업API설정
____CstdlibWasm다운로드
____최종결과
__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으로포팅
____포팅을위한준비
____무엇이변경되는가?
____웹자산추가
____기존코드포팅
__게임빌드와실행
____VSCodeTask로빌드
____Makefile로빌드
____게임실행
__요약
__질문
__추가자료

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

10장.고급도구와향후기능
__WABT와Binaryen
____WABT-웹어셈블리바이너리툴킷
____Binaryen
__LLVM으로컴파일
____설치과정
____예제코드
____컴파일과실행
__온라인도구
____WasmFiddle
____WebAssemblyExplorer
____WebAssemblyStudio
__WebWorkers로Wasm병렬처리
____WebWorkers와웹어셈블리
____코드의개요
____C코드
____자바스크립트코드
____웹자산
____애플리케이션빌드와실행
__향후기능
____표준화절차
____스레드
____호스트바인딩
____가비지컬렉션
____레퍼런스타입
__요약
__질문
__추가자료

찾아보기

★이책에서다루는내용★

■웹어셈블리의개념과관련요소(텍스트포맷,모듈,자바스크립트API)
■웹어셈블리모듈생성과로드,디버깅(에디터와컴파일러,툴체인)
■C와웹어셈블리를이용한고성능애플리케이션작성방법
■기존의C++로작성된게임을Emscripten을이용해웹어셈블리로포팅
■웹어셈블리의향후기능과Node.js와의통합,또다른컴파일방법

★이책의대상독자★

웹을위한애플리케이션을만들고자하는C/C++프로그래머이거나자바스크립트애플리케이션의성능을향상시키고자하는웹개발자라면이책은여러분을위한책이다.이책은C와C++를배우는것을개의치않는자바스크립트개발자나또는그반대경우의개발자를대상으로한다.C/C++프로그래머와자바스크립트프로그래머를위해두가지의예제를제공한다.

★이책의구성★

1장,‘웹어셈블리란무엇인가’에서는웹어셈블리의기원과기술에관해개요를간략하게설명한다.웹어셈블리가어떻게사용되고,어떤프로그래밍언어가지원되는지,현재어떤제한이있는지설명한다.
2장,‘웹어셈블리의요소-Wat,Wasm,그리고자바스크립트API’에서는웹어셈블리를구성하는요소를설명한다.텍스트포맷과바이너리포맷을자세히설명하며이와관련된자바스크립트API와WebAPI에대해서도설명한다.
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을이용해서웹어셈블리모듈로컴파일하는방법과WebWorkers와웹어셈블리가어떻게함께사용되는지에대해서도배우게될것이다.표준화절차와스펙에추가되기위한과정에있는몇가지흥미로운기능을살펴본다.

★옮긴이의말★

웹어셈블리는기존의웹애플리케이션개발패러다임을바꿀수있는기술로,앞으로어떻게성장하고발전해나갈것인지관심갖고지켜봐야하는분야다.아직일반적으로사용되기에는진입장벽이있고부족한점도있지만기술자체의개념과목적,필요성이명확하기때문에대부분의웹브라우저벤더에서이미웹어셈블리를지원하고있다.
비록지금은다른웹기술에비해서상대적으로많은관심을받거나사용되는것은아니지만,웹어셈블리를사용해기존보다빠른성능의웹애플리케이션을만들수있다.그리고이를통해서사용자들에게다양하고풍부한웹경험을제공할수있다.비단PC나모바일의웹브라우저기반의웹애플리케이션뿐만아니라,잠재적으로IoT나자동차,로봇등다양한플랫폼에도네이티브애플리케이션처럼적용이가능하다고생각한다.
이책을통해웹어셈블리가무엇이며,웹어셈블리모듈을어떻게작성하고빌드하는지,작성한웹어셈블리모듈과자바스크립트가어떻게상호작용하며웹어셈블리를이용해서어떤웹애플리케이션을만들수있는지자세히알게될것이다.