타입 안전 HTML DSL(Typesafe HTML DSL)

타입 안전 HTML DSL(Typesafe HTML DSL)

kotlinx.html 라이브러리는 정적으로 타입이 지정된 HTML 빌더를 사용해 DOM 요소를 생성하는 기능을 제공해요. (그리고 JavaScript 외에도 JVM 타깃에서도 사용할 수 있답니다!) 이번 글에서는 의존성 설정부터 실제 DOM 생성 예제까지 다뤄볼게요.

출처: Typesafe HTML DSL

본문

라이브러리를 사용하려면 해당 저장소와 의존성을 build.gradle.kts 파일에 추가해요:

repositories {
    // ...
    mavenCentral()
}
dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.8.0")
    // ...
}

의존성이 추가되면 DOM을 생성하기 위해 제공되는 다양한 인터페이스에 접근할 수 있어요. 제목(headline), 텍스트, 링크를 렌더링하려면, 예를 들어 다음 스니펫이면 충분해요:

import kotlinx.browser.*
import kotlinx.html.*
import kotlinx.html.dom.*

fun main() {
    document.body!!.append.div {
        h1 {
            +"Welcome to Kotlin/JS!"
        }
        p {
            +"Fancy joining this year's "
            a("https://kotlinconf.com/") {
                +"KotlinConf"
            }
            +"?"
        }
    }
}

이 예제를 브라우저에서 실행하면 DOM이 아주 직관적인 방식으로 조립돼요. 브라우저의 개발자 도구로 웹사이트의 Elements를 확인해 보면 쉽게 확인할 수 있어요:

[IMAGE: Rendering a website from kotlinx.html]

kotlinx.html 라이브러리에 대해 더 알아보려면 GitHub Wiki를 확인해 보세요. DOM에 추가하지 않고 요소를 만드는 방법, onClick 같은 이벤트에 바인딩하는 방법, HTML 요소에 CSS 클래스를 적용하는 방법 등에 대한 정보를 찾을 수 있어요.

더 알아보기