KotlinJS로 시작하는 모던 웹 프론트엔드 개발

Kotlin은 원래 JVM을 위한 언어로 탄생했습니다. 하지만 프로그래밍 언어의 성장과 함께 다양한 플랫폼에서의 개발 요구가 높아지면서 JetBrains는 Kotlin의 활용 범위를 확장하고자 했습니다. 그 중 하나가 웹 프론트엔드 영역이었습니다.

JavaScript는 웹에서 가장 널리 사용되는 언어입니다. 하지만 JavaScript의 동적 타이핑, 기본 상속 구조 등 여러 가지 문제점으로 인해 대안이 필요한 상황이 생겼습니다. 이런 배경 속에서 Kotlin/JS는 안정성, 정적 타이핑, 모던한 언어 구조 등 Kotlin의 강점을 웹 프론트엔드 개발에 가져오려는 목적으로 탄생하였습니다.

주요 특징 및 장점

정적 타이핑: Kotlin은 정적 타이핑 언어입니다. 이를 통해 컴파일 시점에서 많은 오류를 잡아낼 수 있습니다. Kotlin/JS는 이러한 장점을 웹 프론트엔드 개발에도 가져옵니다.
상호 운용성: Kotlin/JS는 기존의 JavaScript 코드나 라이브러리와의 상호 운용성이 뛰어납니다. 이를 통해 현재 JavaScript로 작성된 프로젝트에 Kotlin/JS를 점진적으로 도입하는 것이 가능합니다.
모던한 언어 구조: Kotlin의 확장 함수, 데이터 클래스, 코루틴 등 다양한 모던 언어 기능을 웹 프론트엔드 개발에 활용할 수 있습니다.
다중 플랫폼 지원: Kotlin/JS는 Kotlin Multiplatform의 일부로, 한 코드베이스로 여러 플랫폼을 대상으로 개발하는 것이 가능합니다.

이처럼 Kotlin/JS는 웹 프론트엔드 개발의 새로운 패러다임을 제시하며, 기존 JavaScript의 문제점을 극복하면서도 그 장점을 최대한 살린 개발 환경을 제공합니다.

환경 설정 및 프로젝트 시작하기

필요한 도구 및 SDK 설치하기

Kotlin/JS 프로젝트를 시작하기 전에 몇 가지 필수 도구와 SDK가 필요합니다.

IntelliJ IDEA: JetBrains에서 제공하는 IntelliJ IDEA는 Kotlin/JS 개발에 필수적인 IDE입니다. Community 버전도 Kotlin/JS를 지원하니 공식 사이트에서 다운로드하실 수 있습니다.
Kotlin SDK: Kotlin/JS 개발에는 Kotlin SDK가 필요합니다. IntelliJ IDEA를 설치한 후, SDK를 자동으로 다운로드 받을 수 있습니다.
Node.js와 npm: Kotlin/JS 프로젝트는 Node.js 환경에서 동작합니다. 따라서, Node.js 공식 사이트에서 LTS 버전을 다운로드하시기 바랍니다. npm은 Node.js와 함께 자동으로 설치됩니다.

설치가 완료되었다면 터미널 혹은 명령 프롬프트에서 node -v 및 npm -v 명령어로 설치가 잘 되었는지 확인할 수 있습니다.

첫 Kotlin/JS 프로젝트 설정

IntelliJ IDEA에서 새 프로젝트 생성: IntelliJ IDEA를 시작한 후, ‘Create New Project’를 선택합니다. 여기에서 ‘Kotlin’을 선택하고, ‘JS for Browser’를 타겟 플랫폼으로 설정합니다.
프로젝트 설정: 프로젝트 명, 위치, 버전 등을 설정한 후, ‘Finish’를 클릭합니다. IntelliJ IDEA는 자동으로 Kotlin/JS 프로젝트를 구성합니다.
프로젝트 구조 확인: 프로젝트를 생성한 후, 기본적인 디렉토리와 파일들을 확인할 수 있습니다. src/main/kotlin에는 Kotlin 코드가 위치하며, src/main/resources에는 HTML, CSS, JS 등의 리소스 파일이 위치합니다.
Hello, Kotlin/JS!: 기본적인 구조를 이해한 후, 간단한 코드를 작성해 봅니다. 예를 들면, main.kt 파일에 다음과 같은 코드를 작성하여 웹 페이지에 메시지를 출력할 수 있습니다.

fun main() {
    println("Hello, Kotlin/JS!")
}

실행 및 빌드: 작성된 코드를 실행하려면, IntelliJ IDEA의 빌드 및 실행 버튼을 사용하면 됩니다. 빌드가 성공적으로 완료되면, 웹 브라우저에서 실행 결과를 확인할 수 있습니다.

