WebAssembly - Rust와의 작업

WebAssembly와 Rust 소개

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 브라우저가 고성능 애플리케이션을 실행할 수 있는 강력한 플랫폼으로 변하는 흥미로운 세상으로 뛰어들어 보겠습니다. 복잡한 3D 게임이나 고급 데이터 분석 도구를 브라우저에서 실행할 수 있다고 상상해 보세요. 이것이 WebAssembly의 마법이며, 우리는 Rust 프로그래밍 언어를 사용하여 이 힘을 활용하는 방법을 배우게 될 것입니다.

WebAssembly - Working with Rust

WebAssembly를 처음 접했을 때, 나는 마치 웹 개발의 숨겨진 슈퍼파워를 발견한 것 같은 느낌을 받았습니다. 신뢰할 수 있는 자전거가 갑자기 로켓으로 변하는 것처럼! 이 흥미진진한 여정을 함께 시작해 보겠습니다.

WebAssembly는 무엇인가요?

WebAssembly, 일반적으로 Wasm으로 약칭됩니다. 이는 브라우저에서 효율적으로 실행되도록 설계된 이진 지시 형식입니다. 브라우저가 이를 이해하고 매우 빠르게 실행할 수 있는 비밀 코드라고 생각해 보세요. 웹 애플리케이션에 터보 부스트를 제공하는 것입니다!

왜 Rust를 사용할까요?

Rust는 강력하고 안전한 프로그래밍 언어입니다. 최신 안전 기능을 갖춘 스포츠카라고 생각해 보세요. Rust의 독특한 특성은 WebAssembly 개발에 매우 적합합니다:

가비지 컬렉션 없는 메모리 안전성
높은 성능
작은 바이너리 크기
JavaScript와의 용이한 통합

개발 환경 설정

코딩을 시작하기 전에 우리는 작업 공간을 준비해야 합니다. 대기업의 예술 작업을하기 전에 예술 스튜디오를 설정하는 것과 같은 이치입니다.

Rust 설치

먼저 Rust를 설치해 보겠습니다. 터미널을 엽니다하고 다음 명령어를 실행합니다:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

이 명령어는 Rust를 다운로드하고 설치합니다. 이는 우리의 강력한 코딩 나무가 자라나는 씨를 심는 것과 같습니다!

wasm-pack 설치

다음으로, 우리는 WebAssembly를 빌드하고 작업하는 데 도움을 주는 도구인 wasm-pack를 설치할 것입니다:

cargo install wasm-pack

wasm-pack는 우리의 신뢰할 수 있는 비서로, Rust 코드를 웹을 위한 패키지로 만들어 주는 역할을 합니다.

첫 번째 Rust와 WebAssembly 프로젝트

이제 우리는 첫 번째 프로젝트를 만들어 보겠습니다. 간단하게 두 수를 더하는 함수로 시작해 보겠습니다.

프로젝트 생성

터미널에서 다음 명령어를 실행합니다:

cargo new --lib wasm-add
cd wasm-add

이 명령어는 새로운 Rust 라이브러리 프로젝트를 생성합니다. 새로운 노트북을 열어 코딩 모험을 시작할 준비가 되었습니다!

Rust 코드 작성

src/lib.rs 파일을 엽니다하고 내용을 다음과 같이 변경합니다:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}

이를 설명해 보겠습니다:

use wasm_bindgen::prelude::*;는 WebAssembly에 필요한 도구를 가져옵니다.
#[wasm_bindgen]은 우리의 함수를 JavaScript에서 접근할 수 있게 만드는 마법의 주문입니다.
pub fn add(a: i32, b: i32) -> i32는 두 정수를 받아서 그 합을 반환하는 함수를 정의합니다.

WebAssembly로 빌드

이제 우리의 Rust 코드를 WebAssembly로 변환해 보겠습니다. 다음 명령어를 실행합니다:

wasm-pack build --target web

이 명령어는 우리의 Rust 코드를 브라우저가 즐길 수 있는 WebAssembly 맛의 간식으로 만드는 마법의 오븐입니다!

웹 페이지에서 WebAssembly 모듈 사용

이제 우리의 WebAssembly 모듈을 실제 웹 페이지에서 사용하는 흥미로운 부분입니다!

HTML 파일 생성

프로젝트 루트에 index.html 파일을 생성하고 다음 내용을 추가합니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

run();
</script>
</body>
</html>

이 HTML 파일은 우리의 WebAssembly 스타가 공연할 무대입니다!

웹 페이지 실행

당신의 창작물을 실행해 보기 위해 로컬 웹 서버가 필요합니다. Python이 설치되어 있다면 다음 명령어를 사용할 수 있습니다:

python -m http.server

그런 다음 브라우저를 엽니다고 http://localhost:8000로 이동합니다. 페이지에 "5 + 7 = 12"가 표시되어야 합니다. 축하합니다! 당신은 브라우저에서 Rust 코드를 실행했습니다!

고급 주제

이제 우리는 발을 물고 웹어셈블리와 Rust의 바다로 더 깊이 다이빙해 보겠습니다.

문자열 처리

문자열은 WebAssembly에서 약간 더 복잡합니다. 사용자를 환영하는 함수를 만들어 보겠습니다:

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

JavaScript에서는 다음과 같이 사용합니다:

const greeting = greet("WebAssembly");
console.log(greeting); // 출력: Hello, WebAssembly!

메모리 관리

Rust의 슈퍼파워 중 하나는 메모리 관리입니다. WebAssembly에서 작업할 때는 매우 신경 써야 합니다. 다음은 벡터를 생성하고 반환하는 함수입니다:

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

이 함수는 Rust의 소유권 시스템이 메모리를 올바르게 관리할 수 있도록 보장하기 때문에 안전합니다!

결론

축하합니다! WebAssembly와 Rust의 세계로 첫 걸음을 냈습니다! 우리는 많은 내용을 다루었고, 환경 설정에서 WebAssembly 모듈의 생성과 사용까지 이르렀습니다. 기억하시라, 새로운 기술을 배우는 것은 연습과 실험으로 이루어진다. 코딩을 계속하고, 실험을 계속하고, 가장 중요한 것은 즐겁게 만들어 나가세요!

마지막으로, 유명한 컴퓨터 과학자 그레이스 hopper의 말을 떠올립니다: "우리는 항상 이렇게 했어"는 언어에서 가장 해로운 문구입니다. WebAssembly와 Rust는 웹 개발에 대한 새로운 사고 방식을 대표합니다. 이 변화를 받아들이면 당신의 프로그래밍 여정에서 무한한 가능성을 열 수 있을 것입니다.

기쁜 코딩을 기원하며, WebAssembly의 모험을 흥분과 발견으로 가득 채우세요!

방법	설명
`wasm_bindgen::prelude::*`	필요한 WebAssembly 바인딩을 가져옵니다
`#[wasm_bindgen]`	함수를 WebAssembly로 내보내기 위해 표시합니다
`wasm-pack build --target web`	Rust 코드를 WebAssembly로 빌드합니다
`import init, { functionName } from './pkg/module_name.js'`	JavaScript에서 WebAssembly 함수를 가져옵니다
`await init()`	WebAssembly 모듈을 초기화합니다
`Vec::with_capacity(size)`	사전 할당된 용량을 가진 벡터를 생성합니다

Credits: Image by storyset

이전 튜토리얼:

WebAssembly - C++와 함께 작업

다음 튜토리얼:

WebAssembly - Go와 함께 작업