1.
코틀린 멀티플랫폼, 미지와의 조우
Building a Full Stack Web App with Kotlin Multiplatform and React, Spring
스프링러너 박용권/김지헌

2.
1
콘텐츠
목차
content
핸즈온 환경 확인하기
핸즈온을 진행하기 위해 필요한 도구와 프로젝트 구성을 확인한다
2 코틀린 멀티플랫폼과 인사하기
코틀린 멀티플랫폼이 무엇인지, 또 어떻게 동작하는지 가볍게 알아본다
3 코틀린 멀티플랫폼과 친해지기
코틀린 멀티플랫폼과 함께 리액트, 스프링으로 웹 애플리케이션을 클라이언트부터 서버까지 함께 개발한다
4 코틀린 멀티플랫폼 좀 더 알아보기
코틀린 멀티플랫폼의 특징과 동작 방식, 그리고 한계를 알아본다

3.
핸즈온 환경 확인하기
5 min exec
https://flic.kr/p/24AGZLS
2022 INFCON

4.
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
Building
Full-Stack WebApp with
Kotlin Multiplatform and
React, Spring

5.
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
사용자는 할 일 관리 페이지를 볼 수 있어요
사용자는 등록된 모든 할 일을 볼 수 있어요
사용자는 해야 할 일과 완료된 할 일을 구분해서 여과 할 수 있어요
사용자는 새로운 할 일을 등록 할 수 있어요
사용자는 등록된 할 일 수정 할 수 있어요 내용 변경 또는 완료 처리
사용자는 등록된 할 일 정리 할 수 있어요
사용자는 완료된 모든 할 일 정리 할 수 있어요
사용자는 알림창을 통해 오류 상황을 알 수 있어요

6.
2022 INFCON
애플리케이션 아키텍처
참조 아키텍처로 클린 아키텍처 Clean Architecture 를 사용합니다
외부에서 내부로 접근하는 의존 관계만 허용합니다
애플리케이션 핵심 코드를 세부 구현사항에서 분리시킵니다

7.
2022 INFCON
모듈 구조와 소프트웨어 스택
Common Kotlin
--------------------------
kotlinx.coroutines
kotlinx.serialization
ktor-client
kotlin-logging
CORE
Kotlin/JS
--------------------------
react
emotion
mui
kotlinx-html-js
CLIENT
Kotlin/JVM
--------------------------
spring-webflux
spring-data-r2dbc
spring-boot
kotlinx-html-jvm
SERVER
dependency

8.
2022 INFCON
핸즈온 프로젝트 구성하기

9.
2022 INFCON
IntelliJ IDEA Community Edition 설치하기
https://www.jetbrains.com/idea/download/#section=mac
!
핸즈온에서는 Ultimate 버전이 아닌 Community 버전을 사용합니다.
꼭 최신 버전을 설치해주세요!

10.
2022 INFCON
IntelliJ Plugin Kotest 설치하기
https://plugins.jetbrains.com/plugin/14080-kotest
!
1. IntelliJ를 실행 후 Plugins 창을 선택하세요
2. Marketplace 탭을 선택하세요
3. kotest 를 검색 후 설치하세요

11.
2022 INFCON
핸즈온 프로젝트 구성하기 1/4

12.
2022 INFCON
핸즈온 프로젝트 구성하기 2/4
https://plugins.jetbrains.com/plugin/14080-kotest
!
1. IntelliJ를 실행 후 Projects 창을 선택하세요
2. Get from VCS 버튼을 선택하세요

13.
2022 INFCON
핸즈온 프로젝트 구성하기 3/4
https://plugins.jetbrains.com/plugin/14080-kotest
!
1. Repository URL 창을 선택해주세요
2. Version control: Git 을 선택해주세요
3. URL 에 프로젝트 저장소 주소를 입력하세요
4. Directory: 를 확인해주세요
5. Clone 버튼을 선택하세요
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform.git

14.
2022 INFCON
핸즈온 프로젝트 구성하기 4/4
빌드 성공 메시지가 보이면
목표를 달성한거에요!

15.
2022 INFCON
핸즈온 프로젝트 실행하기 1/4
src/jvmMain/kotlin/todoapp/TodoServerApplication.kt 파일을 열어주세요
fun main args: Array String 함수를 실행하세요
실행 아이콘을 클릭해서
애플리케이션을 실행 할 수 있어요

