Build Your First Compose Multiplatform Web App
- Compose Multiplatform for Web은 Kotlin 공유 코드를 사용하여 웹 애플리케이션을 구축하는 방법을 소개합니다. 🌐
- Android Studio에서 Kotlin Multiplatform 프로젝트를 생성하고, Android Studio Kotlin Multiplatform 플러그인이 필요합니다. 🛠️
- 프로젝트 설정 시, 웹에 중점을 두면서도 Android, iOS, 데스크톱 플랫폼을 함께 고려하고, UI 공유를 활성화해야 합니다. ⚙️
commonMain은 모든 플랫폼에서 공유되는 코드를 포함하며, 웹 전용 소스 세트로는 jsMain, wasJsMain, webMain이 있습니다. 📂
jsMain은 Kotlin 코드를 JavaScript로 변환하여 브라우저의 JS 런타임에서 실행하며, 유연하지만 번들 크기가 커질 수 있습니다. 📜
wasJsMain (WebAssembly)은 Kotlin 코드를 WebAssembly 바이트코드로 변환하여 성능 향상, 번들 크기 감소, JavaScript 상호 운용성을 제공하며 JetBrains가 권장하는 방식입니다. 🚀
webMain은 jsMain과 wasJsMain 간에 공유되는 웹 전용 코드를 담는 역할을 합니다. 🤝
- Compose Multiplatform은
commonMain에서 작성된 UI 코드를 Android, iOS, 웹, 데스크톱 등 모든 플랫폼에서 동일하게 공유하고 실행할 수 있게 합니다. ✨
- 간단한 카운터 앱 예시를 통해
mutableStateOf, Column, Row, Text, Button 등 Compose UI 컴포넌트 사용법과 "한 번 작성으로 모든 곳에서 실행"의 이점을 시연합니다. 🔢
webMain에서 js() 함수를 사용하여 Kotlin 코드 내에서 원시 JavaScript 코드를 직접 실행하는 등 웹 전용 기능을 활용할 수 있습니다. 💻
- WebAssembly는 아직 베타 단계이므로
ExperimentalJsExport 및 ExperimentalWasJsInterop와 같은 실험적 기능에 대한 옵트인이 필요합니다. 🧪