SlideShare una empresa de Scribd logo
1 de 58
Descargar para leer sin conexión
코틀린 멀티플랫폼, 미지와의 조우
Building a Full Stack Web App with Kotlin Multiplatform and React, Spring
스프링러너 박용권/김지헌
1
콘텐츠
목차
content
핸즈온 환경 확인하기
핸즈온을 진행하기 위해 필요한 도구와 프로젝트 구성을 확인한다
2 코틀린 멀티플랫폼과 인사하기
코틀린 멀티플랫폼이 무엇인지, 또 어떻게 동작하는지 가볍게 알아본다
3 코틀린 멀티플랫폼과 친해지기
코틀린 멀티플랫폼과 함께 리액트, 스프링으로 웹 애플리케이션을 클라이언트부터 서버까지 함께 개발한다
4 코틀린 멀티플랫폼 좀 더 알아보기
코틀린 멀티플랫폼의 특징과 동작 방식, 그리고 한계를 알아본다
핸즈온 환경 확인하기
5 min exec
https://flic.kr/p/24AGZLS
2022 INFCON
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
Building
Full-Stack WebApp with
Kotlin Multiplatform and
React, Spring
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
사용자는 할 일 관리 페이지를 볼 수 있어요
사용자는 등록된 모든 할 일을 볼 수 있어요
사용자는 해야 할 일과 완료된 할 일을 구분해서 여과 할 수 있어요
사용자는 새로운 할 일을 등록 할 수 있어요
사용자는 등록된 할 일 수정 할 수 있어요 내용 변경 또는 완료 처리
사용자는 등록된 할 일 정리 할 수 있어요
사용자는 완료된 모든 할 일 정리 할 수 있어요
사용자는 알림창을 통해 오류 상황을 알 수 있어요
2022 INFCON
애플리케이션 아키텍처
참조 아키텍처로 클린 아키텍처 Clean Architecture 를 사용합니다
외부에서 내부로 접근하는 의존 관계만 허용합니다
애플리케이션 핵심 코드를 세부 구현사항에서 분리시킵니다
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
2022 INFCON
핸즈온 프로젝트 구성하기
2022 INFCON
IntelliJ IDEA Community Edition 설치하기
https://www.jetbrains.com/idea/download/#section=mac
!
핸즈온에서는 Ultimate 버전이 아닌 Community 버전을 사용합니다.
꼭 최신 버전을 설치해주세요!
2022 INFCON
IntelliJ Plugin Kotest 설치하기
https://plugins.jetbrains.com/plugin/14080-kotest
!
1. IntelliJ를 실행 후 Plugins 창을 선택하세요
2. Marketplace 탭을 선택하세요
3. kotest 를 검색 후 설치하세요
2022 INFCON
핸즈온 프로젝트 구성하기 1/4
2022 INFCON
핸즈온 프로젝트 구성하기 2/4
https://plugins.jetbrains.com/plugin/14080-kotest
!
1. IntelliJ를 실행 후 Projects 창을 선택하세요
2. Get from VCS 버튼을 선택하세요
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
2022 INFCON
핸즈온 프로젝트 구성하기 4/4
빌드 성공 메시지가 보이면
목표를 달성한거에요!
2022 INFCON
핸즈온 프로젝트 실행하기 1/4
src/jvmMain/kotlin/todoapp/TodoServerApplication.kt 파일을 열어주세요
fun main args: Array String 함수를 실행하세요
실행 아이콘을 클릭해서
애플리케이션을 실행 할 수 있어요
2022 INFCON
핸즈온 프로젝트 실행하기 2/4
애플리케이션이 정상적으로 실행되면 Run 콘솔에서 로그를 볼 수 있어요
Started TodoServerApplicationKt in x.xxx seconds JVM running for x.xxx 로그를 확인하세요
2022 INFCON
핸즈온 프로젝트 실행하기 3/4
src/jvmTest/kotlin/todoapp/data/r2dbc/R2dbcTodoRepositorySpecs 를 열어주세요
테스트 코드를 실행하고 성공 여부를 확인하세요
테스트 실행 아이콘을 클릭해서
테스트를 실행 할 수 있어요
2022 INFCON
핸즈온 프로젝트 실행하기 4/4
브라우저를 열고 localhost:8080/main.js 자원을 확인해요
만약 Whitelabel Error Page가 보이면 다음 안내사항을 따라하세요
2022 INFCON
핸즈온 프로젝트 실행하기 4.1/4
src/jsMain/kotlin/todoapp/TodoClientApplication.kt 파일을 열어주세요
13번 라인 TODO ... 내부 문자열을 변경 후 애플리케이션을 재시작 후 다시 main.js 에 접근해보세요
문자열 내부 내용을 변경해보세요!
전 마지막에 느낌표를 덧붙였어요!
2022 INFCON
핸즈온에 사용되는 템플릿 프로젝트 저장소
https://shorturl.at/bdmVY
2022 INFCON
10 min exec
코틀린 멀티플랫폼과 인사하기
https://flic.kr/p/HHCg2
2022 INFCON
코틀린을 어디에 쓸 수 있어요?
UX 경험을 유지하면서
안드로이드와 iOS 앱 로직 공유
JVM 기술과 유사한
현대적인 개발경험 제공
웹 영역까지 프로젝트 확장 구글이 권장하는 방식으로
안드로이드 앱 구성
2022 INFCON
Kotlin
Multiplatform
2022 INFCON
사용 사례
안드로이드 iOS 앱 동시 지원 Android and iOS applications
풀스택 웹 애플리케이션 Full stack web applications
멀티플랫폼 라이브러리 Multiplatform libraries
모바일부터 웹과 데스크톱, 서버까지 비즈니스 논리를 사용 Common code for mobile and web applications
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
2022 INFCON
모든 플랫폼에 걸쳐 공유되는 코드, 단 UI는 제외하고...!
코틀린은 모든 플랫폼에 걸쳐 동작 가능한 코드를 작성 할 수 있는 매커니즘을 제공한다
모든 플랫폼에 적용되는 공통된 비즈니스 로직을 작성해서 공유 할 수 있다
하지만 모든 플랫폼에서 단독으로 실행 가능한 애플리케이션을 지향하지 않는다
commonMain
iosMain jvmMain jsMain desktopMain
iosArm64Main iosX64Main linuxX64Main mingwX64Main macosX64Main
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
!
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
코틀린 멀티플랫폼과 친해지기
60 min exec
https://flic.kr/p/aMG2DF
2022 INFCON
2022 INFCON
https://github.com/arawn/building-fullstack-webapp-with-kotlin-multiplatform
!
1. HTML 형식 인덱스 페이지 작성하기
2. 초간단 리액트 앱 만들기
3. 할 일 관리 클라이언트 완성하기
4. 할 일 관리 서버 완성하기
5. UUID로 할 일 일련번호 생성하기
2022 INFCON
It s coding time!
2022 INFCON
Common
Kotlin
Common
Kotlin
Kotlin
/JVM
Kotlin
/JS
Kotlin
/Native
Native
Code
JS
Code
JVM
Code
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
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()
}
},
)
}
2022 INFCON
멀티플랫폼에서 동작하는 코틀린 코루틴 라이브러리
경량 스레드 기반으로 현대적인 동시성 프로그래밍을 지원하는 공식 라이브러리다
멀티플랫폼을 지원하며, 일관된 방식으로 동시성 프로그래밍을 작성 할 수 있다
https://kotlinlang.org/docs/coroutines-overview.html
!
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
!
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
2022 INFCON
멀티플랫폼에서 동작하는 코틀린 직렬화 라이브러리
객체를 문자열, 바이트 배열 또는 다양한 형식으로 직렬화하고, 다시 역직렬화 할 수 있는 공식 라이브러리다
JSON, CBOR, ProtoBuf, Properties 형식을 지원하고, 이외 사용자 정의 형식도 사용 할 수 있다
멀티플랫폼을 지원하기 때문에 모든 플랫폼에서 일관된 방식으로 동작한다
https://kotlinlang.org/docs/serialization.html
!
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)" }
}
}
}
2022 INFCON
비동기 서버 및 클라이언트 구축을 돕는 Ktor 프레임워크
HTTP 및 웹 소켓을 위한 통합 인터페이스를 제공한다
멀티플랫폼을 지원하며, 코틀린 코루틴과 자연스럽게 통합됀다
https://ktor.io/docs/getting-started-ktor-client.html
!
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)")
}
2022 INFCON
코틀린을 위한 경량 로깅 프레임워크인 kotlin logging
코틀린의 관용적 로깅 방법 및 로거 모범 사례를 기반으로 간결한 방식으로 사용 할 수 있다
람다를 통해 지연 평가되는 문자열을 로그로 기록하며, 멀티플랫폼을 지원한다
https://ktor.io/docs/getting-started-ktor-client.html
!
2022 INFCON
Kotlin/JS
Common
Kotlin
Kotlin
/JVM
Kotlin
/JS
Kotlin
/Native
Native
Code
JS
Code
JVM
Code
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
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
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
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
2022 INFCON
영역 특화 언어 DSL; Domain Specific Language
코드의 가독성과 유지 보수성을 좋게 유지 할 수 있다
코드 자동완성 기능을 누릴 수 있다
컴파일 시점에 문법 오류를 알 수 있다
https://en.wikipedia.org/wiki/Domain-specific_language
!
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
코틀린 멀티플랫폼 좀 더 알아보기
10 min exec
https://flic.kr/p/QXVXYA
2022 INFCON
2022 INFCON
다시, 코틀린 멀티플랫폼이란?
Kotlin
JavaScript
Kotlin
Compiler
JVM JS Native
JAR / AAR Binaries
2022 INFCON
코틀린 컴파일러
frontend
JVM backend JS backend Native backend
*.class *.js *.so
source code : *.kt
syntax tree +

