Learn Rust Coding · 강의

Rust에서 WebAssembly(WASM)로

Rust 코드를 WebAssembly로 컴파일하여 웹 브라우저와 기타 WASM 런타임에서 고성능 모듈을 실행합니다.

Rust에서 WebAssembly(WASM)로은(는) CoddyKit의 무료 Learn Rust Coding 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Learn Rust Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Learn Rust Coding 강의에는 총 3개의 강의가 포함되어 있습니다.

WebAssembly (WASM)란?

WebAssembly 또는 WASM은 스택 기반 가상 머신을 위한 이진 명령어 형식입니다. Rust, C/C++, Go와 같은 고수준 언어를 이식 가능한 컴파일 대상으로 사용할 수 있도록 설계되었습니다.

효율적으로 실행되는 저수준 어셈블리와 유사한 언어라고 생각하면 됩니다. 웹 브라우저와 다른 환경에서 실행되며, 성능이 중요한 코드를 네이티브에 가까운 속도로 실행할 수 있습니다.

WASM에서 Rust의 장점

Rust는 다음과 같은 고유한 강점 덕분에 WebAssembly 개발에 매우 적합합니다.

성능: Rust는 C/C++에 가까운 빠른 속도로 잘 알려져 있습니다.
메모리 안전성: Rust의 소유권 시스템은 가비지 컬렉터 없이도 흔히 발생하는 버그를 방지합니다.
작은 바이너리: Rust의 최소한의 런타임은 크기가 작은 WASM 모듈을 만들어 냅니다.
도구 지원: wasm-pack과 wasm-bindgen 같은 도구를 훌륭하게 지원합니다.

WASM 도구 설정하기

Rust를 WebAssembly로 컴파일할 때는 주로 wasm-pack을 사용합니다. 전체 빌드 과정을 처리하는 명령줄 도구입니다.

WASM 모듈과 JavaScript 사이의 고수준 상호 작용을 지원하는 Rust 크레이트이자 CLI 도구인 wasm-bindgen도 사용합니다.

wasm-pack을 설치하려면 터미널을 열고 다음을 실행하십시오.

cargo install wasm-pack

첫 WASM 프로젝트

WebAssembly에 맞춘 새로운 Rust 프로젝트를 만들어 보겠습니다. 특정 템플릿과 함께 cargo generate를 사용합니다.

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

안내에 따라 프로젝트 이름을 지정하십시오. 그러면 WASM 코드를 작성할 수 있는 lib.rs 파일과 간단한 웹 인터페이스를 위한 www 디렉터리가 설정됩니다.

JavaScript용 Rust 함수

Rust 함수를 JavaScript에서 호출할 수 있도록 만들려면 wasm-bindgen 크레이트의 #[wasm_bindgen] 특성을 사용합니다.

이 특성은 wasm-bindgen에 JavaScript가 Rust 함수와 상호 작용하는 데 필요한 연결 코드를 생성하도록 지시합니다.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

WASM을 JavaScript와 통합하기

Rust 코드를 작성한 후 wasm-pack build를 사용하여 WASM 모듈로 빌드합니다. 이 명령은 .wasm 파일과 JS 연결 코드가 포함된 pkg 디렉터리를 만듭니다.

그런 다음 JavaScript에서 내보낸 Rust 함수를 쉽게 가져와 사용할 수 있습니다.

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust에서 JavaScript 호출하기

Rust에서 JavaScript 함수를 호출할 수도 있습니다. extern "C" 블록에서 함수를 선언하고 #[wasm_bindgen]을 사용하여 JS 전역 객체나 함수에 매핑합니다.

js_namespace 인수를 사용하면 console 객체처럼 JavaScript 환경에서 함수를 찾을 위치를 지정할 수 있습니다.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Rust와 JS 사이에서 문자열 전달하기

wasm-bindgen은 숫자와 불리언 같은 일반적인 데이터 형식을 지능적으로 처리합니다. 문자열에는 UTF-8 인코딩을 사용합니다.

Rust에서 &str 또는 String을 전달하면 wasm-bindgen이 이를 JavaScript String으로 변환하며, 반대 방향도 마찬가지입니다. 이러한 추상화 덕분에 상호 운용이 매끄럽게 이루어집니다.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

브라우저 밖의 WASM

WebAssembly는 흔히 웹 브라우저와 연관되지만 브라우저에만 국한되지 않습니다! 다양한 환경에 WASM 런타임이 존재하므로 새로운 가능성이 열립니다.

서버리스 함수: 빠르고 격리된 함수를 배포합니다.
블록체인: 스마트 계약을 실행합니다.
플러그인/확장 기능: 애플리케이션을 안전하게 확장합니다.
데스크톱 앱: 고성능 모듈을 내장합니다.

이를 통해 Rust의 활용 범위는 전통적인 시스템 프로그래밍을 훨씬 넘어섭니다.

WebAssembly 핵심 개념

Rust와 WebAssembly에 대한 이해도를 확인해 보겠습니다.

복습: Rust에서 WASM으로

Rust의 성능과 안전성을 WebAssembly에 활용하는 방법을 배웠습니다!

WASM은 컴파일된 코드를 위한 빠르고 이식 가능한 런타임을 제공합니다.
Rust는 성능, 작은 바이너리, 안전성 덕분에 WASM에 매우 적합합니다.
wasm-pack과 wasm-bindgen 같은 도구는 개발 과정을 간소화합니다.
Rust 함수를 JavaScript로 쉽게 내보내고 JavaScript 함수를 Rust로 가져올 수 있습니다.
WASM의 활용 분야는 웹 브라우저에만 국한되지 않습니다.

Rust로 강력하고 성능이 뛰어난 웹 및 비웹 애플리케이션을 만들기 위해 계속 탐구해 보십시오!

자주 묻는 질문

“Rust에서 WebAssembly(WASM)로” 강의는 무료인가요?

네 — “Rust에서 WebAssembly(WASM)로” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Learn Rust Coding 강의 전체를 잠금 해제할 수 있습니다. Learn Rust Coding 강의에는 총 3개의 강의가 포함되어 있습니다.

“Rust에서 WebAssembly(WASM)로”에서 뭘 배우나요?

Rust 코드를 WebAssembly로 컴파일하여 웹 브라우저와 기타 WASM 런타임에서 고성능 모듈을 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Learn Rust Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Learn Rust Coding을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Learn Rust Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“Rust에서 WebAssembly(WASM)로” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Learn Rust Coding 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Learn Rust Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Learn Rust Coding(으)로 돌아가기