vscode에서 leptos 개발 환경을 세팅해보자.
1. target 추가 및 nightly Rust 활성화
# bundler 설치
$ cargo install trunk
# nightly 사용
$ rustup toolchain install nightly
# wasm target으로 추가
$ rustup target add wasm32-unknown-unknowncargo를 통해 trunk를 설치하고, toolchain으로 nightly를 설치했다.
24년 6월 24일 기준 최신 leptos 버전은 0.6.12인데, nightly를 사용해야만 사용 가능한 부분들이 있기 때문이다.
그리고 마지막으로 wasm32-unknown-unknown을 타겟으로 추가한다.
target이 wasm32-unknown-unknown라는 것이 무슨 의미인지 궁금하다면 아래 링크를 참조해보자.
https://velog.io/@mainfn/wasm32-unknown-unknown
trunk는 webpack, vite 등의 bundler 역할을 하는 툴인데, WASM 버전이라고 보면 된다.
또한 dev-server도 지원하기 때문에, hot-reload와 proxy 기능도 제공한다.
과정을 정리하면, leptos로 작성한 rust 코드를 rustc 컴파일러로 기계어 전 단계인 중간 코드(IR)로 컴파일한다.
이를 원래는 기계어로 컴파일 해야 하지만, LLVM을 통해 컴파일 target을 WASM으로 변경한다.
그리고 wasm-bindgen이라는 것으로 Rust-JS 간의 인터페이스를 생성하여 WASM module과 JS 간의 통신을 가능하게 한다.
마지막으로 trunk를 이용하여 번들링을 수행한다.
Rust Code를 WASM으로 컴파일 하면 1개의 .wasm 바이너리 파일이 나오지만,
앞서 살펴본 JS와의 인터페이스(gloo code)는 별개로 생성되기 때문에 합쳐야 하고,
trunk가 build 후에 static resource, js, manifest 등을 dist 폴더로 포함시키는 과정이 들어간다고 한다.
WASM은 최신 브라우저에서 대부분 지원되기 때문에 IE 같은 고대 유물을 사용하지 않는다면 진행에 지장은 없을 것이다.
2. 프로젝트 생성 및 nightly 적용
다음 명령어로 프로젝트 및 nightly Rust를 프로젝트 단위로 적용 가능하다.
# rust project 생성
$ cargo new leptos-example
# 이동
$ cd leptos-example
# nighlty 프로젝트 내 적용
$ rustup override set nightlyLeptos는 view! 매크로로 JSX와 유사한 RSX 문법을 사용하는데,
이를 포매팅 하기 위해 leptosfmt를 설치하자.
$ cargo install leptosfmt에디터 상에서 #[component] 내의 자동 완성을 위해 vscode의 settings.json에 다음 설정을 추가한다.
"rust-analyzer.procMacro.ignored": {
"leptos_macro": [
// optional:
"component",
"server"
],
}마지막으로 leptos를 프로젝트 내에 의존성으로 추가한다.
$ cargo add leptos --features=csr,nightly대략적인 세팅은 완료되었다.
Hello World
첫 번째 Component를 매우 간단하게 작성하였다.
// main.rs
use leptos::*;
fn main() {
leptos::mount_to_body(|| view! { <App/> })
}
#[component]
fn App() -> impl IntoView {
view! { <h1>"Hello Leptos"</h1> }
}view!, IntoView, h1 등의 반복적으로 사용되는 요소들을 일일이 use에 명시하기는 너무 귀찮으므로 use leptos::*;로 한꺼번에 포함시켰다.
view! 매크로 내의 RSX 문법은 JSX나 html을 알고 있다면 매우 친숙하게 느껴질 것이다.
Leptos를 사용하면 html, css 등의 마크업, 스타일링을 위해 새로운 지식을 습득할 필요는 없다.
Component 정의 시, #[component]를 명시해야 한다는 것과 반환 타입이 impl IntoView라는 것을 기억하면 된다.
Rust는 기본적으로 함수를 lower_snake_case로 작성하지만, Component로 사용된 함수 만큼은 React와 마찬가지로 PascalCase가 네이밍 컨벤션이다.
impl IntoView는 View가 될 수 있는 다양한 Closure를 뜻한다.
저번 장에서 봤던 것처럼, Leptos는 Signal base이기 때문에 Component는 최초에 한 번만 호출되며, 이 때 View가 만들어지고, 실제로 렌더링 되어 DOM Tree에 Mount 되는 것이다.
main 함수 내에 leptos::mount_to_body는 ReactDOM.render과 유사한 역할을 한다고 보면 된다.
이제 프로젝트 루트에 index.html을 작성하고 실행해보자.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>실행 명령어는 다음과 같다.
$ trunk serve
기본적으로 8080 port에서 index.html을 서빙하며, --port 옵션으로 원하는 port를 지정할 수도 있다.
브라우저의 네트워크 탭을 보면 프로젝트 명과 일치하는 WASM 파일을 확인할 수 있다.
우리가 작성한 Rust 파일이 WASM으로 빌드 되어 브라우저에 전송되고 화면에 잘 그려진 것이다.
이렇게 세팅 및 첫 번째 컴포넌트 작성을 완료했다.
이번 장의 주된 목표는 환경 세팅 및 동작 확인이었으므로, 다음 장부터 본격적으로 Leptos의 기본적인 기능들을 차근차근 사용해보도록 하겠다.