semantic info
코틀린 1.7부터 새로운 컴파일러인 K2 가 알파 단계로 출시되었어요
!
컴파일러 내부
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
2022 INFCON
다시, 코틀린 멀티플랫폼의 작동 방식
main test
main test
jvmMain jvmTest jsMain jsTest
commonTest
commonMain
대상 플랫폼
컴파일러 컴파일러
대상 플랫폼
소스 코드
}
모든 플랫폼을 대상으로
테스트 되는 코드
모든 플랫폼을 대상으로
컴파일되는 공유 코드
JVM 플랫폼으로
컴파일되는 서버 코드
의존관계
jvm js
JS 로 컴파일되는
클라이언트 코드
2022 INFCON
모든 플랫폼을 대상으로 비즈니스 논리를 공유
https://kotlinlang.org/docs/multiplatform-share-on-platforms.html
!
2022 INFCON
코틀린 멀티플랫폼의 한계
목적과 필요에 따른 기술 선택과 조직 구성에 대한 고민이 필요합니다
아직 덜여문 생태계로 스스로 문제를 해결해야 하는 상황을 자주 만날 수 있다는 사실을 이해해야 합니다
제약적인 개발 환경과 프레임워크 또는 라이브러리 에 대한 이해가 필요합니다
2022 INFCON
함께해주셔서 감사합니다
https://flic.kr/p/8gHoTe
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

