<div id="readability-page-1" class="page"><div>
												
<p>wasm-pack을 사용하여 아주 간단하게 "Hello World" 웹 애플리케이션을 빌드하는 과정을 소개합니다.</p>
<h2>사전 준비 (Prerequisites)</h2>
<ul>
<li>
<p>Rust 설치</p>
<p><a href="https://www.skyer9.pe.kr/wordpress/?p=6512">https://www.skyer9.pe.kr/wordpress/?p=6512</a></p>
</li>
<li>
<p>wasm-pack 설치</p>
<p>일반 CMD 대신 <code>Developer PowerShell for VS 2022</code> 를 실행하고 아래 명령을 입력합니다.</p>
<pre><code>cargo install wasm-pack</code></pre>
</li>
</ul>
<p>kernel32.lib 관련 오류가 발생하면, Visual Studio Installer 를 실행하고, 수정 버튼을 누른 후, 개별 구성 요소 탭으로 이동 후, Windows SDK 검색 후, <code>Windows 11 SDK (10.0.22621.0)</code> 를 설치해 줍니다.</p>
<p><img decoding="async" src="https://www.skyer9.pe.kr/wordpress/wp-content/uploads/2026/02/image-1770350704137.png" alt="file"></p>
<h2>프로젝트 생성 및 설정</h2>
<h3>프로젝트 생성</h3>
<pre><code>cargo new --lib hello-wasm
cd hello-wasm</code></pre>
<h3>Cargo.toml 설정</h3>
<pre><code>[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"</code></pre>
<h2>Rust 코드 작성</h2>
<p>src/lib.rs 파일을 열고 기존 내용을 지운 뒤, 브라우저의 alert 창을 띄우는 코드를 작성합니다.</p>
<pre><code>use wasm_bindgen::prelude::*;

// JavaScript의 alert 함수를 사용하기 위한 선언
#[wasm_bindgen]
extern "C" {
    fn alert(s: &amp;str);
}

// JavaScript에서 호출할 수 있도록 내보내는 함수
#[wasm_bindgen]
pub fn greet(name: &amp;str) {
    alert(&amp;format!("Hello, {}! Welcome to WASM.", name));
}</code></pre>
<h2>WebAssembly 빌드</h2>
<p>빌드가 완료되면 프로젝트 폴더 내에 pkg/ 디렉토리가 생성됩니다.</p>
<pre><code>wasm-pack build --target web</code></pre>
<h2>웹페이지에서 실행하기</h2>
<p>프로젝트 루트에 index.html을 만드세요.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Rust Wasm Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script type="module"&gt;
        // 빌드된 pkg 폴더에서 init과 greet 함수를 가져옵니다.
        import init, { greet } from './pkg/hello_wasm.js';

        async function run() {
            // Wasm 모듈 초기화
            await init();
            // Rust 함수 실행
            greet("Rust World");
        }

        run();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h2>로컬 서버 실행</h2>
<pre><code># Python이 있다면
python3 -m http.server
# 또는 npx 사용
npx serve .</code></pre>
<p>이제 브라우저에서 localhost:8000 또는 localhost:3000 에 접속하면, Rust로 작성된 함수가 실행되어 "Hello, Rust World! Welcome to WASM." 이라는 알림창이 뜨는 것을 확인할 수 있습니다!</p>
<h2>html 수정</h2>
<h3>Cargo.toml 설정 추가</h3>
<pre><code>[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
# HTML 조작을 위한 라이브러리 추가
web-sys = { version = "0.3", features = ['Document', 'Element', 'HtmlElement', 'Node', 'Window'] }</code></pre>
<h3>src/lib.rs 수정</h3>
<pre><code>use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &amp;str) {
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");

    // ID가 "output"인 엘리먼트를 찾아서 내용을 바꿉니다.
    if let Some(element) = document.get_element_by_id("output") {
        element.set_inner_html(&amp;format!("Hello, {}! (from Rust)", name));
    }
}</code></pre>
<h3>HTML 파일 수정</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Rust Wasm Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="output"&gt;기다리는 중...&lt;/h1&gt;
    &lt;script type="module"&gt;
        // 빌드된 pkg 폴더에서 init과 greet 함수를 가져옵니다.
        import init, { greet } from './pkg/hello_wasm.js';

        async function run() {
            // Wasm 모듈 초기화
            await init();
            // Rust 함수 실행
            greet("Rust World");
        }

        run();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3>빌드 및 실행</h3>
<pre><code>wasm-pack build --target web</code></pre>
<pre><code># Python이 있다면
python3 -m http.server
# 또는 npx 사용
npx serve .</code></pre>
<p><span></span> <span>Post Views:</span> <span>11</span>
			</p>											</div></div>

상구리의 기술 블로그

Rust와 WebAssembly로 만드는 "Hello World" 웹앱
wasm-pack을 사용하여 아주 간단하게 "Hello World" 웹 애플리케이션을 빌드하는 과정을 소개합니다.
사전 준비 (Prerequisites)
Rust 설치
https://www.skyer9.pe.kr/wordpress/?p=6512
wasm-pack 설치
일반 CMD 대신 Developer PowerShell for VS 2022 를 실행하고 아래 명령을 입력합니다.
cargo install wasm-pack
kernel32.lib 관련 오류가 발생하면, Visual Studio Installer 를 실행하고, 수정 버튼을 누른 후, 개별 구성 요소 탭으로 이동 후, Windows SDK 검색 후, Windows 11 SDK (10.0.22621.0) 를 설치해 줍니다.
프로젝트 생성 및 설정
프로젝트 생성
cargo new --lib hello-wasm
cd hello-wasm
Cargo.toml 설정
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
Rust 코드 작성
src/lib.rs 파일을 열고 기존 내용을 지운 뒤, 브라우저의 alert 창을 띄우는 코드를 작성합니다.
use wasm_bindgen::prelude::*;
// JavaScript의 alert 함수를 사용하기 위한 선언
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
// JavaScript에서 호출할 수 있도록 내보내는 함수
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}! Welcome to WASM.", name));
}
WebAssembly 빌드
빌드가 완료되면 프로젝트 폴더 내에 pkg/ 디렉토리가 생성됩니다.
wasm-pack build --target web
웹페이지에서 실행하기
프로젝트 루트에 index.html을 만드세요.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm Hello World</title>
</head>
<body>
    <script type="module">
        // 빌드된 pkg 폴더에서 init과 greet 함수를 가져옵니다.
        import init, { greet } from './pkg/hello_wasm.js';
        async function run() {
            // Wasm 모듈 초기화
            await init();
            // Rust 함수 실행
            greet("Rust World");
        }
        run();
    </script>
