why? kotlin?

왜? 코틀린을 시작했는가?
실은 코틀린에 대해 잘몰랐었고, 안드로이드 언어이다. 정도? 만 가볍게 들어봤을뿐 거의 모르고있었고,
그냥 kotlinJS라는 이름만보고 JS코드를 작성하면 Kotlin 언어로 컴파일해주는것인가? 라고 잘못된 생각만을 가지고 있었습니다.
알고보니 코틀린은 멀티플랫폼 언어였고, 제가 보았던 KotlinJS는 kotlin이란 새로운 언어를 작성한후 javascript로 컴파일 해 주는 것이였습니다.
그리고 이왕 알아보기 시작한거 javascript 외의 다른 언어도 한번 공부해보자로 시작하여 코틀린에 대해 공부하기 시작하였습니다.

Kotlin or KotlinJS란

코틀린은 자바 플랫폼에서 동작하는 프로그래밍 언어이고,
자바를 완전히 대체할 수 있는 언어가 되는 것이 코틀린의 주목적이라고 합니다.

자바와 같이 코틀린은 정적 타입의 프로그래밍 언어입니다.
정적 타입 지정은 프로그램의 모든 구성 요소의 타입이 컴파일 되는 시점에 알 수 있고, 컴파일러가 타입을 검증해준다는 것 입니다.
그중 코틀린 컴파일러는 자바와 다르게 문맥으로 변수의 타입을 자동으로 유추 할 수 있기 때문에 직접 명시를 해주지 않아도 된다고 합니다.
이런 기능을 타입 추론이라고 합니다.

ex)

1

val name = 'Roy' // -> == val name:String = 'Roy'

코틀린은 안드로이드 스튜디오 개발사인 Jet Brains에서 2011년에 공개한 언어인데
Google I/O 2017에서 안드로이드의 공식 개발언어가 되었고, Google I/O 2019에서는 kotlin First를 언급하여 코틀린을 최우선으로 사용하겠다고 언급하였습니다.
참조 - Google Developers 국문 블로그

또한 안드로이드 스튜디오로 모든 플렛폼개발이 가능하도록 개발중이라고 언급하였기 때문에 ios개발도 곧 가능할것이라 추측됩니다.

코틀린이라 하면 안드로이드나 자바를 생각하게 되는데,
코틀린은 플랫폼 중립적인 언어로 설계 되어있기때문에 다양한 환경에서 사용할 수 있습니다.

현재는 JVM, Android, Browser, Native 코드를 작성할 수 있고,
자바스크립트대신 사용할 수 있는 코틀린 JS에 대해 설명하려고 합니다.

Gradle Project

본격적으로 시작하기에 앞서 Gradle Project에 대해 간단히 설명하겠습니다.

Gradle설정을 무엇으로 정하냐에 따라
c,자바,코틀린등을 컴파일을 할 수 있는 범용적인 빌드 프로젝트를 이야기합니다.
앤트(Ant), 그래이들(Gradle), 메이븐(Maven)등 여러 빌드툴중에 그래이들을 이용하여 빌드퇴는 프로젝트를 Gradle Project라고 합니다.

특징: 계층 구조로 구성이 가능합니다.

단점: 같은 계층내의 자식만 모듈간의 의존성을 설정 가능합니다.

예를 들어 A와 B는 같은 계층이기 때문에 모둘간의 의존성을 설정 가능하지만
A-1과 B는 의존성 설정이 불가능 하게 됩니다.
물론 A-1과 B의 의존성을 가지게하려면 복잡한 path 설정이 필요하므로 현재 내용에서는 다루지 않도록 하겠습니다.

hello world

이제 처음으로 기본적인 hello world를 콘솔로 찍어볼텐데,
모든 개발의 시작은 환경 설절이므로 제일 먼저 환경 설정을 해보도록 하겠습니다.
Jet Brains에서 공개한 언어이기 때문에 툴은 Intellij를 사용하겠습니다.