Más contenido relacionado

La actualidad más candente

Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]
Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]
Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]MongoDB
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with SpringJoshua Long
 
webservice scaling for newbie
webservice scaling for newbiewebservice scaling for newbie
webservice scaling for newbieDaeMyung Kang
 
[2D1]Elasticsearch 성능 최적화
[2D1]Elasticsearch 성능 최적화[2D1]Elasticsearch 성능 최적화
[2D1]Elasticsearch 성능 최적화NAVER D2
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications JavaAntoine Rey
 
C++ extension methods
C++ extension methodsC++ extension methods
C++ extension methodsphil_nash
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
 
How to build massive service for advance
How to build massive service for advanceHow to build massive service for advance
How to build massive service for advanceDaeMyung Kang
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introductionRasheed Waraich
 
JDBC - JPA - Spring Data
JDBC - JPA - Spring DataJDBC - JPA - Spring Data
JDBC - JPA - Spring DataArturs Drozdovs
 
Web api crud operations
Web api crud operationsWeb api crud operations
Web api crud operationsEyal Vardi
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les basesAntoine Rey
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!pyrasis
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfKnoldus Inc.
 
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編なべ
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
 
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)Ji-Woong Choi
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 

La actualidad más candente (20)

Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]
Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]
Naver속도의, 속도에 의한, 속도를 위한 몽고DB (네이버 컨텐츠검색과 몽고DB) [Naver]
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with Spring
 
