[깡샘의 코틀린 프로그래밍] 정리 26 - kotlinx-html-js

본 글은 [깡샘의 코틀린 프로그래밍 - 루비페이퍼] 의 내용을 발췌한 것입니다.

좀더 자세한 내용은 책을 통해 확인해 주세요.

 

 

 

26장. 코틀린으로 자바스크립트 웹 어플리케이션 개발

 

26.2.1. kotlinx-html-js 라이브러리 소개

 

앞에서 코틀린으로 DOM Node를 핸들링하는 방법을 살펴보았습니다. HTML 문서에 있는 태그 객체를 획득하거나 코틀린 코드로 동적으로 HTML 태그를 만드는 방법을 살펴보았는데, 사실 코틀린 코드로 작성했다는 것 말고는 자바스크립트 코드와 거의 차이가 없습니다. 이는 코틀린에서 이용하는 document 객체 등이 external로 선언되어 자바스크립트 객체를 그대로 활용하기 때문입니다.

 

물론, 코틀린에서 자바스크립트 API를 그대로 활용한다고 하더라도 코틀린의 문법이 자바스크립트보다 더 엄격하므로 좀 더 정교한 프로그램을 작성할 수 있고 코틀린의 다양한 기법(객체지향, 람다 등)을 이용하여 조금 더 쉽게 프로그램을 작성할 수 있습니다. 그런데 그렇다 하더라도 코틀린에서 동적으로 HTML을 만드는 방법은 그리 효율적이지 못한 것 같습니다.

 

효율적이라는 말은 상대적이어서 사람에 따라 다르게 생각할 수도 있지만 최근 자바스크립트에서 인기있는 라이브러리(Angular, React 같은 – 물론 이 라이브러리를 몰라도 상관없습니다)를 보면 자바스크립트에서 HTML 태그를 동적으로 만들어 주는 편한 방법을 제공합니다. 그런 라이브러리의 주목적이 HTML 태그의 동적 생성만을 목적으로 하지는 않지만, 얼마나 쉽게 HTML 태그를 자바스크립트에서 만들 수 있느냐가 라이브러리를 인기 끌게 하는 주요인 중 하나입니다.

 

위에서 살펴본 코틀린의 document.createElement를 이용하는 방법은 자바스크립트 원론적인 방법을 이용하는 것이고, kotlinx-html-js를 통해 코틀린에서도 조금 더 쉽게 HTML 태그를 코틀린 코드에서 만들 수 있는 방법을 제공합니다.

 

kotlinx-html-js 라이브러리는 kotlinx.html 라이브러리의 한 종류로 kotlinx.html 라이브러리는 kotlinx-html-js와 kotlinx-html-jvm으로 구분됩니다. kotlinx-html-js는 클라이언트 측 자바스크립트에서의 동적 HTML 생성을 목적으로 하며 kotlinx-html-jvm은 서버 측 자바 프로그램에서

동적 HTML 생성을 주목적으로 합니다. 이곳에서는 kotlinx-html-js 라이브러리를 살펴보겠습니다.

 

kotlinx.html 라이브러리의 홈페이지는 https://github.com/kotlin/kotlinx.html입니다. kotlinx-html-js 라이브러리를 이용하려면 별도의 의존성(dependency) 설정을 해주어야 합니다. 개발환경이 maven인 경우에는 pom.xml 파일에 다음처럼 등록해야 합니다.

 

01 <dependency>

02 <groupId>org.jetbrains.kotlinx</groupId>

03 <artifactId>kotlinx-html-js</artifactId>

04 <version>${kotlinx.html.version}</version>

05 </dependency>

 

다음은 gradle에서의 환경설정입니다.

 

01 repositories {

02 mavenCentral()

03 maven {

04 url "http://dl.bintray.com/kotlin/kotlinx.html/"

05 }

06 }

07

08 dependencies {

09 compile 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.3'

10 //…

11 }

 

라이브러리 버전은 개발 시점에 다를 수 있으며 필자가 책을 집필하는 시점의 최신 버전은 0.6.3버전입니다.