웹어셈블리

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 코드
____자바스크립트 코드
____웹 자산
____애플리케이션 빌드와 실행
__향후 기능
____표준화 절차
____스레드
____호스트 바인딩
____가비지 컬렉션
____레퍼런스 타입
__요약
__질문
__추가 자료