16.
2022 INFCON
핸즈온 프로젝트 실행하기 2/4
애플리케이션이 정상적으로 실행되면 Run 콘솔에서 로그를 볼 수 있어요
Started TodoServerApplicationKt in x.xxx seconds JVM running for x.xxx 로그를 확인하세요

17.
2022 INFCON
핸즈온 프로젝트 실행하기 3/4
src/jvmTest/kotlin/todoapp/data/r2dbc/R2dbcTodoRepositorySpecs 를 열어주세요
테스트 코드를 실행하고 성공 여부를 확인하세요
테스트 실행 아이콘을 클릭해서
테스트를 실행 할 수 있어요

18.
2022 INFCON
핸즈온 프로젝트 실행하기 4/4
브라우저를 열고 localhost:8080/main.js 자원을 확인해요
만약 Whitelabel Error Page가 보이면 다음 안내사항을 따라하세요

19.
2022 INFCON
핸즈온 프로젝트 실행하기 4.1/4
src/jsMain/kotlin/todoapp/TodoClientApplication.kt 파일을 열어주세요
13번 라인 TODO ... 내부 문자열을 변경 후 애플리케이션을 재시작 후 다시 main.js 에 접근해보세요
문자열 내부 내용을 변경해보세요!
전 마지막에 느낌표를 덧붙였어요!

20.
2022 INFCON
핸즈온에 사용되는 템플릿 프로젝트 저장소
https://shorturl.at/bdmVY

21.
2022 INFCON
10 min exec
코틀린 멀티플랫폼과 인사하기
https://flic.kr/p/HHCg2

22.
2022 INFCON
코틀린을 어디에 쓸 수 있어요?
UX 경험을 유지하면서
안드로이드와 iOS 앱 로직 공유
JVM 기술과 유사한
현대적인 개발경험 제공
웹 영역까지 프로젝트 확장 구글이 권장하는 방식으로
안드로이드 앱 구성

23.
2022 INFCON
Kotlin
Multiplatform

24.
2022 INFCON
사용 사례
안드로이드 iOS 앱 동시 지원 Android and iOS applications
풀스택 웹 애플리케이션 Full stack web applications
멀티플랫폼 라이브러리 Multiplatform libraries
모바일부터 웹과 데스크톱, 서버까지 비즈니스 논리를 사용 Common code for mobile and web applications

25.
2022 INFCON
코틀린 멀티플랫폼의 작동 방식
Native
Code
JS
Code
JVM
Code
Common Kotlin
Kotlin/JVM Kotlin for server side
Kotlin/JS Kotlin for JavaScript
Kotlin/Native
Common
Kotlin
Kotlin
/JVM
Kotlin
/JS
Kotlin
/Native

26.
2022 INFCON
모든 플랫폼에 걸쳐 공유되는 코드, 단 UI는 제외하고...!
코틀린은 모든 플랫폼에 걸쳐 동작 가능한 코드를 작성 할 수 있는 매커니즘을 제공한다
모든 플랫폼에 적용되는 공통된 비즈니스 로직을 작성해서 공유 할 수 있다
하지만 모든 플랫폼에서 단독으로 실행 가능한 애플리케이션을 지향하지 않는다
commonMain
iosMain jvmMain jsMain desktopMain
iosArm64Main iosX64Main linuxX64Main mingwX64Main macosX64Main

27.
2022 INFCON
멀티플랫폼 프로젝트 구조 이해하기 : 그레이들 플러그인 구성
plugins {
kotlin("multiplatform") version "1.6.21"
}
kotlin {
jvm {
withJava()
}
js(IR) {
binaries.executable()
browser { ... }
}
sourceSets {
val commonMain by getting {
dependencies { ... }
}
val commonTest by getting
val jsMain by getting
val jsTest by getting
val jvmMain by getting
val jvmTest by getting
}
}
https://kotlinlang.org/docs/multiplatform-dsl-reference.html
!

28.
2022 INFCON
멀티플랫폼 프로젝트 구조 이해하기 : 소스 폴더 구성
"## build.gradle.kts
$## src
"## commonMain
% $## kotlin
% $## todoapp
% "## application
% $## domain
"## commonTest
"## jsMain
% $## kotlin
% $## todoapp
% "## ui
% $## TodoClientApplication.kt
"## jsTest
"## jvmMain
% "## kotlin
% % $## todoapp
% % "## web
% % "## data
% % $## TodoServerApplication.kt
% $## resources
$## jvmTest

