소장자료검색

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

★ 이 책에서 다루는 내용 ★

- 웹어셈블리의 개념과 관련 요소(텍스트 포맷, 모듈, 자바스크립트 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와 웹어셈블리가 어떻게 함께 사용되는지에 대해서도 배우게 될 것이다. 표준화 절차와 스펙에 추가되기 위한 과정에 있는 몇 가지 흥미로운 기능을 살펴본다.

★ 지은이의 말 ★

이 책은 브라우저에서 자바스크립트가 아닌 다른 언어를 실행시켜주는 새롭고 흥미로운 기술인 웹어셈블리를 소개한다. 웹어셈블리를 이용하는 C/자바스크립트 애플리케이션을 처음부터 구현하는 방법과 기존의 C++로 작성된 코드를 Emscripten의 도움으로 브라우저에서 실행되는 코드로 포팅하는 과정을 설명한다.
웹어셈블리는 웹 플랫폼의 중요한 변화를 의미한다. C와 C++, Rust와 같은 언어를 대상으로 컴파일할 수 있게 해주기 때문에 새로운 종류의 애플리케이션을 만들 수 있다. 주요 브라우저는 웹어셈블리를 지원하며 이는 곧 브라우저 개발사들이 공동으로 노력한다는 것을 뜻한다.
이 책에서는 웹어셈블리의 기원뿐만 아니라 웹어셈블리를 구성하는 요소도 설명할 것이다. 필요한 도구를 설치하고 개발 환경을 셋업하며 웹어셈블리와 상호작용하는 과정 전체를 살펴볼 것이다. 간단한 예제로 시작해서 점점 더 발전적인 사용 사례들을 살펴볼 것이다. 이 책을 다 읽고 나면 C, C++ 또는 자바스크립트 프로젝트에 웹어셈블리를 사용할 준비가 될 것이다.

★ 옮긴이의 말 ★

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

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 코드

____자바스크립트 코드

____웹 자산

____애플리케이션 빌드와 실행

__향후 기능

____표준화 절차

____스레드

____호스트 바인딩

____가비지 컬렉션

____레퍼런스 타입

__요약

__질문

__추가 자료