Kotlin/JS — 개요, JavaScript 컴파일러 및 특징

Kotlin/JS란 무엇인가?

Kotlin/JS는 Kotlin 컴파일러의 세 가지 백엔드 중 하나입니다(JVM 및 Native와 함께). Kotlin 코드를 JavaScript로 변환하도록 설계되었습니다. JetBrains에서 개발한 Kotlin/JS는 외부 선언을 통해 JavaScript 라이브러리의 광대한 생태계에 대한 액세스를 유지하면서 엄격한 정적 타이핑 언어로 웹 애플리케이션을 작성할 수 있게 해줍니다. Kotlin 1.3의 첫 번째 안정적인 릴리스 이후, 컴파일러는 실험적 백엔드에서 산업 프로젝트에서 사용되는 프로덕션 준비 도구로 진화했습니다.

Kotlin/JS의 주요 목적은 JavaScript나 TypeScript 대신 Kotlin을 사용한 프론트엔드 개발입니다. 개발자는 Kotlin 언어의 모든 기능(null 안전성, 확장 함수, 데이터 클래스, 코루틴, sealed 클래스)을 얻을 수 있습니다. 생성된 JavaScript 코드는 모든 최신 브라우저 또는 Node.js 환경에서 실행될 수 있습니다. Kotlin/JS는 공유 모듈(commonMain)이 모바일 및 웹 애플리케이션 모두에서 사용 가능한 Kotlin Multiplatform 프로젝트에서 특히 가치가 있습니다.

Kotlin/JS 생태계에는 사용자 인터페이스 구축을 위한 프레임워크가 포함됩니다. 웹용 Compose Multiplatform은 대상 백엔드로 Kotlin/JS를 사용하여 브라우저에서 실행되는 선언형 UI 컴포넌트를 생성할 수 있습니다. 대체 솔루션으로는 React용 래퍼인 Kotlin Wrappers가 있으며, React, React Router 및 Redux를 위한 타입 안전 API를 제공합니다.

Kotlin/JS 컴파일러 작동 방식

컴파일은 Kotlin/JS에서 여러 변환 단계를 거칩니다. 소스 Kotlin 코드는 먼저 중간 표현(IR)으로 컴파일된 다음 최적화되고 마지막으로 JavaScript 코드가 생성됩니다. Kotlin 1.8부터 이전 백엔드(AST 기반 JsBackend)는 완전히 IR 백엔드로 대체되어 더 나은 최적화, 더 작은 출력 코드 크기 및 TypeScript 호환성을 제공합니다.

이전에 Kotlin/JS는 AST(추상 구문 트리)에서 직접 작동하는 JsBackend를 사용했습니다. 이 접근 방식에는 한계가 있었습니다: 플랫폼 최적화 지원의 어려움, 모든 백엔드에 대한 통합 IR 부재, TypeScript 선언 생성 불가능 등이 있습니다. IR 백엔드로의 전환은 이러한 문제를 해결하여 세 가지 Kotlin 백엔드 전체에서 컴파일을 통합하고 백엔드 간 최적화의 길을 열었습니다.

Kotlin/JS 컴파일 모드

Kotlin/JS는 출력 코드의 형식과 최적화를 결정하는 두 가지 빌드 모드를 지원합니다. 프로덕션 모드는 번들링, 축소 및 트리 쉐이킹에 Webpack을 사용합니다. 개발 모드는 빠른 개발 반복을 위해 Hot Module Replacement를 지원합니다. 모드 선택은 js.target 구성을 통해 build.gradle.kts에서 설정됩니다.

kotlin {
    js {
        browser {
            webpackTask {
                outputFileName = "app.js"
            }
        }
        binaries.executable()
    }
}

NPM 및 JavaScript 라이브러리와의 통합

Kotlin/JS와 NPM 생태계의 통합은 build.gradle.kts의 특수 DSL을 통해 구현됩니다. 개발자는 kotlin 구성에서 npm 종속성을 선언하고 패키지 이름과 버전을 지정합니다. Kotlin/JS는 npm 또는 yarn 패키지 관리자를 통해 자동으로 패키지를 가져옵니다. JavaScript 라이브러리에 대한 타입 안전 액세스를 보장하기 위해 Kotlin 컴파일러에 라이브러리 유형과 함수를 설명하는 외부 선언이 사용됩니다.

외부 선언은 external 키워드로 표시된 Kotlin 선언입니다. 이들은 함수나 클래스의 구현이 Kotlin이 아닌 JavaScript 코드에 있음을 컴파일러에 알립니다. JetBrains는 Kotlin Wrappers의 일부로 인기 있는 라이브러리를 위한 기성 래퍼 세트를 제공합니다. 여기에는 React, React Router, Redux, Emotion 및 MUI가 포함됩니다. 기성 래퍼가 없는 라이브러리의 경우 개발자가 수동으로 외부 선언을 작성하거나 Dukat TypeScript 바인딩 생성기를 사용할 수 있습니다.

kotlin {
    js {
        browser { }
        npm {
            dependency("react", "18.3.1")
            dependency("react-dom", "18.3.1")
            devDependency("webpack", "5.92.0")
        }
    }
}

// JavaScript 라이브러리를 위한 외부 선언
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

TypeScript 호환성 활용