</body>
</html>
로컬 서버 실행
# Python이 있다면
python3 -m http.server
# 또는 npx 사용
npx serve .
이제 브라우저에서 localhost:8000 또는 localhost:3000 에 접속하면, Rust로 작성된 함수가 실행되어 "Hello, Rust World! Welcome to WASM." 이라는 알림창이 뜨는 것을 확인할 수 있습니다!
html 수정
Cargo.toml 설정 추가
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
# HTML 조작을 위한 라이브러리 추가
web-sys = { version = "0.3", features = ['Document', 'Element', 'HtmlElement', 'Node', 'Window'] }
src/lib.rs 수정
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn greet(name: &str) {
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    // ID가 "output"인 엘리먼트를 찾아서 내용을 바꿉니다.
    if let Some(element) = document.get_element_by_id("output") {
        element.set_inner_html(&format!("Hello, {}! (from Rust)", name));
    }
}
HTML 파일 수정
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm Hello World</title>
</head>
<body>
    <h1 id="output">기다리는 중...</h1>
    <script type="module">
        // 빌드된 pkg 폴더에서 init과 greet 함수를 가져옵니다.
        import init, { greet } from './pkg/hello_wasm.js';
        async function run() {
            // Wasm 모듈 초기화
            await init();
            // Rust 함수 실행
            greet("Rust World");
        }
        run();
    </script>
</body>
</html>
빌드 및 실행
wasm-pack build --target web
# Python이 있다면
python3 -m http.server
# 또는 npx 사용
npx serve .

Rust와 WebAssembly로 만드는 “Hello World” 웹앱

댓글