KotlinJS 기본 구성요소

Kotlin/JS에서의 변수, 함수, 클래스

Kotlin/JS는 Kotlin을 기반으로 하기 때문에, 기본적인 구성요소도 Kotlin과 동일합니다. 그러나 JS 플랫폼에 특화된 특징들이 있습니다.

변수:
Kotlin의 val (읽기 전용)과 var (가변) 키워드를 사용하여 변수를 선언합니다.

val immutableVariable: String = "Kotlin/JS"
var mutableVariable: Int = 10

함수:
Kotlin의 함수 선언 방식을 그대로 따릅니다. 단, 웹 브라우저의 콘솔에 로그를 출력하려면 Kotlin의 println 대신 JS의 console.log를 사용할 수 있습니다.

fun greet(name: String): String {
    console.log("Hello, $name!")
    return "Greeted $name"
}

클래스:
Kotlin/JS에서도 클래스를 정의하고 객체를 생성하는 방식은 Kotlin과 동일합니다.

class Person(val name: String, var age: Int) {
    fun introduce() {
        console.log("I am $name and I am $age years old.")
    }
}

val person = Person("John", 25)
person.introduce()

Kotlin/JS의 표준 라이브러리 활용하기

Kotlin/JS는 Kotlin의 풍부한 표준 라이브러리를 지원합니다. 이로 인해, 다양한 문자열 처리, 컬렉션 연산, 시퀀스 및 다른 기능들을 쉽게 활용할 수 있습니다.

문자열 처리:
Kotlin의 표준 라이브러리를 활용하여 문자열 연산을 쉽게 수행할 수 있습니다.

val text = "KotlinJS is awesome"
val upperCaseText = text.toUpperCase()
console.log(upperCaseText)  // Outputs: KOTLINJS IS AWESOME

컬렉션 연산:
List, Set, Map 등의 컬렉션과 관련된 다양한 연산을 사용할 수 있습니다.

val numbers = listOf(1, 2, 3, 4, 5)
val squaredNumbers = numbers.map { it * it }
console.log(squaredNumbers)  // Outputs: [1, 4, 9, 16, 25]

기타 표준 라이브러리 기능:
날짜 및 시간 처리, 정규 표현식 등 Kotlin의 표준 라이브러리는 다양한 기능을 제공하므로, 해당 문서를 참조하여 Kotlin/JS에서도 해당 기능들을 활용할 수 있습니다.

DOM 조작과 이벤트 처리

웹 요소 선택 및 변경

Kotlin/JS에서 DOM 요소를 조작하기 위해서는 기본적으로 JavaScript와 비슷한 방식으로 접근할 수 있습니다. 그러나 Kotlin의 강력한 타입 시스템 덕분에, 보다 안전하게 웹 요소를 조작할 수 있습니다.

요소 선택:

val titleElement = document.getElementById("title") as? HTMLHeadingElement

위 예제에서는 document.getElementById 메서드를 사용하여 요소를 선택하였고, 선택한 요소를 HTMLHeadingElement로 타입 캐스팅하였습니다. 만약 해당 요소가 존재하지 않는다면 titleElement는 null이 될 것입니다.

요소 변경:

titleElement?.innerText = "새로운 제목"

여기서는 선택한 titleElement의 내부 텍스트를 변경하였습니다.

이벤트 리스너 등록 및 처리

이벤트 리스너를 등록하여 특정 DOM 이벤트에 반응하는 것도 간단합니다.

val button = document.getElementById("myButton") as? HTMLButtonElement
button?.addEventListener("click", {
    console.log("버튼 클릭됨!")
})

위 코드에서는 “myButton”이라는 ID를 가진 버튼에 클릭 이벤트 리스너를 추가하였습니다. 버튼이 클릭될 때마다 콘솔에 메시지가 출력됩니다.

또한, Kotlin/JS에서는 람다를 활용하여 이벤트 핸들러를 깔끔하게 작성할 수 있습니다. 예를 들어, 버튼 클릭 시 입력된 텍스트 값을 가져와 콘솔에 출력하는 코드는 다음과 같습니다.

val inputElement = document.getElementById("myInput") as? HTMLInputElement
button?.addEventListener("click", {
    val inputValue = inputElement?.value ?: "빈 값"
    console.log(inputValue)
})

KotlinJS에서 외부 JS 라이브러리 활용하기

Kotlin/JS에서 JS 라이브러리 포함시키는 방법