29.
코틀린 멀티플랫폼과 친해지기
60 min exec
https://flic.kr/p/aMG2DF
2022 INFCON

30.
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
1. HTML 형식 인덱스 페이지 작성하기
2. 초간단 리액트 앱 만들기
3. 할 일 관리 클라이언트 완성하기
4. 할 일 관리 서버 완성하기
5. UUID로 할 일 일련번호 생성하기

31.
2022 INFCON
It s coding time!

32.
2022 INFCON
Common
Kotlin
Common
Kotlin
Kotlin
/JVM
Kotlin
/JS
Kotlin
/Native
Native
Code
JS
Code
JVM
Code

33.
2022 INFCON
플랫폼별 API 연결하기
https://kotlinlang.org/docs/multiplatform-connect-to-apis.html
!
// file:src/commonMain/kotlin/todoapp/domain/TodoId.kt
expect interface TodoIdGenerator {
open fun generateId(): TodoId
}
class UUIDTodoIdGenerator: TodoIdGenerator
// file:src/jsMain/kotlin/todoapp/domain/TodoIdGenerator.kt
actual interface TodoIdGenerator {
actual fun generateId() = TodoId(external.uuid.v4().lowercase())
}
// file:src/jvmMain/kotlin/todoapp/domain/TodoIdGenerator.kt
actual interface TodoIdGenerator {
actual fun generateId() = TodoId(UUID.randomUUID().toString().lowercase())
}
Common Kotlin & Kotlin/JS, Kotlin/JVM

34.
2022 INFCON
코틀린 코루틴을 사용한 동시성 프로그래밍
Common Kotlin
import kotlinx.coroutines.*
fun useTodos(
find: TodoFind,
registry: TodoRegistry,
coroutineDispatcher: CoroutineDispatcher = Dispatchers.Default
): UseTodosProps {
...
return UseTodosProps(
todos = todos,
register = { text ->
CoroutineScope(coroutineDispatcher).async {
withContext(coroutineContext) {
registry.register(text = text)
}
fetch()
}
},
)
}

35.
2022 INFCON
멀티플랫폼에서 동작하는 코틀린 코루틴 라이브러리
경량 스레드 기반으로 현대적인 동시성 프로그래밍을 지원하는 공식 라이브러리다
멀티플랫폼을 지원하며, 일관된 방식으로 동시성 프로그래밍을 작성 할 수 있다
https://kotlinlang.org/docs/coroutines-overview.html
!

36.
2022 INFCON
코틀린 코루틴을 광범위하게 지원하는 스프링 프로젝트
fun handler : Mono Void becomes suspend fun handler
fun handler : Mono T becomes suspend fun handler : T or suspend fun handler : T?
fun handler : Flux T becomes fun handler : Flow T
https://docs.spring.io/spring-framework/docs/current/reference/html/languages.html#coroutines
!

37.
2022 INFCON
코틀린 직렬화를 사용한 JSON 직렬화와 역직렬화
import kotlinx.serialization.json.Json
import kotlinx.serialization.encodeToString
import kotlinx.serialization.decodeFromString
@kotlinx.serialization.Serializable
data class Todo(...)
val todo = Todo(
id = TodoId("test"),
text = "Task One",
completed = false,
createdDate = LocalDateTime.parse("2020-08-26T13:00:00")
)
val encoded = Json.encodeToString(todo)
assertEquals("""
{"id":{"id":"test"},"text":"Task One","completed":false,"createdDate":"2020-08-26T13:00"}
""".trimIndent(), encoded)
val decoded = Json.decodeFromString<Todo>(encoded)
assertEquals(todo, decoded)
Common Kotlin

38.
2022 INFCON
멀티플랫폼에서 동작하는 코틀린 직렬화 라이브러리
객체를 문자열, 바이트 배열 또는 다양한 형식으로 직렬화하고, 다시 역직렬화 할 수 있는 공식 라이브러리다
JSON, CBOR, ProtoBuf, Properties 형식을 지원하고, 이외 사용자 정의 형식도 사용 할 수 있다
멀티플랫폼을 지원하기 때문에 모든 플랫폼에서 일관된 방식으로 동작한다
https://kotlinlang.org/docs/serialization.html
!