webservice scaling for newbie
webservice scaling for newbiewebservice scaling for newbie
webservice scaling for newbie
 
React js
React jsReact js
React js
 
[2D1]Elasticsearch 성능 최적화
[2D1]Elasticsearch 성능 최적화[2D1]Elasticsearch 성능 최적화
[2D1]Elasticsearch 성능 최적화
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
 
C++ extension methods
C++ extension methodsC++ extension methods
C++ extension methods
 
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
 
How to build massive service for advance
How to build massive service for advanceHow to build massive service for advance
How to build massive service for advance
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introduction
 
JDBC - JPA - Spring Data
JDBC - JPA - Spring DataJDBC - JPA - Spring Data
JDBC - JPA - Spring Data
 
Web api crud operations
Web api crud operationsWeb api crud operations
Web api crud operations
 
Workshop Spring - Session 1 - L'offre Spring et les bases
Workshop Spring  - Session 1 - L'offre Spring et les basesWorkshop Spring  - Session 1 - L'offre Spring et les bases
Workshop Spring - Session 1 - L'offre Spring et les bases
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
 
Basics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdfBasics of React Hooks.pptx.pdf
Basics of React Hooks.pptx.pdf
 
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
[오픈소스컨설팅]Scouter 설치 및 사용가이드(JBoss)
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 

Similar a 코틀린 멀티플랫폼, 미지와의 조우

Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발지수 윤
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기John Kim
 
Kotlin 2.0을 통해 알아보는 코틀린의 미래
Kotlin 2.0을 통해 알아보는 코틀린의 미래Kotlin 2.0을 통해 알아보는 코틀린의 미래
Kotlin 2.0을 통해 알아보는 코틀린의 미래Leonardo YongUk Kim
 
Codeveloper 개발기
Codeveloper 개발기Codeveloper 개발기
Codeveloper 개발기Jay Lee
 
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)Sang Don Kim
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Jiam Seo
 
Tech Update - The Future of .NET Framework (김명신 부장)
Tech Update - The Future of .NET Framework (김명신 부장)Tech Update - The Future of .NET Framework (김명신 부장)
Tech Update - The Future of .NET Framework (김명신 부장)Eunbee Song
 
Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용지원 이
 
Elastic beanstalk - 판교 초급자 모임 - 안병학
Elastic beanstalk - 판교 초급자 모임 - 안병학Elastic beanstalk - 판교 초급자 모임 - 안병학
Elastic beanstalk - 판교 초급자 모임 - 안병학Byeong-hak An
 
20201121 코드 삼분지계
20201121 코드 삼분지계20201121 코드 삼분지계
20201121 코드 삼분지계Chiwon Song
 
CI in the Mobile World (한글번역)
CI in the Mobile World (한글번역)CI in the Mobile World (한글번역)
CI in the Mobile World (한글번역)DONGSU KIM
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
I phone 2 release
I phone 2 releaseI phone 2 release
I phone 2 releaseJaehyeuk Oh
 