Kotlin/JS는 외부 JavaScript 라이브러리와의 통합이 원활하게 이루어질 수 있도록 다양한 기능을 제공합니다.

npm 모듈로 라이브러리 설치: 대부분의 JavaScript 라이브러리는 npm을 통해 관리되며, Kotlin/JS 프로젝트에서도 npm 패키지를 설치하여 사용할 수 있습니다.

npm install [라이브러리명]

Kotlin/JS 프로젝트에 라이브러리 추가: build.gradle.kts 혹은 build.gradle 파일에서 의존성을 추가합니다.

kotlin {
    js {
        browser {
            webpack {
                // ... 
                resolve {
                    modules += kotlinNodeModules
                }
            }
        }
    }
    // ...
    dependencies {
        implementation(npm("[라이브러리명]", "[버전]"))
    }
}

타입 안전하게 라이브러리 사용하기

JavaScript 라이브러리를 Kotlin/JS에서 사용하려면, 해당 라이브러리의 API에 대한 Kotlin 타입 정의가 필요할 수 있습니다. 이를 위해 @JsModule 및 external 키워드를 활용하여 타입 정의를 할 수 있습니다.

예를 들어, 외부 라이브러리의 함수를 Kotlin에서 사용하려면 다음과 같이 정의할 수 있습니다:

@JsModule("[라이브러리명]")
external fun 라이브러리함수명(매개변수: 타입): 반환타입

실제 사용 예:

@JsModule("lodash")
external fun shuffle(array: Array<Int>): Array<Int>

이렇게 정의된 함수는 Kotlin 코드 내에서 일반 함수처럼 사용할 수 있습니다. 그리고 위 예시와 같이 lodash 라이브러리의 shuffle 함수를 사용하여 배열을 섞는 작업을 수행할 수 있습니다.

또한, Kotlin/JS에서는 DefinitelyTyped와 같은 저장소에서 제공하는 TypeScript 타입 정의를 활용하여 Kotlin 타입으로 변환하는 도구도 제공되기 때문에, 대부분의 주요 JavaScript 라이브러리에 대해 쉽게 타입 정의를 가져와 사용할 수 있습니다.

이렇게 Kotlin/JS를 통해 외부 JavaScript 라이브러리를 쉽게 통합하면서, Kotlin의 강력한 타입 시스템을 활용하여 안전하게 코드를 작성할 수 있습니다.

비동기 처리와 코루틴

비동기 패턴 소개

웹 프론트엔드 환경에서는 다양한 이유로 비동기 처리가 필수적입니다. 사용자의 입력 처리, 네트워크 요청, 타이머와 같은 작업들은 프로그램의 메인 스레드를 차단하지 않고 수행되어야 합니다. JavaScript에서는 이를 위해 주로 콜백(callback), 프로미스(Promise), async/await와 같은 비동기 패턴들을 사용합니다.

콜백 (Callback)
콜백은 함수를 다른 함수의 매개변수로 전달하여, 어떤 작업이 완료된 후 해당 함수를 실행하는 패턴입니다.

프로미스 (Promise)
프로미스는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 객체입니다. 이를 통해 콜백의 단점을 극복하고, 체인화된 비동기 작업을 더 간결하게 표현할 수 있습니다.

async/await
async/await는 비동기 코드를 마치 동기 코드처럼 간결하게 작성할 수 있게 하는 문법적인 설탕입니다. 이는 내부적으로 프로미스를 기반으로 작동합니다.

Kotlin/JS에서 코루틴 활용하기

Kotlin에서는 비동기 작업을 처리하는 더 강력하고 유연한 방법으로 코루틴(coroutines)을 제공합니다. 코루틴은 비동기 코드를 마치 동기적인 코드처럼 순차적으로 작성할 수 있게 해주면서, 콜백 지옥과 같은 문제를 피할 수 있습니다.

Kotlin/JS에서도 코루틴 라이브러리를 활용하여 비동기 작업을 수행할 수 있습니다.

코루틴 라이브러리 추가
먼저, 프로젝트에 코루틴 라이브러리를 추가해야 합니다.

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation(kotlin("coroutines-core-js"))
}

코루틴 사용 예제

import kotlinx.coroutines.*

fun main() {
    GlobalScope.launch { // 새로운 코루틴을 백그라운드에서 시작
        delay(1000L) // 1초 대기
        println("World!")
    }
    println("Hello,") // 코루틴이 대기 중일 때 메인 스레드는 계속 진행됩니다.
    Thread.sleep(2000L) // 메인 스레드가 JVM에서 종료되지 않게 2초 동안 대기
}

