Dioxus/시작하기

설치 및 설정

러스트코리아 2025. 11. 15. 10:00
반응형

Dioxus에 오신 것을 환영합니다! 이 가이드에서는 Dioxus를 설치하고 Rust로 크로스 플랫폼 애플리케이션을 빌드하기 위한 개발 환경을 설정하는 방법을 안내합니다.

필수 조건

Dioxus를 설치하기 전에 다음 필수 구성 요소가 있는지 확인하세요.

  • Rust 1.80.0 이상 - Dioxus에는 최신 Rust 툴체인이 필요합니다.
  • Cargo - Rust의 패키지 관리자(Rust 설치에 포함됨)
  • Rust에 대한 기본 지식 - Rust 구문 및 개념 이해

Rust를 설치하려면 rustup.rs를 방문하여 해당 플랫폼에 맞는 설치 지침을 따르세요.

설치 방법

Dioxus는 귀하의 요구 사항에 따라 다양한 설치 방법을 제공합니다.

Dioxus CLI( dx)는 핫 리로딩, 번들링, 플랫폼별 빌드를 통해 가장 간소화된 개발 환경을 제공합니다.

cargo binstall dioxus-cli@0.7.0 --force
 
# Or install directly from source for the latest features
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked

방법 2: 수동 cargo

라이브러리 통합이나 사용자 정의 설정의 경우 Dioxus를 다음에 직접 추가하세요 Cargo.toml.

[dependencies]
dioxus = "0.7.0"

플랫폼별 설정

Dioxus는 다양한 기능 세트를 갖춘 여러 플랫폼을 지원합니다. 각 플랫폼에 맞게 구성하는 방법은 다음과 같습니다.

웹 개발

웹 애플리케이션의 경우 웹 기능을 활성화하세요.

[dependencies]
dioxus = { version = "0.7.0", features = ["web"] }

 

추가 웹 관련 요구 사항:

  • WebAssembly 대상 :rustup target add wasm32-unknown-unknown
  • Node.js (개발 서버 및 번들링용)

데스크톱 애플리케이션

WebView를 사용하는 데스크톱 앱의 경우: 향후 최신버전으로 조정하세요.

[dependencies]
dioxus = { version = "0.7.0", features = ["desktop"] }

 

플랫폼별 종속성:

  • Windows : Visual Studio 빌드 도구 또는 Visual Studio 커뮤니티
  • macOS : Xcode 명령줄 도구
  • Linux : 필수 빌드 도구( sudo apt install build-essentialUbuntu에서)

모바일 개발

iOS 및 Android 앱의 경우:

[dependencies]
dioxus = { version = "0.7.0", features = ["mobile"] }

 

모바일 개발에는 다음이 필요합니다.

  • 안드로이드 : 안드로이드 스튜디오와 안드로이드 SDK
  • iOS : Xcode 및 iOS SDK(macOS 전용)

풀스택 애플리케이션

서버 측 렌더링 및 풀스택 기능:

[dependencies]
dioxus = { version = "0.7.0", features = ["fullstack"] }

 

프로젝트 구조 개요

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

my-dioxus-app/
├── Cargo.toml          # Project configuration
├── Dioxus.toml         # Dioxus-specific settings
├── src/
│   ├── main.rs         # Application entry point
│   ├── components/     # Reusable components
│   └── assets/         # Static assets
├── public/             # Public web assets (web platform)
└── assets/             # Build-time assets

첫 번째 프로젝트 만들기

CLI 템플릿 사용

시작하는 가장 쉬운 방법은 Dioxus CLI를 사용하는 것입니다.

# Create a new project
dx new my-dioxus-app
 
# Navigate to the project
cd my-dioxus-app
 
# Start the development server
dx serve

수동 프로젝트 설정

수동 설정의 경우 새로운 Rust 프로젝트를 만들고 Dioxus를 추가합니다.

cargo new my-dioxus-app
cd my-dioxus-app

 

추가 Cargo.toml:

[package]
name = "my-dioxus-app"
version = "0.1.0"
edition = "2021"
 
[dependencies]
dioxus = { version = "0.7.0", features = ["web"] }

 

만들기  src/main.rs:

use dioxus::prelude::*;
 
fn main() {
    dioxus::launch(App);
}
 
#[component]
fn App() -> Element {
    rsx! {
        h1 { "Hello, Dioxus!" }
        p { "Welcome to your first Dioxus app" }
    }
}

 

개발 워크플로

애플리케이션 실행

개발에는 Dioxus CLI를 사용하세요:

# Run with hot reloading
dx serve
 
# Run on specific platform
dx serve --platform web
dx serve --platform desktop
dx serve --platform android

 

Building for Production

배포를 위해 신청서를 다음과 같이 묶습니다.

# Build for web
dx bundle --platform web
 
# Build for desktop
dx bundle --platform desktop
 
# Build for mobile
dx bundle --platform android
dx bundle --platform ios

기능 구성

Dioxus는 Cargo 기능을 사용하여 플랫폼 지원 및 선택적 기능을 관리합니다.

기능 구성

Dioxus는 Cargo 기능을 사용하여 플랫폼 지원 및 선택적 기능을 관리합니다.

 

특징 설명 플랫폼
web WebAssembly를 사용한 웹 플랫폼 웹
desktop WebView를 사용하는 데스크톱 앱 데스크톱
mobile 모바일 앱(Android/iOS) 모바일
fullstack 서버 측 렌더링 + 클라이언트 웹/서버
router 클라이언트 측 라우팅 모두
signals 반응형 상태 관리 모두
devtools 개발 도구 모두

 

일반적인 설정 문제

Rust 툴체인 문제

올바른 Rust 버전을 사용하고 있는지 확인하세요.

rustup update
rustup default stable

플랫폼별 빌드 오류

Windows : C++ 개발 도구와 함께 Visual Studio 설치
macOS : Xcode 명령줄 도구 설치: xcode-select --install
Linux : 빌드 종속성 설치:sudo apt install build-essential pkg-config

WebAssembly 대상이 없습니다

WebAssembly 대상을 추가합니다.

rustup target add wasm32-unknown-unknown

 

반응형