코드 생성을 사용해 개발 속도 높이기 NDC2011
코드 생성을 사용해 개발 속도 높이기 NDC2011코드 생성을 사용해 개발 속도 높이기 NDC2011
코드 생성을 사용해 개발 속도 높이기 NDC2011Esun Kim
 
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...탑크리에듀(구로디지털단지역3번출구 2분거리)
 
Internship backend
Internship backendInternship backend
Internship backendYein Sim
 
Android Native Module 안정적으로 개발하기
Android Native Module 안정적으로 개발하기Android Native Module 안정적으로 개발하기
Android Native Module 안정적으로 개발하기hanbeom Park
 

Similar a 코틀린 멀티플랫폼, 미지와의 조우 (20)

Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
 
Kotlin 2.0을 통해 알아보는 코틀린의 미래
Kotlin 2.0을 통해 알아보는 코틀린의 미래Kotlin 2.0을 통해 알아보는 코틀린의 미래
Kotlin 2.0을 통해 알아보는 코틀린의 미래
 
Spring boot DI
Spring boot DISpring boot DI
Spring boot DI
 
Codeveloper 개발기
Codeveloper 개발기Codeveloper 개발기
Codeveloper 개발기
 
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)
[Td 2015]windows, linux, mac 신경 안 쓴다. .net 2015와 더더 좋아지는 c# 살짝 훔쳐보기(김명신)
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
 
Tech Update - The Future of .NET Framework (김명신 부장)
Tech Update - The Future of .NET Framework (김명신 부장)Tech Update - The Future of .NET Framework (김명신 부장)
Tech Update - The Future of .NET Framework (김명신 부장)
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 
Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용Vert.x 세미나 이지원_배포용
Vert.x 세미나 이지원_배포용
 
Elastic beanstalk - 판교 초급자 모임 - 안병학
Elastic beanstalk - 판교 초급자 모임 - 안병학Elastic beanstalk - 판교 초급자 모임 - 안병학
Elastic beanstalk - 판교 초급자 모임 - 안병학
 
20201121 코드 삼분지계
20201121 코드 삼분지계20201121 코드 삼분지계
20201121 코드 삼분지계
 
CI in the Mobile World (한글번역)
CI in the Mobile World (한글번역)CI in the Mobile World (한글번역)
CI in the Mobile World (한글번역)
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
I phone 2 release
I phone 2 releaseI phone 2 release
I phone 2 release
 
코드 생성을 사용해 개발 속도 높이기 NDC2011
코드 생성을 사용해 개발 속도 높이기 NDC2011코드 생성을 사용해 개발 속도 높이기 NDC2011
코드 생성을 사용해 개발 속도 높이기 NDC2011
 
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
 
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스  ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
NCS기반 Spring Framework & MyBatis_ 스프링프레임워크 & 마이바티스 ☆무료강의자료 제공/ 구로오라클학원, 탑크리에...
 
Internship backend
Internship backendInternship backend
Internship backend
 
Android Native Module 안정적으로 개발하기
Android Native Module 안정적으로 개발하기Android Native Module 안정적으로 개발하기
Android Native Module 안정적으로 개발하기
 

Más de Arawn Park

우린 같은 곳을 바라 보고 있나요?
우린 같은 곳을 바라 보고 있나요?우린 같은 곳을 바라 보고 있나요?
우린 같은 곳을 바라 보고 있나요?Arawn Park
 
kotlinx.serialization
kotlinx.serializationkotlinx.serialization
kotlinx.serializationArawn Park
 
#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기Arawn Park
 
점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정Arawn Park
 
이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정Arawn Park
 
Introduction to Kotlin
Introduction to KotlinIntroduction to Kotlin
Introduction to KotlinArawn Park
 
Reactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/OReactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/OArawn Park
 
Spring framework 4.x
Spring framework 4.xSpring framework 4.x
Spring framework 4.xArawn Park
 
