Intro
netlify에 배포할 사이트를 만들려는데 어떻게든 코틀린을 사용해보고 싶었다. 결론은 보다시피 접고 접어서 next.js와 sqlite로 전환했다.
근데 접은 경험이어도 아쉬워서 뭘 찾아봤는지 히스토리만 적어봤다.
Git Reference
https://github.com/technical-learn-room/kotlin-react-learn/blob/main/build.gradle.kts
위 사이트는 jetBrains 공식 kotlin-react 프로젝트다.
zip으로 다운받아서 실행한 다음에 컴포넌트를 추가하는 식으로 진행했었다.
Doc Reference
https://runebook.dev/ko/docs/kotlin/docs/js-react
처음에 코틀린 리액트 프로젝트가 실행하는 것조차 감이 안 잡혀서 위 블로그를 참고했다.
나중에 보니 이 블로그도 jetBrains 공식(https://kotlinlang.org/docs/js-react.html)에서 차용한 듯.
Deprecated;;
검색한 예제 대부분이 deprecated된 문법이었다.(RProps, RState 포함)
그래서 어떻게 응용을 해야 할지 모르겠더라고; (RProps의 경우는 그냥 Props, State 쓰면 된다)
특히 creatRoot 만들다가 type 안 맞네... 문법 deprecated네 하면서 굉장히 몇시간 헤맸다.
공식 프로젝트 clone하면 그 수고를 덜 수 있다.
Gradle
공식 프로젝트를 보면 문법이 아래처럼 되어 있다.
plugins {
kotlin("multiplatform") version "1.8.22"
kotlin("plugin.serialization") version "1.8.22"
}내 gradle 설정은 저 문법 지원 안했다. (당시 8.5였음).
나는 버전을 어떻게 더 올리냐~~ 하면서 머리를 싸맸었는데, 공식 프로젝트를 다운받으니 또 돌아가길래 한번 봤더니 이 친구는 gradle이 7버전대였다...
Guess & Think
gradle 버전이 오히려 높아서라고 생각했음.
하지만 공식도 7버전대던데... 의심스럽다. 내가 프로젝트 생성할 때 kotlin dsl 관련 설정을 하지 않았던가 추측.
gradle도gradle groovy랑 gradle kotlin이 있잖아. 그것도 관련이 있을까? 생각해보는 계기가 됨.
정답은 gradle kotlin을 사용할 때
js()가 가능하다는 것. 아래 공식문서 보면 나온다.
https://kotlinlang.org/docs/gradle-configure-project.html#5f296743
Groovy DSL 작성 예
dependencies {
implementation "org.springframework.boot:spring-boot-starter-web"
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation("org.springframework.boot:spring-boot-starter-test")
}Kotlin DSL 작성 예
dependencies {
"implementation"("org.springframework.boot:spring-boot-starter-web")
implementation("org.springframework.boot:spring-boot-starter-web")
"testImplementation"("org.springframework.boot:spring-boot-starter-test")
}출처
https://malangcow.medium.com/gradle-gradle-kts-차이-gradle-kotlin-dsl-알아보기-4f4b78b9e1e6
TIL
리액트니까 결국 번들된 스크립트가 있을 거 아닌가.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, Kotlin/JS!</title>
</head>
<body>
<div id="root"></div>
<script src="confexplorer.js"></script>
</body>
</html>저 src에 들어가는 js의 이름은 어디서 따온 것일까?
번들될 스크립트이름은 기본적으로 모듈이름(프로젝트이름)이다.
ETC
gradle은 창 우측의 코끼리 화살표 아이콘보다 gradle 종속성 새로고침을 하는 것이 더 효과적.
DSL은 특정 도메인을 위한 언어라는 뜻이다. 개발자에게 도메인 지식을 요구하며, 구글이 안드로이드 공식 언어로 kotlin-dsl을 채택했다고 한다. (2023)
