Kotlin/JavaScript

Kotlin/JavaScript

Kotlin/JavaScript(Kotlin/JS)를 사용하면 Kotlin 코드와 Kotlin 표준 라이브러리, 호환되는 모든 의존성을 JavaScript로 트랜스파일할 수 있어요. 이렇게 하면 JavaScript를 지원하는 어떤 환경에서도 Kotlin 애플리케이션을 실행할 수 있게 돼요.

Kotlin Multiplatform Gradle 플러그인(kotlin.multiplatform)을 통해 Kotlin/JS를 사용해서, JavaScript를 타깃으로 하는 Kotlin 프로젝트를 한 곳에서 구성하고 관리할 수 있어요.

Kotlin Multiplatform Gradle 플러그인은 애플리케이션의 번들링을 제어하고 npm에서 JavaScript 의존성을 직접 추가하는 등의 기능을 제공해요. 사용할 수 있는 설정 옵션에 대한 개요는 Set up a Kotlin/JS project를 참고하세요.

현재 Kotlin/JS 구현은 ES5와 ES2015 표준을 타깃으로 해요.

Kotlin/JS 사용 사례

Kotlin/JS를 활용하는 일반적인 방법은 다음과 같아요.

프론트엔드와 JVM 백엔드 사이의 공통 로직 공유

백엔드가 Kotlin이나 다른 JVM 호환 언어로 작성되어 있다면, 웹 애플리케이션과 백엔드 사이에 공통 코드를 공유할 수 있어요. 여기에는 데이터 전송 객체(DTO), 검증 및 인증 규칙, REST API 엔드포인트의 추상화 등이 포함돼요.

Android, iOS, 웹 클라이언트 사이의 공통 로직 공유

네이티브 사용자 인터페이스를 유지하면서 웹 인터페이스와 Android, iOS용 모바일 애플리케이션 사이에 비즈니스 로직을 공유할 수 있어요. 이렇게 하면 REST API 추상화, 사용자 인증, 폼 검증, 도메인 모델 같은 공통 기능을 중복해서 만들지 않아도 돼요.

Kotlin/JS로 프론트엔드 웹 애플리케이션 구축하기

기존 도구와 라이브러리를 통합하면서 Kotlin으로 전통적인 웹 프론트엔드를 개발할 수 있어요.

• Android 개발에 익숙하다면 Kobweb이나 Kilua 같은 Compose 기반 프레임워크로 웹 애플리케이션을 만들 수 있어요.
• JetBrains가 제공하는 common JavaScript 라이브러리용 Kotlin 래퍼를 사용해서 Kotlin/JS로 완전히 타입 세이프한 React 애플리케이션을 만들 수 있어요. Kotlin 래퍼(kotlin-wrappers)는 React와 그 외 JavaScript 프레임워크에 대한 추상화와 통합을 제공해요.
  • 이 래퍼들은 React Redux, React Router, styled-components 같은 보조 라이브러리도 지원해요. JavaScript 생태계와의 인터옵을 통해 서드파티 React 컴포넌트와 컴포넌트 라이브러리도 사용할 수 있어요.
• Kotlin 생태계와 통합되고 간결하고 표현력 있는 코드를 지원하는 Kotlin/JS 프레임워크를 사용할 수 있어요.

구형 브라우저를 지원하는 멀티플랫폼 애플리케이션 구축하기

Compose Multiplatform을 사용하면 Kotlin으로 애플리케이션을 만들고 웹 프로젝트에 모바일과 데스크톱 사용자 인터페이스를 재사용할 수 있어요. 이런 목적의 기본 타깃은 Kotlin/Wasm이지만, Kotlin/JS도 타깃으로 삼아 구형 브라우저까지 지원 범위를 확장할 수 있어요.

Kotlin/JS로 서버 사이드와 서버리스 애플리케이션 구축하기

Kotlin/JS의 Node.js 타깃을 사용하면 JavaScript 런타임에서 서버 사이드나 서버리스 환경용 애플리케이션을 만들 수 있어요. 이는 빠른 시작과 낮은 메모리 사용량을 제공해요. kotlinx-nodejs 라이브러리는 Kotlin에서 Node.js API에 타입 세이프하게 접근할 수 있게 해 줘요.

사용 사례에 따라 Kotlin/JS 프로젝트는 Kotlin 생태계의 호환 라이브러리와 JavaScript·TypeScript 생태계의 서드파티 라이브러리를 사용할 수 있어요.

Kotlin 코드에서 서드파티 라이브러리를 사용하려면 자신만의 타입 세이프 래퍼를 만들거나 커뮤니티가 유지 관리하는 래퍼를 사용할 수 있어요. 또한 Kotlin/JS의 dynamic type을 사용하면 엄격한 타입 지정과 라이브러리 래퍼를 건너뛸 수 있는데, 그 대가로 타입 안전성을 잃게 돼요.

Kotlin/JS는 가장 흔한 모듈 시스템인 ESM, CommonJS, UMD, AMD와도 호환돼요. 이를 통해 모듈을 생성하고 소비하면서 JavaScript 생태계와 구조적인 방식으로 통합할 수 있어요.

사용 사례 공유하기

Kotlin/JS 사용 사례 목록이 완전한 건 아니에요. 다양한 접근 방식으로 직접 실험해 보고 프로젝트에 가장 잘 맞는 방법을 찾아보세요.

사용 사례, 경험, 질문은 Kotlin Slack의 #javascript 채널에서 Kotlin/JS 커뮤니티와 공유해 보세요.

Kotlin/JS 시작하기

Kotlin/JS 작업을 시작하기 위한 기초와 첫 단계를 살펴보세요.

• Kotlin이 처음이라면 basic syntax부터 검토하고 Kotlin tour를 둘러보세요.
• 영감을 얻으려면 Kotlin/JS 샘플 프로젝트 목록을 확인해 보세요. 이 샘플들에는 프로젝트를 시작하는 데 도움이 되는 유용한 코드 스니펫과 패턴이 담겨 있어요.
• Kotlin/JS가 처음이라면 더 고급 주제를 살펴보기 전에 설정 가이드부터 시작하세요.

직접 Kotlin/JS를 시도해 보고 싶나요?

Get started with Kotlin/JS

Kotlin/JS 샘플 프로젝트

다음 표는 다양한 Kotlin/JS 사용 사례, 아키텍처, 코드 공유 전략을 보여 주는 샘플 프로젝트 목록이에요.

Kotlin/JS 프레임워크

Kotlin/JS 프레임워크는 바로 사용할 수 있는 컴포넌트, 라우팅, 상태 관리, 그리고 현대적인 웹 애플리케이션을 만드는 데 필요한 기타 도구를 제공해 웹 개발을 단순화해요.

서로 다른 저자가 작성한 Kotlin/JS용 프레임워크를 확인해 보세요.

Kotlin/JS 커뮤니티에 참여하기

공식 Kotlin Slack의 #javascript 채널에 참여해서 커뮤니티와 Kotlin/JS 팀과 대화를 나눌 수 있어요.

다음 단계

• Set up a Kotlin/JS project
• Run Kotlin/JS projects
• Debug Kotlin/JS code
• Run tests in Kotlin/JS