빠른 시작

Dioxus에 오신 것을 환영합니다! 이 가이드는 몇 분 만에 크로스 플랫폼 앱 개발을 시작하고 실행하는 데 도움을 드립니다.

Dioxus는 웹, 데스크톱, 모바일 등 어디에서나 실행되는 Rust 사용자 인터페이스를 구축할 수 있는 휴대성, 성능, 인체공학성을 갖춘 프레임워크입니다.

 

Dioxus를 특별하게 만드는 것

Dioxus는 최신 프런트엔드 프레임워크의 가장 뛰어난 기능과 ​​Rust의 성능 및 안전성을 결합했습니다.

• 3줄로 크로스 플랫폼 구현 - 한 번만 작성하면 웹, 데스크톱, 모바일, 서버에 배포 가능
• 인체공학적 상태 관리 - 간단하면서도 강력한 신호 기반 반응성
• 통합 툴링 - 번들러, 핫 리로딩 및 개발 서버 내장
• 풀스택 기능 - 서버 기능, SSR 및 원활한 클라이언트-서버 통신

첫 번째 Dioxus 앱

Dioxus가 얼마나 간단한지 알아보려면 고전적인 "Hello, World!"부터 시작해 보겠습니다.

use dioxus::prelude::*;
 
fn main() {
    dioxus::launch(app);
}
 
fn app() -> Element {
    rsx! {
        div { "Hello, world!" }
    }
}

개발 환경 설정

필수 조건

• Rust (최신 안정 버전): rustup.rs 에서 설치하세요.
• Dioxus CLI : 설치cargo install dioxus-cli

새 프로젝트 만들기

가장 빠르게 시작하는 방법은 Dioxus CLI를 사용하는 것입니다.

dx new my_app
 
# Navigate to your project
cd my_app
 
# Start the development server
dx serve

Dioxus 아키텍처 이해

대화형 예시: 카운터 앱

상태 관리를 이해하기 위해 보다 대화형적인 것을 만들어 보겠습니다.

use dioxus::prelude::*;
 
fn app() -> Element {
    let mut count = use_signal(|| 0);
 
    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    }
}

이 예에서는 다음 사항을 보여줍니다.

• use_signal()반응형 변수를 사용한 상태 생성
• onclick핸들러를 사용한 이벤트 처리
• 상태가 변경되면 자동으로 다시 렌더링됩니다.

플랫폼별 개발

웹 개발

웹 애플리케이션의 경우 Dioxus는 WebAssembly로 컴파일되어 다음을 제공합니다.

• 빠른 초기 로드 시간
• SEO 친화적인 서버 측 렌더링
• 최신 웹 API 통합

# Serve for web platform
dx serve --web

데스크톱 애플리케이션

데스크톱 앱은 시스템 통합을 위해 기본 웹뷰를 사용합니다.

# Serve for desktop platform
dx serve --desktop

모바일 개발

네이티브 iOS 및 Android 앱 빌드:

# Serve for Android
dx serve --android
 
# Serve for iOS
dx serve --ios

개발 워크플로

 

Dioxus를 사용한 일반적인 개발 워크플로:

1. 코드 작성 : Rust 구성 요소와 RSX 마크업 편집
2. 라이브 미리보기 : dx serve핫 리로딩으로 개발 서버를 시작합니다.
3. 즉시 업데이트 : 파일을 저장할 때 밀리초 단위로 변경 사항을 확인하세요
4. Production Builddx build : 최적화된 번들을 만드는 데 사용

프로젝트 구조

일반적인 Dioxus 프로젝트는 다음 구조를 따릅니다.

my_app/
├── src/
│   ├── main.rs          # App entry point
│   ├── components/      # Reusable components
│   └── assets/          # Static assets
├── Cargo.toml           # Rust dependencies
├── Dioxus.toml          # Dioxus configuration
└── dist/               # Build output

 

다음 단계

이제 기본 사항을 알았으니 여행을 계속하세요.

• 설치 및 설정- 모든 플랫폼에 대한 자세한 설정 지침
• 첫 번째 Dioxus 앱- 완전한 앱을 구축하는 단계별 튜토리얼
• 실행 예제- 광범위한 예제 컬렉션을 탐색하세요

Dioxus 생태계에는 기본 UI 패턴부터 복잡한 풀스택 애플리케이션까지 모든 것을 아우르는 수백 개의 예제가 포함되어 있습니다.