이 예제에서 launch는 코루틴을 시작하는 가장 간단한 방법입니다. delay 함수는 현재 코루틴을 지정된 시간 동안 대기하게 만듭니다.

Kotlin/JS에서의 코루틴은 이와 같이 간단하게 비동기 작업을 수행할 수 있게 도와주며, 콜백이나 프로미스보다 코드가 간결하고 가독성이 좋습니다.

실전 예제: 간단한 To-Do 리스트 앱 만들기

프로젝트 구조 및 준비

1. 프로젝트 생성
Kotlin/JS 프로젝트를 생성하기 위해 적절한 템플릿 또는 도구를 사용하십시오.

2. 필요한 라이브러리 추가
기본적인 UI 라이브러리나 DOM 조작을 위한 라이브러리, 코루틴 라이브러리 등 필요한 라이브러리를 추가하십시오.

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation(kotlin("coroutines-core-js"))
    // 다른 필요한 라이브러리
}

3. 기본 HTML 구조 설정
간단한 index.html 파일을 생성하여 To-Do 리스트 앱의 기본 구조를 준비하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h2>To-Do List</h2>
        <input type="text" id="newTask" placeholder="Enter a new task">
        <button id="addTask">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script src="main.bundle.js"></script>
</body>
</html>

기능 구현 (항목 추가, 삭제, 수정 등)

1. 항목 추가 기능

fun main() {
    val input = document.getElementById("newTask") as HTMLInputElement
    val button = document.getElementById("addTask") as HTMLButtonElement
    val taskList = document.getElementById("taskList") as HTMLUListElement

    button.addEventListener("click", {
        val taskValue = input.value
        if (taskValue.isNotBlank()) {
            val listItem = document.createElement("li") as HTMLLIElement
            listItem.textContent = taskValue
            taskList.appendChild(listItem)
            input.value = ""  // Clear the input field
        }
    })
}

2. 항목 삭제 기능

위의 코드에서 각 항목에 마우스 오른쪽 버튼 클릭 또는 특정 버튼 클릭을 통해 삭제할 수 있는 이벤트를 추가하십시오.

listItem.addEventListener("contextmenu", { event ->
    event.preventDefault()
    taskList.removeChild(listItem)
})

3. 항목 수정 기능

리스트 항목을 더블 클릭할 때 입력 필드가 나타나 수정할 수 있게 만듭니다.

listItem.addEventListener("dblclick", {
    val newInput = document.createElement("input") as HTMLInputElement
    newInput.value = listItem.textContent ?: ""
    listItem.textContent = ""
    listItem.appendChild(newInput)
    newInput.focus()

    newInput.addEventListener("blur", {
        listItem.textContent = newInput.value
    })
})

이와 같이 Kotlin/JS를 활용하면 웹 앱의 주요 기능을 간단하게 구현할 수 있습니다. 본 예제는 가장 기본적인 To-Do 리스트 앱을 만드는 방법을 보여줍니다. 필요에 따라 추가적인 스타일, 기능, 최적화를 적용하여 풍부한 웹 앱을 만들 수 있습니다.

KotlinJS 프로젝트 배포하기

빌드 및 최적화 팁

1. 빌드 설정 확인

KotlinJS 프로젝트는 Gradle을 통해 빌드됩니다. build.gradle.kts 파일에서 kotlin.js 섹션을 확인하며, production용 빌드 설정이 잘 되어 있는지 점검합니다.

kotlin {
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
            }
            webpackTask {
                mode = org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig.Mode.PRODUCTION
            }
        }
    }
}

2. Dead Code Elimination 활용

KotlinJS는 Dead Code Elimination (DCE) 기능을 제공하여 사용하지 않는 코드를 제거하고 최적화할 수 있습니다. DCE를 활용하면 앱의 크기를 줄이고 로딩 속도를 향상시킬 수 있습니다.

3. 소스맵 설정

소스맵을 활용하면 디버깅이 용이합니다. 하지만, 배포 시에는 소스맵을 비활성화하여 파일 크기를 줄일 수 있습니다.

호스팅 및 배포 방법

1. 정적 호스팅 서비스 사용

KotlinJS로 빌드된 웹 앱은 정적 파일들로 구성되므로, GitHub Pages, Netlify, Vercel 등의 정적 호스팅 서비스를 이용하여 손쉽게 배포할 수 있습니다.

2. CDN 활용

Content Delivery Network (CDN)을 활용하여 전 세계의 사용자에게 빠른 속도로 콘텐츠를 제공할 수 있습니다.

3. HTTPS 적용

