KMP

이 글에서는 Compose Multiplatform(CMP)과 wasmJs 타겟을 사용하여 Compose UI 코드를 웹 브라우저에서 실행하는 방법을 설명합니다. 이전 단계의 Kotlin/JS + HTML/CSS 방식과 달리, Android에서 사용하던 Jetpack Compose의 선언적 UI를 그대로 웹에서 사용할 수 있으며, koinViewModel()과 collectAsState() 같은 Android 동일 패턴으로 개발하는 과정을 살펴보겠습니다.wasmJs 타겟 추가: shared 모듈에 추가하여 기존 ViewModel/UseCase/Repository를 CMP 웹에서도 사용합니다.webCmpApp 모듈 생성: Compose Multiplatform 기반의 웹 애플리케이션을 구현합니다.Mater..

이 글에서는 KMP 프로젝트에 Kotlin/JS 타겟을 추가하여 웹 브라우저에서도 동일한 앱을 실행하는 방법을 설명합니다. shared 모듈의 ViewModel, UseCase, Repository를 그대로 재사용하면서 HTML/CSS + DOM API를 사용하여 브라우저 네이티브 UI를 Kotlin으로 작성하고, Hash 기반 SPA 라우팅으로 캐릭터 목록/상세 화면을 구현하는 과정을 살펴보겠습니다.js(IR) 타겟 추가: shared 모듈에 JS 타겟을 추가하여 기존 ViewModel/UseCase/Repository를 웹에서도 사용합니다.webJsApp 모듈 생성: Kotlin/JS 기반의 웹 애플리케이션을 구현합니다.HTML/CSS + DOM API: 브라우저 네이티브 UI를 Kotlin으로 작성..

이 글에서는 KMP 프로젝트에서 AndroidX DataStore Preferences를 활용하여 크로스플랫폼 설정 저장을 구현하는 방법을 설명합니다. Clean Architecture 패턴(Domain → Data → Presentation)으로 설정 기능을 구조화하고, Android(Jetpack Compose)와 iOS(SwiftUI) 양 플랫폼에 Settings 화면을 추가하는 과정을 살펴보겠습니다. DataStore Preferences: 앱 설정(다크 테마, 시스템 테마, 페이지당 캐릭터 수)을 영구 저장합니다.Clean Architecture 패턴: Domain → Data → Presentation으로 설정 기능을 구조화합니다.Settings 화면: Android(Jetpack Compos..

이 글에서는 KMP 프로젝트에 Koin DI와 Clean Architecture 패턴을 적용하는 방법을 설명합니다. 기존에 ViewModel이 API 클래스를 직접 생성하던 강결합 구조에서, Domain Layer(Repository 인터페이스, UseCase) 도입과 Ktor HttpClient 싱글톤 관리, Koin을 통한 의존성 주입으로 계층 간 결합도를 제거하는 과정을 살펴보겠습니다. Android와 iOS 각각에서 Koin을 초기화하고 ViewModel을 주입하는 방법도 함께 확인해보았습니다. 이번 글의 작업 내용은 다음 PR에서 확인할 수 있습니다.https://github.com/Marchbreeze/kmp-start/pull/6 feat: Koin DI + Clean Architecture..

이 글에서는 KMP 프로젝트에서 리스트 아이템 클릭 시 상세 페이지로 이동하는 네비게이션을 구현하는 방법을 설명합니다. shared 모듈에 단일 캐릭터 조회 API와 CharacterDetailViewModel을 추가하고, Android에서는 Navigation Compose, iOS에서는 SwiftUI NavigationStack + NavigationLink를 사용하여 각 플랫폼의 네비게이션을 구현하는 과정을 살펴보겠습니다.상세뷰 추가 : shared 모듈에 단일 캐릭터 조회 API와 CharacterDetailViewModel 추가Android : Navigation Compose를 사용하여 화면 전환 구현iOS : SwiftUI NavigationStack + NavigationLink를 사용하여..

이 글에서는 KMP 프로젝트에서 ViewModel을 shared 모듈로 이동하여 Android와 iOS 간 상태 관리 로직을 완전히 공유하는 과정을 설명합니다. lifecycle-viewmodel-compose(JetBrains KMP 버전)와 StateFlow를 활용한 반응형 상태 관리, 그리고 SKIE를 통한 Swift AsyncSequence 브릿징까지 살펴보며, UI를 제외한 거의 모든 로직을 공유하는 아키텍처를 확인해보았습니다. 이번 글의 작업 내용은 다음 PR에서 확인할 수 있습니다.https://github.com/Marchbreeze/kmp-start/pull/3 ViewModel을 shared 모듈로 이동하여 상태 관리 공유 by Marchbreeze · Pull Request #3 · ..

이 글에서는 KMP(Kotlin Multiplatform) 프로젝트에서 Ktor Client와 kotlinx.serialization을 활용하여 네트워킹 계층을 구현하는 과정을 단계별로 설명합니다. Rick and Morty API를 사용하여 공유 모듈에서 API 클라이언트와 데이터 모델을 한 번만 작성하고, Android(Jetpack Compose + Coil)와 iOS(SwiftUI + AsyncImage) 양쪽에서 동일한 데이터를 표시하는 전체 흐름을 살펴보았습니다. 이번 글의 작업 내용은 다음 PR에서 확인할 수 있습니다.https://github.com/Marchbreeze/kmp-start/pull/2 feat: KMP 네트워킹 구현 - Ktor + kotlinx.serialization b..

이 글 및 KMP(Kotlin Multiplatform) 프로젝트의 글은, Claude를 활용해서 어디까지 공부하고 배울 수 있을지 알아보기 위해 작성 중인 글입니다. (본인은 KMP 지식이 없는 상태에서 진행되기 때문에, 본문에 틀린 정보가 있을 수 있습니다. 허나 매 PR마다 빌드해서 정상 작동을 확인하고 있습니다.) 프로젝트는 다음 Claude command를 설정한 후 진행됩니다.Phase 1 — 저장소 현황 파악 + feature 브랜치 생성 (kebab-case 네이밍 규칙)Phase 2 — 실제 구현 수행 (의존성 추가 → 공유 코드 → Android/iOS 적용) + 단계별 커밋 (conventional commits)Phase 3 — PR 생성 (gh pr create)Phase 4 — ..