Yew 시작하기

Yew이란??

윕 애플리케이션 개발은 지속적으로 발전하고, 새로운 기술이 도입되며 전례 없는 성장을 이루고 있습니다. 이러한 발전 속에서, Rust와 Yew는 웹 애플리케이션 개발을 새롭고 효율적인 방식으로 이끌고 있습니다.

Yew 프레임워크는 Rust로 작성된 현대적인 프런트엔드 프레임워크로, React와 유사한 Component 아키텍처를 제공합니다. 또한, 가상 DOM으로 화면 업데이트를 최적화하여 높은 성능을 보장하고 WebAssembly와 함께 동작해서 성능을 더욱 향상 시켰습니다.

필수 구성 요소 설치

Yew를 시작하기 위해서는 먼저 trunk 크레이트를 설치해야 합니다.

$ cargo install trunk

또한 Webassembly이긴 때문에 WASM을 빌드 대상으로 추가해야 합니다.

$ rustup target add wasm32-unknown-unknown
``

## 프로젝트 생성

튜토리얼을 위해 간단한 프로젝트를 생성하겠습니다.

$ cargo new yew-hello-app
$ code yew-hello-app

`code yew-hello-app`은 VS Code로 해당 프로젝트를 실행시키는 명령어 입니다.

Ctrl + ` 키를 통해 터미널을 열고 정상적으로 동작하는지 확인합니다.

$ cargo run
Compiling yew-hello-app v0.1.0 (/home/yew-hello-app)
Finished dev [unoptimized + debuginfo] target(s) in 0.15s
Running target/debug/yew-hello-app
Hello, world!

## 정적 페이지 만들기!

먼저 Cargo.toml에 Yew 크리에이트를 추가해야 합니다.

```toml
[package]
name = "yew-hello-app"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = { version ="0.20.0", features= ["csr"]}

features= ["csr"] 이 부분을 추가하면 클라이언트 사이드 렌더링이 가능합니다.

코드 작성하기

main.rs를 작성합니다.

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{"Hello World"}</h1>
    }
}

fn main(){
    yew::Renderer::<App>::new().render();
}

• #[function_component(App)] : fn app() 함수를 App이라는 컴포넌트로 변환합니다.
• fn app() -> Html { : 이 부분은 app 함수의 반환 타입이 Html 타입이라는 것을 명시합니다.
• yew::Renderer::::new().render(); : App 컴포넌트로 부터 Renderer를 생성하고 웹페이지에 컴포넌트를 렌더링합니다.

index.html 생성하기

웹 페이지는 index.html를 최상단, 루트로 하여 실행됩니다.

실행하기

실행하는 방법은 쉽습니다. 처음 설치한 trunk를 통해 설치하면 됩니다.

trunk serve --open

 

F12를 눌러 소스를 확인해보면 wasm이 설치되어 있는 것을 볼 수 있습니다.