TypeScript는 현대 웹의 필수적인 부분이며 Kotlin/JS는 .d.ts 파일 생성을 통해 TypeScript와의 호환성을 보장합니다. js.generateTsDeclarations = true로 설정하면 컴파일러가 모든 공개 Kotlin 함수 및 클래스에 대한 TypeScript 선언을 만듭니다. 이를 통해 TypeScript 프로젝트는 완전한 타입 지원으로 Kotlin 모듈을 가져올 수 있습니다. TypeScript 선언 생성은 IR 백엔드에서만 작동하며 이전 백엔드에서 마이그레이션하는 주요 이유 중 하나입니다.

Kotlin/JS IR 백엔드 및 장점

IR 백엔드(Intermediate Representation)는 세 가지 Kotlin 플랫폼(JVM, JS, Native)을 위한 통합 백엔드입니다. 대상 코드를 생성하기 전에 여러 최적화 단계를 거치는 공통 중간 표현을 사용합니다. Kotlin/JS의 경우 IR 백엔드는 Kotlin 1.8.0부터 필수가 되었으며, 더 이상 사용되지 않음(deprecated)으로 표시된 이전 AST 기반 백엔드를 대체했습니다.

Kotlin/JS용 IR 백엔드의 장점에는 IR 수준에서의 향상된 코드 최적화, 데드 코드 제거 및 인라인 최적화를 통한 번들 크기 감소, TypeScript 선언 지원이 포함됩니다. IR 백엔드는 또한 JavaScript로 변환 시 인라인 함수, reified 제네릭 및 suspend 함수의 올바른 처리를 보장하며, 이는 이전 백엔드에서 문제가 있었습니다.

코드 예제: 설정 및 개발

완전한 Kotlin/JS 프로젝트는 build.gradle.kts 구성으로 시작됩니다. kotlin multiplatform 플러그인을 사용하면 Kotlin/JS를 대상 플랫폼 중 하나로 설정할 수 있습니다. React를 사용한 웹 애플리케이션 설정 예제를 살펴보겠습니다.

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.kotlin-wrappers") version "1.0.0-pre.775"
}

kotlin {
    js {
        browser { }
        binaries.executable()
        generateTsDeclarations = true
    }
}

dependencies {
    implementation(enwraps(react, reactDom))
}

구성 후 Kotlin에서 React 컴포넌트를 작성할 수 있습니다. Kotlin Wrappers는 함수형 컴포넌트, 훅 및 DSL 빌더를 통한 JSX 유사 구문을 포함하여 React용 타입 안전 API를 제공합니다. Counter 컴포넌트 예제는 useState 및 이벤트 핸들러 작업을 보여줍니다.

@OptIn(ExperimentalWrapperApi::class)
val Counter = FC<Props> {
    var count = useState(0)

    div {
        +"Counter value: ${count.component1()}"
        button {
            onClick = { count.component2()(count.component1() + 1) }
            +"Increment"
        }
    }
}

fun main() {
    createRoot(document.getElementById("root")!!).render(
        createElement(Counter)
    )
}

빌드 및 배포

Kotlin/JS 프로젝트의 빌드는 Gradle 작업을 통해 수행됩니다. jsDevelopmentRun은 개발을 위해 HMR이 포함된 Webpack 개발 서버를 시작합니다. jsProductionExecutableCompileSync는 축소 및 트리 쉐이킹이 적용된 프로덕션 번들을 생성합니다. 컴파일된 JavaScript를 포함하는 최종 HTML 파일은 webpack 플러그인에 의해 생성되어 build/dist에 배치됩니다.

// HMR로 개발 서버 시작
./gradlew jsDevelopmentRun

// 축소를 포함한 프로덕션 빌드
./gradlew jsProductionExecutableCompileSync

// build/dist/productionExecutable/에 출력

Kotlin/JS vs TypeScript: 비교

TypeScript는 타입이 지정된 JavaScript 분야에서 Kotlin/JS의 주요 경쟁자입니다. 두 언어 모두 JavaScript로 컴파일되며 동적 JS 위에 정적 타이핑을 추가합니다. 그러나 Kotlin/JS는 몇 가지 장점을 제공합니다: 기본 null 안전성, sealed 클래스, 코루틴 및 Kotlin Multiplatform과의 원활한 통합입니다. 반면 TypeScript는 더 큰 커뮤니티, 타입이 있는 더 많은 기성 라이브러리 및 더 성숙한 생태계를 가지고 있습니다.

Kotlin/JS의 개발 생산성은 프로젝트의 다른 부분에서 이미 Kotlin을 사용하고 있는 팀에게 더 높을 수 있습니다. 언어 전환이 필요하지 않기 때문입니다. TypeScript는 Kotlin Multiplatform이 사용되지 않는 순수 웹 프로젝트에서 더 인기 있는 선택으로 남아 있습니다. 그러나 웹용 Compose Multiplatform의 인기가 높아짐에 따라 Kotlin/JS는 React 및 Angular의 대안으로 입지를 넓히고 있습니다.

Kotlin/JS와 TypeScript 사이의 선택은 프로젝트 컨텍스트에 따라 다릅니다. 팀이 이미 Kotlin Multiplatform을 사용 중이거나 시작할 계획이라면 Kotlin/JS가 프론트엔드 부분에 논리적인 선택입니다. 독립적인 웹 프로젝트의 경우 JavaScript 라이브러리에 대한 기성 타입의 가용성과 시장의 더 많은 개발자 수로 인해 TypeScript가 더 실용적인 솔루션으로 남아 있습니다.