씹고 뜯고 맛보고 즐기는 스트림 API
씹고 뜯고 맛보고 즐기는 스트림 API씹고 뜯고 맛보고 즐기는 스트림 API
씹고 뜯고 맛보고 즐기는 스트림 APIArawn Park
 
Spring framework 3.2 > 4.0 — themes and trends
Spring framework 3.2 > 4.0 — themes and trendsSpring framework 3.2 > 4.0 — themes and trends
Spring framework 3.2 > 4.0 — themes and trendsArawn Park
 
overview of spring4
overview of spring4overview of spring4
overview of spring4Arawn Park
 
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )Arawn Park
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVCArawn Park
 
[Spring Camp 2013] Java Configuration 없인 못살아!
[Spring Camp 2013] Java Configuration 없인 못살아![Spring Camp 2013] Java Configuration 없인 못살아!
[Spring Camp 2013] Java Configuration 없인 못살아!Arawn Park
 
Vagrant와 chef로 개발서버 구축 자동화하기
Vagrant와 chef로 개발서버 구축 자동화하기Vagrant와 chef로 개발서버 구축 자동화하기
Vagrant와 chef로 개발서버 구축 자동화하기Arawn Park
 

Más de Arawn Park (15)

우린 같은 곳을 바라 보고 있나요?
우린 같은 곳을 바라 보고 있나요?우린 같은 곳을 바라 보고 있나요?
우린 같은 곳을 바라 보고 있나요?
 
kotlinx.serialization
kotlinx.serializationkotlinx.serialization
kotlinx.serialization
 
#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기
 
점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정점진적인 레거시 웹 애플리케이션 개선 과정
점진적인 레거시 웹 애플리케이션 개선 과정
 
이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정이벤트 기반 분산 시스템을 향한 여정
이벤트 기반 분산 시스템을 향한 여정
 
Introduction to Kotlin
Introduction to KotlinIntroduction to Kotlin
Introduction to Kotlin
 
Reactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/OReactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/O
 
Spring framework 4.x
Spring framework 4.xSpring framework 4.x
Spring framework 4.x
 
씹고 뜯고 맛보고 즐기는 스트림 API
씹고 뜯고 맛보고 즐기는 스트림 API씹고 뜯고 맛보고 즐기는 스트림 API
씹고 뜯고 맛보고 즐기는 스트림 API
 
Spring framework 3.2 > 4.0 — themes and trends
Spring framework 3.2 > 4.0 — themes and trendsSpring framework 3.2 > 4.0 — themes and trends
Spring framework 3.2 > 4.0 — themes and trends
 
overview of spring4
overview of spring4overview of spring4
overview of spring4
 
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )
조금 더 좋은 개발자가 된다는 것( 부제: 컨퍼런스의 발표자가 된다는 것 )
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVC
 
[Spring Camp 2013] Java Configuration 없인 못살아!
[Spring Camp 2013] Java Configuration 없인 못살아![Spring Camp 2013] Java Configuration 없인 못살아!
[Spring Camp 2013] Java Configuration 없인 못살아!
 
Vagrant와 chef로 개발서버 구축 자동화하기
Vagrant와 chef로 개발서버 구축 자동화하기Vagrant와 chef로 개발서버 구축 자동화하기
Vagrant와 chef로 개발서버 구축 자동화하기
 

코틀린 멀티플랫폼, 미지와의 조우

  • 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
  • 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
  • 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 를 검색 후 설치하세요
  • 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 기술과 유사한 현대적인 개발경험 제공 웹 영역까지 프로젝트 확장 구글이 권장하는 방식으로 안드로이드 앱 구성
  • 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!
  • 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 !
  • 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 코틀린 멀티플랫폼의 한계 목적과 필요에 따른 기술 선택과 조직 구성에 대한 고민이 필요합니다 아직 덜여문 생태계로 스스로 문제를 해결해야 하는 상황을 자주 만날 수 있다는 사실을 이해해야 합니다 제약적인 개발 환경과 프레임워크 또는 라이브러리 에 대한 이해가 필요합니다
  • 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