티스토리 뷰
WebAssembly(웹어셈블리, WASM)는 웹에서 고성능 코드를 실행하기 위해 설계된 이진 코드 형식입니다. 주로 웹 브라우저에서 JavaScript와 함께 실행되지만, 높은 성능이 요구되는 연산을 위해 C, C++, Rust 등 다른 언어로 작성된 코드를 컴파일하여 브라우저에서 실행할 수 있도록 지원합니다. WASM의 주요 특징과 간단한 예제를 통해 알아보겠습니다.
1. WASM의 주요 특징
- 고성능: WASM은 바이너리 형식으로 작성되어 브라우저가 빠르게 로드하고 실행할 수 있습니다. 특히 대규모 연산이나 복잡한 계산이 필요한 작업에서 JavaScript보다 빠르게 동작합니다.
- 다양한 언어 지원: C, C++, Rust, Go 등 여러 언어로 코드를 작성하고 이를 WebAssembly로 컴파일하여 웹 환경에서 실행할 수 있습니다.
- 보안성: WebAssembly는 브라우저의 샌드박스 환경 내에서 실행되므로, 네이티브 코드의 보안 문제를 최소화하고 안전하게 사용할 수 있습니다.
- 이식성: 모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 WebAssembly를 지원하며, 운영체제와 하드웨어의 제약 없이 실행됩니다.
- JavaScript와의 상호 운용성: JavaScript와의 상호 작용이 가능하여, JavaScript 코드에서 WebAssembly 모듈을 호출하거나, WebAssembly 내에서 JavaScript API를 사용할 수 있습니다.
2. WASM 예제
- 이번 예제에서는 C 코드로 작성된 간단한 수학 연산을 WebAssembly로 컴파일하여 웹 브라우저에서 사용하는 방법을 다뤄보겠습니다.
2.1. C코드 작성
// math.c
#include <stdio.h>
int add(int a, int b) {
return a + b;
}- C언어로 간단한 덧셈 함수를 구현합니다.
2.2. C코드 WASM 컴파일
- C코드를 WASM로 컴파일하기 위해, Emscripten을 사용합니다.
emcc math.c -o math.js -s WASM=1 -s EXPORTED_FUNCTIONS='_add' -s EXPORTED_RUNTIME_METHODS='cwrap'- emcc 가 설치되지 않으신분들은 아래 절차대로 진행해주세요.
Python 3.6 이상 설치
git 설치- Python 은 3.6 이상 설치해야하며, "python --version" 명령어를 통해 설치된 버전을 확인할 수 있습니다.
git clone https://github.com/emscripten-core/emsdk.git
emsdk install latest
emsdk activate latest
source emsdk_env.bat
# 또는 경로로 이동후 emsdk_env.bat 클릭- emsdk 다운로드 및 설치를 진행합니다.
- 환경 변수를 등록합니다. (ex. D:\emscripten\emsdk\upstream\emscripten)
- 위 과정을 마치면 "emcc -v" 명령어를 통해 버전을 확인할 수 있습니다.
2.3. HTML 파일 작성(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebAssembly Example</title>
</head>
<body>
<h1>WebAssembly Example: Add Function</h1>
<p id="result">Result will appear here.</p>
<!-- WebAssembly 모듈 포함 -->
<script src="math.js"></script>
<script>
// WebAssembly 모듈을 로드하고 add 함수 호출
Module.onRuntimeInitialized = () => {
const add = Module.cwrap('add', 'number', ['number', 'number']);
const result = add(10, 20);
document.getElementById('result').innerText = `Result: ${result}`;
};
</script>
</body>
</html>- Module.cwrap: cwrap을 사용해 C에서 작성한 add 함수를 JavaScript에서 호출 가능한 함수로 래핑합니다.
- Module.onRuntimeInitialized: WebAssembly 모듈이 로드된 후 호출되는 이벤트로, 이 안에서 add 함수를 호출하여 결과를 웹 페이지에 표시합니다.
2.4. 웹 서버 실행
- 일반적으로 WebAssembly 파일(.wasm)은 HTTP 서버에서 제공되어야 합니다.
python -m http.server 9000- 브라우저에서 http://localhost:9000에 접속하여 결과를 확인할 수 있습니다. 페이지에 "Result: 30"이라는 결과가 표시되면 성공적으로 WebAssembly가 작동한 것입니다.
감사합니다.
'웹기술' 카테고리의 다른 글
| [CWV] Core Web Vitals 특징과 간단한 예제 (1) | 2024.11.20 |
|---|---|
| [시네마틱 스크롤링] Cinematic Scrolling 특징과 간단한 예제 (2) | 2024.11.15 |
| [JAM 스택] JAM Stack 특징과 간단한 예제 (2) | 2024.11.14 |
| [TFJS] TensorFlowJS 특징과 간단한 예제 (5) | 2024.11.13 |
| [PWA] Progressive Web Apps 특징과 간단한 예제 (0) | 2024.11.12 |
최근에 올라온 글
- Total
- Today
- Yesterday