WebAssembly · 01 모듈과 선형 메모리
단계: 모듈과 수치 계약 · 편집 가능한 예제 · 저장 ID: webassembly-01
목표와 학습 후 역량
- 학습 결과: 모듈 경계의 역할을 설명한다. 입력 사례: [1,2,3]과 잘못된 파일 경로.
- 산출물: JS·Wasm 합계 6 및 로딩 오류 기록. 미리보기 범위 처리 근거를 코드와 연결해 설명한다.
선수 지식
JavaScript·TypedArray, 선택한 컴파일 언어 기초를 이해하고 기존 시작 예제의 입력과 출력을 읽을 수 있다.
핵심 개념과 설명
모듈 경계
Wasm은 컴파일된 모듈의 export를 호출한다. DOM 조작은 일반적으로 JS가 맡는다.
미리보기 범위
기존 첫 예제는 WebAssembly.Memory를 관찰한다. 모듈을 컴파일하거나 계산을 가속하는 예제는 아니다.
실습 준비
iframe 미리보기는 WebAssembly.Memory와 JS 기준 계산 실험이며 실제 Wasm 모듈 실행으로 표시하지 않는다. 실제 모듈 실습은 별도 Node 22+ 또는 통제한 로컬 웹 프로젝트에서 한다. 기존 src/labs/webassembly-02·03의 kernel.wat·kernel.wasm·benchmark.mjs를 사용하며 WAT 수정 시 공식 wat2wasm 도구로 다시 빌드한다. CSP·격리를 완화하지 않고 측정값은 직접 기록한다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 별도 실습 프로젝트의 day-1.mjs에 기존 Memory 예제를 읽고 별도 Node에서 webassembly-02의 kernel.wasm을 instantiate해 sum을 호출한다. 기존 1·14·28단위 예제는 출발점으로만 참고한다.
- 입력 조건: [1,2,3]과 잘못된 파일 경로. 기준: 유효한 wasm. 기준 조건에서 실행한 뒤 관찰값과 오류를 notes/day-1.md에 남긴다.
- 변경 변수: 파일 경로. 변경값: 없는 파일. 같은 입력 경로로 다시 실행한다. 저장할 산출물: JS·Wasm 합계 6 및 로딩 오류 기록. 확인할 가설: 정상 결과와 로딩 실패가 구분된다. 실제 결과와 비교해 일치 여부 및 차이의 원인을 기록한다.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 파일 경로 | 유효한 wasm | 없는 파일 | 정상 결과와 로딩 실패가 구분된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 필수 산출물: JS·Wasm 합계 6 및 로딩 오류 기록. 기준 및 변경 조건 각각의 결과가 있어 총 2조건을 비교할 수 있고, 입력값과 실행 환경을 함께 기록했다.
- 두 조건의 차이에 관한 설명에 다음 개념을 모두 연결했다: 모듈 경계, 미리보기 범위. 예상과 다른 항목은 원인 또는 미해결 이유를 1개 이상 적었다.
자가 점검
- 이번 실습에서 모듈 경계 개념은 어느 처리 단계에 영향을 주는가? 입력 사례: [1,2,3]과 잘못된 파일 경로.
- 변경 변수: 파일 경로. 확인할 가설: 정상 결과와 로딩 실패가 구분된다. 실제 결과가 가설과 일치했는가? 미리보기 범위 관점에서 근거를 설명하라.
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.