Kotlin/JS 실행하기

Kotlin Multiplatform Gradle 플러그인으로 프로젝트를 관리하면, 적절한 태스크를 사용해 프로젝트를 실행할 수 있어요. 빈 프로젝트에서 시작한다면 실행할 샘플 코드가 있는지 확인하세요. src/jsMain/kotlin/App.kt 파일을 만들고 작은 "Hello, World" 스타일 코드 스니펫을 채워 넣어 보세요.

fun main() {
    console.log("Hello, Kotlin/JS!")
}

대상 플랫폼에 따라 코드를 처음 실행하려면 플랫폼 특유의 추가 설정이 필요한 경우도 있어요.

출처: Run Kotlin/JS

본문

Kotlin/JS 프로젝트는 Kotlin Multiplatform Gradle 플러그인으로 관리되므로, 적절한 태스크를 사용해 프로젝트를 실행할 수 있어요. 빈 프로젝트에서 시작한다면 실행할 샘플 코드가 있는지 확인하세요. src/jsMain/kotlin/App.kt 파일을 만들고 작은 "Hello, World" 스타일 코드 스니펫을 채워 넣어 보세요.

fun main() {
    console.log("Hello, Kotlin/JS!")
}

대상 플랫폼에 따라 코드를 처음 실행하려면 플랫폼 특유의 추가 설정이 필요한 경우도 있어요.

Node.js 대상 실행하기

Kotlin/JS에서 Node.js를 대상으로 할 때는 jsNodeDevelopmentRun Gradle 태스크를 실행하면 돼요. 예를 들어 Gradle wrapper를 사용해 커맨드라인에서 다음과 같이 실행할 수 있어요.

./gradlew jsNodeDevelopmentRun

IntelliJ IDEA를 사용한다면 Gradle 도구 창에서 jsNodeDevelopmentRun 액션을 찾을 수 있어요. 처음 시작할 때 kotlin.multiplatform Gradle 플러그인이 필요한 모든 의존성을 다운로드해 실행 환경을 준비해 줘요. 빌드가 끝나면 프로그램이 실행되고 터미널에서 로그 출력을 확인할 수 있어요.

브라우저 대상 실행하기

브라우저를 대상으로 할 때는 프로젝트에 HTML 페이지가 필요해요. 이 페이지는 애플리케이션을 작업하는 동안 개발 서버가 제공하며, 컴파일된 Kotlin/JS 파일을 포함해야 해요. /src/jsMain/resources/index.html HTML 파일을 만들고 채워 넣어 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Client</title>
</head>
<body>
<script src="js-tutorial.js"></script>
</body>
</html>

기본적으로 참조해야 하는 프로젝트의 생성 산출물(webpack을 통해 생성됨) 이름은 프로젝트 이름(이 경우 js-tutorial)이에요. 프로젝트 이름을 followAlong으로 지었다면 js-tutorial.js 대신 followAlong.js를 삽입해야 해요.

이 조정을 마친 뒤 통합 개발 서버를 시작하세요. Gradle wrapper를 사용해 커맨드라인에서 다음과 같이 시작할 수 있어요.

./gradlew jsBrowserDevelopmentRun

IntelliJ IDEA에서 작업할 때는 Gradle 도구 창에서 jsBrowserDevelopmentRun 액션을 찾을 수 있어요.

프로젝트가 빌드되면 임베디드된 webpack-dev-server가 실행되며, 앞서 지정한 HTML 파일을 가리키는 (겉보기에 비어 보이는) 브라우저 창이 열려요. 프로그램이 제대로 실행되는지 확인하려면 브라우저의 개발자 도구를 여세요(예: 마우스 오른쪽 클릭 후 Inspect 선택). 개발자 도구 안에서 콘솔로 이동하면 실행된 JavaScript 코드의 결과를 볼 수 있어요.

이렇게 설정하면 코드를 변경할 때마다 프로젝트를 다시 컴파일해 변경 사항을 확인할 수 있어요. Kotlin/JS는 개발 중 애플리케이션을 자동으로 다시 빌드하는 더 편리한 방식도 지원해요. 이 연속(continuous) 모드를 설정하는 방법은 해당 튜토리얼에서 확인할 수 있어요.

Kotlin/JS 실행하기