브라우저와 DOM API

kotlinx-browser 라이브러리를 쓰면 브라우저 특화 기능에 접근할 수 있어요. 여기에는 document나 window 같은 공통 최상위 객체가 포함되어 있고, 가능한 경우 그 기능에 대한 타입 안전(type-safe)한 래퍼도 제공돼요.

코틀린 타입 시스템에 잘 맞지 않는 함수들에 접근할 수 있게 해주는 폴백으로 dynamic 타입도 제공해요.

브라우저와 DOM API를 쓰려면 프로젝트의 build.gradle(.kts) 파일에 kotlinx-browser 라이브러리를 의존성으로 추가하면 돼요.

repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.5.0")
            }
        }
    }
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        browser()
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation 'org.jetbrains.kotlinx:kotlinx-browser:0.5.0'
            }
        }
    }
}

출처: Browser and DOM API

본문

DOM과의 상호작용

Document Object Model(DOM)과 상호작용할 때는 document 변수를 쓸 수 있어요. 예를 들어 이 객체를 통해 우리 웹사이트의 배경색을 설정할 수 있죠.

document.bgColor = "FFAA12"

document 객체는 ID, 이름, 클래스 이름, 태그 이름 등으로 특정 요소를 가져오는 방법도 제공해요. 반환되는 모든 요소는 Element? 타입이에요. 그 속성에 접근하려면 요소를 적절한 타입으로 캐스팅해야 해요. 예를 들어 이메일 <input> 필드가 있는 HTML 페이지가 있다고 해 볼게요.

<body>
    <input type="text" name="email" id="email"/>

    <script type="text/javascript" src="tutorial.js"></script>
</body>

스크립트가 body 태그의 맨 아래에 포함되어 있다는 점에 주목해 주세요. 이렇게 해야 스크립트가 로드되기 전에 DOM이 완전히 준비돼 있어요.

이렇게 구성하면 DOM 요소에 접근할 수 있어요. input 필드의 속성에 접근하려면 getElementById를 호출하고 그 결과를 HTMLInputElement로 캐스팅하면 돼요. 그러면 value 같은 속성에 안전하게 접근할 수 있어요.

val email = document.getElementById("email") as HTMLInputElement
email.value = "[email protected]"

이 input 요소를 참조하는 것처럼, 페이지의 다른 요소들도 적절한 타입으로 캐스팅해서 접근할 수 있어요.

더 알아보기

DOM에서 요소를 간결하게 만들고 구조화하는 법은 Typesafe HTML DSL을 확인해 보세요.