보안을 위해 SSL 인증서를 적용하고 HTTPS로 앱을 제공하십시오. Let’s Encrypt와 같은 무료 인증 기관을 통해 인증서를 발급받을 수 있습니다.

4. 도메인 연결

개인 도메인을 구입하여 프로젝트에 연결하면, 프로젝트의 가독성과 신뢰도를 높일 수 있습니다.

KotlinJS의 한계와 대안

KotlinJS의 장점 및 단점

1. 장점

언어 일관성: Kotlin으로 Android, Backend 그리고 웹 프론트엔드까지 모두 개발할 수 있습니다. 이로 인해 개발팀의 학습 곡선이 줄어들고, 코드 재사용성이 증가합니다.
현대적인 언어 기능: Kotlin의 강력한 언어 기능, 예를 들면 확장 함수, 데이터 클래스, 코루틴 등을 웹 개발에 활용할 수 있습니다.
강력한 표준 라이브러리: Kotlin의 표준 라이브러리를 그대로 웹에서 사용할 수 있어, 많은 기능을 쉽게 구현할 수 있습니다.

2. 단점

커뮤니티와 리소스: JavaScript나 TypeScript에 비해 KotlinJS의 커뮤니티와 리소스가 상대적으로 적습니다. 이로 인해 문제 해결에 어려움을 겪을 수 있습니다.
파일 크기: KotlinJS로 빌드된 결과물은 때때로 크기가 큰 편입니다. 이로 인해 초기 로딩 시간이 늘어날 수 있습니다.
외부 라이브러리 호환성: 모든 JavaScript 라이브러리가 KotlinJS와 잘 호환되지 않을 수 있습니다.

웹 개발에 적합한 상황 및 대안

1. 적합한 상황

다중 플랫폼 프로젝트: Android와 웹을 동시에 개발해야 하는 경우, Kotlin을 활용하여 코드를 재사용하는 것이 효과적입니다.
Kotlin 기반의 백엔드: 백엔드도 Kotlin으로 개발되어 있다면, 프론트엔드와 백엔드 간의 타입 안정성과 코드 재사용성이 향상됩니다.

2. 대안

TypeScript: JavaScript의 상위 집합으로, 타입 안정성을 제공하면서도 JS의 생태계와 완벽히 호환됩니다.
React or Vue with TypeScript: 웹 프론트엔드 프레임워크와 TypeScript의 조합은 현대 웹 개발의 표준으로 자리잡고 있습니다.
Blazor: C#과 WebAssembly를 사용하여 웹 애플리케이션을 개발하는 새로운 접근법입니다.

마무리 및 추가 리소스

KotlinJS 학습을 위한 추천 자료

KotlinJS 공식 문서: KotlinJS에 대한 모든 기본적인 내용과 고급 주제를 다루고 있으며, 가장 신뢰할 수 있는 자료입니다.
Kotlin for JavaScript tutorials: 여러 가지 실제 예제를 통해 KotlinJS를 학습할 수 있는 공식 튜토리얼입니다.
Udemy, Coursera, Pluralsight: 여러 온라인 학습 플랫폼에서 KotlinJS에 관한 강의들을 찾을 수 있습니다. 특히, Udemy의 경우 종종 할인 프로모션을 제공하므로 저렴한 가격에 퀄리티 있는 강의를 수강할 수 있습니다.
KotlinJS GitHub Repository: 직접 KotlinJS의 소스코드를 확인하거나, 커뮤니티와의 상호 작용을 위한 좋은 장소입니다.

커뮤니티 및 포럼 소개

Kotlin Forums: Kotlin 관련 다양한 주제를 토론하거나 문제를 해결하는데 좋은 곳입니다. 특히 KotlinJS 카테고리에서 JS 관련 토론을 찾아볼 수 있습니다.
Kotlin Slack: 전 세계의 Kotlin 개발자들과 실시간으로 대화하며, 정보를 공유하거나 질문을 할 수 있는 플랫폼입니다. 여기에는 KotlinJS에 특화된 채널도 있습니다.
Reddit – r/Kotlin: Kotlin에 관련된 뉴스, 자료, 질문 등을 공유하는 커뮤니티입니다. 여기서도 KotlinJS 관련 정보나 토론을 찾을 수 있습니다.

KotlinJS는 웹 프론트엔드 개발에 새로운 방향을 제시하고 있습니다. 이 포스팅을 통해 KotlinJS에 대한 기본적인 이해를 얻었기를 바랍니다. 추가적인 질문이나 궁금증이 생기면 위의 커뮤니티와 포럼을 통해 다양한 정보와 도움을 받을 수 있습니다. 항상 성장하는 개발자가 되기를 바랍니다!