Dioxus/시작하기

개요

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

Dioxus에 오신 것을 환영합니다. Dioxus는 Rust로 크로스 플랫폼 사용자 인터페이스를 구축하기 위한 휴대성, 성능, 그리고 인체공학성을 갖춘 프레임워크입니다. Dioxus를 사용하면 앱을 한 번만 작성하면 웹, 데스크톱, 모바일, 서버 등 어디에나 배포할 수 있으며, 단일 통합 코드베이스를 사용할 수 있습니다.

 

Dioxus를 특별하게 만드는 것

Dioxus는 최신 UI 프레임워크의 최고 기능을 결합하는 동시에 Rust의 성능 및 안전성을 보장합니다. 웹 애플리케이션, 데스크톱 소프트웨어, 모바일 앱 등 어떤 플랫폼에서든 Dioxus는 일관된 개발 경험을 제공합니다.

핵심 아키텍처

주요 특징

특징 설명 플랫폼 지원
크로스 플랫폼 개발 웹, 데스크톱, 모바일 및 서버를 위한 단일 코드베이스 모든 플랫폼
핫 리로딩 마크업, 스타일 및 Rust 코드에 대한 즉각적인 업데이트 모든 플랫폼
신호 기반 상태 인체공학적 반응 상태 관리 모든 플랫폼
풀스택 프레임워크 내장 서버 기능, SSR, 수분 공급 웹 + 서버
네이티브 렌더러 네이티브 성능을 위한 WGPU 기반 렌더링 데스크톱 + 모바일
구성 요소 기본 요소 shadcn/ui에서 영감을 받은 퍼스트파티 UI 구성 요소 모든 플랫폼

 

플랫폼 기능

Dioxus는 모든 주요 플랫폼에 걸쳐 포괄적인 지원을 제공하며, 각 플랫폼은 해당 환경에 맞게 최적화되어 있습니다.

웹 플랫폼

  • 최대 성능을 위해 DOM에 직접 WASM 기반 렌더링
  • 빠른 초기 로드를 위한 수화 기능이 있는 서버 측 렌더링(SSR)
  • "hello world" 애플리케이션을 위해 ~50kb부터 시작하는 최적화된 번들
  • 빠른 개발을 위한 핫 리로딩 기능이 내장된 개발 서버

데스크톱 애플리케이션

  • 데스크톱에서 익숙한 웹 기술을 위한 WebView 렌더링
  • 네이티브 그래픽 성능을 위한 실험적 WGPU 렌더러
  • 제로 구성 설정 - 간단히 실행 cargo run하거나dx serve
  • IPC 오버헤드 없이 네이티브 시스템 액세스
  • macOS, Linux 및 Windows용 3MB 미만의 휴대용 바이너리

 

모바일 개발

  • 기본 성능을 갖춘 일류 iOS 및 Android 지원
  • 유연성을 위한 WebView 및 WGPU 렌더링 옵션
  • Java(Android) 및 Objective-C(iOS)에 대한 직접 네이티브 API 액세스
  • 몇 초 만에 코드에서 장치로 빠르게 배포

풀스택 애플리케이션

Dioxus는 Axum과 긴밀하게 통합되어 강력한 서버 기능을 제공합니다.

  • 원활한 클라이언트-서버 통신을 위한 서버 기능
  • 실시간 애플리케이션을 위한 WebSockets 및 SSE
  • 스트리밍 지원을 통한 파일 업로드/다운로드
  • 포괄적인 웹 애플리케이션을 위한 미들웨어 및 라우팅

개발 경험

즉각적인 핫 리로딩

Dioxus는 UI와 Rust 코드 모두에 1초 미만의 핫 리로딩을 제공합니다. 간단히 실행하여 dx serve변경 사항을 즉시 확인하세요.

dx serve
 
# Enable experimental hot-patching for Rust code
dx serve --hotpatch

 

구성 요소 시스템

Dioxus에는 현대적 디자인 시스템을 모델로 한 포괄적인 기본 구성 요소 세트가 포함되어 있습니다.

 

자산 관리

다음을 포함한 내장형 자산 최적화:

  • 최신 이미지 형식을 위한 AVIF 생성
  • 더 작은 번들을 위한 WASM 압축
  • 더 빠른 로드를 위한 CSS 축소
  • 단일 파일 배포를 위한 자산 번들링

프로젝트 구조

Dioxus 저장소는 몇 가지 주요 영역으로 구성되어 있습니다.

 

examples/           # Comprehensive examples organized by topic
├── 01-app-demos/   # Basic application demonstrations
├── 02-building-ui/ # UI construction patterns
├── 03-assets-styling/ # Asset and styling techniques
├── 04-managing-state/ # State management examples
├── 05-using-async/ # Asynchronous programming
├── 06-routing/     # Navigation and routing
├── 07-fullstack/   # Fullstack applications
├── 08-apis/        # API integration examples
├── 09-reference/   # Reference implementations
└── 10-integrations/ # Third-party integrations

packages/           # Core Dioxus libraries
├── core/           # Virtual DOM and core abstractions
├── html/           # HTML element definitions
├── hooks/          # React-like hooks system
├── signals/        # Reactive state management
├── web/            # Web platform renderer
├── desktop/        # Desktop platform renderer
├── fullstack/      # Fullstack framework
└── cli/            # Command-line tools

 

시작하기

Dioxus는 모든 수준의 개발자가 쉽게 접근할 수 있도록 설계되었습니다. 학습 과정은 기본 개념부터 고급 기능까지 단계별로 구성되어 있습니다.

  1. 빠른 시작- 몇 분 안에 첫 번째 Dioxus 앱을 실행하세요
  2. 설치 및 설정- 개발 환경 구성
  3. 첫 번째 Dioxus 앱- 완전한 애플리케이션 구축
  4. 실행 예제- 광범위한 예제 라이브러리 탐색

보다 심층적인 아키텍처를 이해하고 싶은 분들을 위해 Deep Dive 섹션에서는 다음 내용을 다룹니다.

  • 가상 DOM 및 렌더링 시스템
  • 신호 기반 상태 관리
  • 플랫폼 통합세부
반응형