우선 새 프로젝트를 구성하는데
보통 실제 프로젝트는 단일 모듈로 만들지 않고 다수의 모듈을 갖게됩니다. 또한 목적파일 하나당 별도의 모듈이 필요하게됩니다.

ex) app.js : app기능 , lib.js : lib기능 이 필요하다면 목적파일 하나당 하나의 모듈이 필요한것입니다.

이렇게 만든 app.js(A)와 lib.js(B)를 의존성을 갖게하기 위해 상위 부모에 root모듈을 만들어줍니다.
(root모듈은 그냥 빈 그래이들 모듈상태로 A모듈과 B모듛의 의존성을 만들어주기위한 부모라고 생각하시면 됩니다.)

먼저 new Project를 만들어주시고 의존성을 위한 빈 root 모듈을 만들어줍니다.

그 후 root모둘의 자식으로 app모듈과 lib 모듈을 만들어주게 되면

위와같은 구조의 app 모듈이 root모듈의 자식으로 생성되게됩니다.
(동일하게 lib 모듈도 생성해줍니다.)

참고로 인텔리제이에서는 모듈마다 build.gradle이 자동 생성되는데 해당 코드는 잘못된? 예전? 코드이기 때문에
코틀린 공식 홈페이지의 Getting Started를 참고하셔서 아래와 같이 내용을 변경하시면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

group 'org.example'
version '1.0-SNAPSHOT'

buildscript {
    ext.kotlin_version = '1.3.61'
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

apply plugin: 'kotlin2js'

repositories {
    mavenCentral()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}

그리고 추가로 하단에있는 코드를 build.gradle에 추가해주면됩니다.
( 공식 사이트에는 File file로 되어있는데 File 삭제 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

task assembleWeb(type: Sync) {
    configurations.compile.each { file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") ||
                        !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/web"

    dependsOn classes
}

assemble.dependsOn assembleWeb

// assemble Task가 assembleWeb에 의존성을 갖는다. 
// (assemble이 실행되려면 반드시 assembleWeb이 실행되어야함)
// 그리고 build는 assemble에 의존성을 갖기 때문에 
// build를 하면 자동으로 assembleWeb 까지 실행되게 된다.

이제 app -> src -> main -> kotlin -> main.kt 파일을 열어
hello world 를 작성해봅니다.
( kotlin은 함수를 fun으로 작성합니다. )

1
2
3

fun main() {
    println("hello world");
}

이제 기본적인 준비는 끝낫고 빌드만 하면 되게되는데 인텔리제이 오른쪽에 보이는 그래들탭을 열어주면

위와 같은 화면이 나타나지않고 (lib는 추가하지 않았으니 없는게 맞습니다.)
root의 자식으로 app Task가 존재하지 않을것입니다.

이유는

root의 settings.gradle파일에 app을 include 해주지 않았기 때문에
include ‘:app’을 작성해주어야 gradle에 app Task가 노출되게 됩니다.

이 후 app - Tasks - Build - build를 해주면

app 디렉토리에 web 과 build 폴더가 생성되게 되고
web폴더의 kotlin.js ( 표준 라이브러리 )와 app.js가 생성되게 됩니다.

이제 index.html을 만들어 위에만든 kotlin.js와 app.js 를

1
2
3
4
5
6
7
8
9
10

/// index.html
<html>
<head>
  <title>Title</title>
</head>
<body>
  <script src="kotlin.js"></script>
  <script src="app.js"></script>
</body>
</html>

드디어 원하던 hello world가 출력되었습니다.

이번 글에서의 내용이 여기까지이고

자세히 파일을 보신분들은 아시겠지만 빌드 후 생성된 kotlin.js 파일의 용량이 2m인것을 보셨을겁니다.
이는 상용 서비스에서 사용하기에는 부담스러운 용량이기 때문에 다음 글에서 kotlin-dce-js에 대해 언급하도록 하겠습니다.
( plugin이기 때문에 궁금하시면 검색해서 보시면됩니다. )

• 이 글은 Bsidesoft의 CodeSpitz Youtube 강좌를 참고하여 작성하였습니다.