39.
2022 INFCON
Ktor 클라이언트로 Web API 호출
Common Kotlin
class HttpClientTodoManager(
private val httpClient: HttpClient,
private val webAPIProperties: WebAPIProperties = WebAPIProperties()
): TodoFind, TodoRegistry, TodoModification, TodoCleanup {
override suspend fun all(): Todos {
return httpClient.get(webAPIProperties.findAllUrl).body()
}
override suspend fun register(text: String): TodoId {
TodoValidator.validate(text)
return httpClient.post(webAPIProperties.registerUrl) {
contentType(ContentType.Application.Json)
setBody(WriteTodoCommand(text))
}.body<TodoId>().apply {
logger.info { "Registered todo (id: $this)" }
}
}
}

40.
2022 INFCON
비동기 서버 및 클라이언트 구축을 돕는 Ktor 프레임워크
HTTP 및 웹 소켓을 위한 통합 인터페이스를 제공한다
멀티플랫폼을 지원하며, 코틀린 코루틴과 자연스럽게 통합됀다
https://ktor.io/docs/getting-started-ktor-client.html
!

41.
2022 INFCON
kotlin logging 라이브러리를 사용한 로깅
Common Kotlin
import mu.KotlinLogging
class InMemoryTodoManager(
private val todoIdGenerator: TodoIdGenerator = DefaultTodoIdGenerator()
): TodoFind, TodoRegistry, TodoModification, TodoCleanup {
private val logger = KotlinLogging.logger("todoapp.application.support.InMemoryTodoManager")
override suspend fun register(text: String): TodoId {
return Todo.create(text = text, idGenerator = todoIdGenerator).apply {
todos.add(this)
logger.info { "Registered todo (id: $id)" }
}.id
}
...
private fun loadTodoById(id: TodoId) =
todos.firstOrNull { it.id == id } ?: error("Not Found Todo (id: $id)")
}

42.
2022 INFCON
코틀린을 위한 경량 로깅 프레임워크인 kotlin logging
코틀린의 관용적 로깅 방법 및 로거 모범 사례를 기반으로 간결한 방식으로 사용 할 수 있다
람다를 통해 지연 평가되는 문자열을 로그로 기록하며, 멀티플랫폼을 지원한다
https://ktor.io/docs/getting-started-ktor-client.html
!

43.
2022 INFCON
Kotlin/JS
Common
Kotlin
Kotlin
/JVM
Kotlin
/JS
Kotlin
/Native
Native
Code
JS
Code
JVM
Code

44.
2022 INFCON
브라우저BROWSER와 돔DOM API
https://kotlinlang.org/docs/browser-api-dom.html
!
import kotlinx.browser.document
import kotlinx.html.dom.create
import kotlinx.html.h1
import kotlinx.html.js.div
fun main() {
val welcome = document.create.div {
h1 {
+"Hello, Kotlin/JS"
}
}
document.getElementById("root")?.appendChild(welcome)
}
Kotlin/JS

45.
2022 INFCON
외부 자바스크립트 라이브러리 사용
https://kotlinlang.org/docs/browser-api-dom.html
!
// file:src/jsMain/kotlin/external/issorted/is-sorted.kt
@JsModule("is-sorted")
@JsNonModule
external fun <T> sorted(a: Array<T>): Boolean
// file:src/jsTest/kotlin/external/IsSortedTest.kt
import kotlin.test.Test
class IsSortedTest {
@Test
fun thingsShouldWork() {
assertTrue(sorted(arrayOf(1,2,3)))
}
@Test
fun thingsShouldBreak() {
assertFalse(sorted(arrayOf(3,1,2)))
}
}
Kotlin/JS

46.
2022 INFCON
Kotlin/JS로 작성한 리액트 앱
// file:src/jsMain/kotlin/todoapp/TodoClientApplication.kt
import react.dom.client.createRoot
fun main() {
val container = document.getElementById("root") ?: error("Couldn't find root container!")
createRoot(container = container).render(
WelcomePage.create {
name = "SpringRunner"
}
)
}
// file:src/jsMain/kotlin/todoapp/ui/welcome/WelcomePage.kt
import react.*
external interface WelcomePageProps : Props {
var name: String
}
val WelcomePage = FC<WelcomePageProps> { props ->
val (name, setName) = useState(props.name)
section { ... }
}
Kotlin/JS

