WebAssembly (WASM) for High Performance Apps · 강의

WebAssembly용 Rust 설정

WebAssembly 대상용 Rust 개발 환경을 구성하고 새 WASM 프로젝트를 초기화합니다.

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

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Rust & WebAssembly Setup

Welcome! Rust is a fantastic language for building high-performance WebAssembly (WASM) modules.

Its focus on speed, memory safety, and control makes it ideal for web applications needing native-like performance.

In this lesson, we'll configure your environment and create your first Rust-WASM project.

Verify Rust & Cargo

Before we dive into WASM, ensure you have the Rust toolchain installed. This includes Rustc (the compiler) and Cargo (the package manager).

You can check by typing rustc --version and cargo --version in your terminal.
If not installed, visit rustup.rs to get rustup, the official Rust installer.

First Rust Program

Let's confirm your Rust setup is working. Create a file named main.rs and add this code. Then run it using cargo run.

fn main() {
  println!("Hello from Rust!");
}

Install WASM Target

WebAssembly isn't a default target for Rust. You need to explicitly add it to your toolchain.

The wasm32-unknown-unknown target is a generic WASM target that doesn't assume any specific host environment (like a browser or Node.js).

Run this command in your terminal:

rustup target add wasm32-unknown-unknown

Meet wasm-pack

Building Rust code for WebAssembly can involve several steps. That's where wasm-pack comes in!

wasm-pack is a powerful command-line tool that streamlines the entire workflow: compiling your Rust code, generating JavaScript bindings, and packaging it for web usage.

Install wasm-pack Tool

Since wasm-pack is a Rust application, you can install it using Cargo, Rust's package manager.

Run this command in your terminal:

cargo install wasm-pack

This might take a moment as it compiles the tool.

Initialize WASM Project

Now let's create a new Rust project specifically for WebAssembly. wasm-pack can scaffold this for you.

Navigate to your desired projects directory and run:

wasm-pack new my-first-wasm-app

This command creates a new directory, my-first-wasm-app, with a basic Rust library structure ready for WASM.

Explore Project Files

Inside your new my-first-wasm-app directory, you'll find:

Cargo.toml: Rust's manifest file, defining project dependencies and metadata.
src/lib.rs: This is where your Rust code for the WASM module will live. Unlike traditional Rust applications, WASM modules are usually libraries.
.gitignore: Standard Git ignore file.

Simple WASM Function

Open src/lib.rs. You'll see some boilerplate. Let's add a simple function that can be called from JavaScript:

The #[wasm_bindgen] attribute tells wasm-bindgen (which wasm-pack uses) to generate JavaScript glue code for this function.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
  format!("Hello, {}!", name)
}

// You might also find a #[wasm_bindgen]
// macro for a `start` function or other
// initial setup in a new project.

Compile to WASM

With your Rust WASM code ready, it's time to compile it into a WebAssembly module and its JavaScript bindings.

Navigate into your project directory (my-first-wasm-app) and run:

wasm-pack build

This command compiles your Rust code, generates the necessary .wasm and .js files, and places them in a new pkg directory.

WASM Setup Quiz

You've learned about the essential tools for Rust WebAssembly development. Which of the following commands are crucial for setting up a Rust environment for WASM and creating a new project?

Recap: Rust WASM Setup

Great job! You've successfully set up your Rust environment for WebAssembly development.

We covered:

Verifying your Rust toolchain.
Adding the wasm32-unknown-unknown target.
Installing and using wasm-pack to initialize and build your first WASM project.
Understanding the basic project structure and a simple #[wasm_bindgen] function.

Next, you'll learn how to load and run your compiled WASM module in a web browser using JavaScript!

자주 묻는 질문

“WebAssembly용 Rust 설정” 강의는 무료인가요?

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

“WebAssembly용 Rust 설정”에서 뭘 배우나요?

WebAssembly 대상용 Rust 개발 환경을 구성하고 새 WASM 프로젝트를 초기화합니다. 브라우저에서 직접 실행하는 실습 코드로 WebAssembly (WASM) for High Performance Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

WebAssembly (WASM) for High Performance Apps을(를) 시작하는 데 경험이 필요한가요?

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

“WebAssembly용 Rust 설정” 강의는 얼마나 걸리나요?

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

이 WebAssembly (WASM) for High Performance Apps 강의에서 코드를 작성하고 실행할 수 있나요?

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

이 강의의 모든 강의

← WebAssembly (WASM) for High Performance Apps(으)로 돌아가기