47.
2022 INFCON
DSL로 작성한 스프링의 경량 함수형 프로그래밍 모델 with WebFlux.fn and WebMvc.fn
https://docs.spring.io/spring-framework/docs/current/reference/html/web-reactive.html#webflux-fn
!
import org.springframework.web.reactive.function.server.RouterFunction
import org.springframework.web.reactive.function.server.ServerRequest
import org.springframework.web.reactive.function.server.ServerResponse
import org.springframework.web.reactive.function.server.router
class IndexRouter : RouterFunction<ServerResponse> {
private val delegate = router {
accept(MediaType.TEXT_HTML).nest {
GET("/") {
ok().contentType(MediaType.TEXT_HTML).bodyValue(indexHtml)
}
}
}
private val indexHtml = buildString { ... }
override fun route(request: ServerRequest) = delegate.route(request)
}
Kotlin/JVM

48.
2022 INFCON
영역 특화 언어 DSL; Domain Specific Language
코드의 가독성과 유지 보수성을 좋게 유지 할 수 있다
코드 자동완성 기능을 누릴 수 있다
컴파일 시점에 문법 오류를 알 수 있다
https://en.wikipedia.org/wiki/Domain-specific_language
!

49.
2022 INFCON
타입 안전성을 보장하는 코틀린 HTML DSL with Kotlin Multiplatform
https://github.com/Kotlin/kotlinx.html
!
import kotlinx.html.*
import kotlinx.html.stream.appendHTML
private val indexHtml = buildString {
appendLine("<!DOCTYPE html>")
appendHTML(xhtmlCompatible = true).html {
head {
title("KMP • TodoMVC")
meta(charset = "utf-8")
link(href = "/webjars/todomvc-common/1.0.5/base.css", rel = "stylesheet")
link(href = "/webjars/todomvc-app-css/2.4.1/index.css", rel = "stylesheet")
}
body {
div {
id = "root"
}
script(src = "/main.js") { }
}
}
}
Kotlin/JVM

50.
코틀린 멀티플랫폼 좀 더 알아보기
10 min exec
https://flic.kr/p/QXVXYA
2022 INFCON

51.
2022 INFCON
다시, 코틀린 멀티플랫폼이란?
Kotlin
JavaScript
Kotlin
Compiler
JVM JS Native
JAR / AAR Binaries

52.
2022 INFCON
코틀린 컴파일러
frontend
JVM backend JS backend Native backend
*.class *.js *.so
source code : *.kt
syntax tree +
semantic info
코틀린 1.7부터 새로운 컴파일러인 K2 가 알파 단계로 출시되었어요
!
컴파일러 내부

53.
2022 INFCON
플랫폼 추상화 매커니즘
JavaScript
expect fun / class
actual fun / class
declaration
actual fun / class
declaration
actual fun / class
declaration
JVM / Android Native
Common
import JVM libraries
import JS libraries
(with NPM)
import Native libraries

54.
2022 INFCON
다시, 코틀린 멀티플랫폼의 작동 방식
main test
main test
jvmMain jvmTest jsMain jsTest
commonTest
commonMain
대상 플랫폼
컴파일러 컴파일러
대상 플랫폼
소스 코드
}
모든 플랫폼을 대상으로
테스트 되는 코드
모든 플랫폼을 대상으로
컴파일되는 공유 코드
JVM 플랫폼으로
컴파일되는 서버 코드
의존관계
jvm js
JS 로 컴파일되는
클라이언트 코드

55.
2022 INFCON
모든 플랫폼을 대상으로 비즈니스 논리를 공유
https://kotlinlang.org/docs/multiplatform-share-on-platforms.html
!

56.
2022 INFCON
코틀린 멀티플랫폼의 한계
목적과 필요에 따른 기술 선택과 조직 구성에 대한 고민이 필요합니다
아직 덜여문 생태계로 스스로 문제를 해결해야 하는 상황을 자주 만날 수 있다는 사실을 이해해야 합니다
제약적인 개발 환경과 프레임워크 또는 라이브러리 에 대한 이해가 필요합니다

57.
2022 INFCON
함께해주셔서 감사합니다
https://flic.kr/p/8gHoTe

58.
2022 INFCON
참고자료
Kotlin Multiplatform
Building a Full Stack Web App with Kotlin Multiplatform
Building Web Applications with React and Kotlin/JS
Get Started with Kotlin Multiplatform and Spring Boot
Diving into Kotlin/ JS with Sebastian Aigner
Book: Mastering Kotlin
Book: Simplifying Application Development with Kotlin Multiplatform Mobile
Book: Kotlin Multiplatform by Tutorials