[Compose Web] moko 라이브러리 삭제 시, Error: Cannot find module 'mini-css-extract-plugin'
개발/Compose2024. 4. 5. 02:14[Compose Web] moko 라이브러리 삭제 시, Error: Cannot find module 'mini-css-extract-plugin'

Compose Multiplatform에서 Resources를 사용할 수 있다는 소식을 듣고 마음속에 품고 살다, 이번주 열리는 상권님의 Native vs Flutter 그리고 KMP 컨퍼런스 발표 자료를 완성하자마자 신나게 달려갔습니다. 기존 프로젝트에서 이미 moko-resources 라이브러리를 사용하고 있었기에 이를 해체하기 위해 moko 관련 변수, 함수 및 dependency 등 모두 해제하고 gradle clean까지 완벽하게 한 상태에서 두근두근하게 실행을 해보았더니 다음과 같은 오류를 만날 수 있었습니다. Execution failed for task ':jsBrowserDevelopmentRun'. > [webpack-cli] Failed to load '/Users/holy-knigh..

KUG Seoul 사이트를 Compose Web으로 만들면서 알게된 문제점들
개발/Compose2024. 1. 20. 06:44KUG Seoul 사이트를 Compose Web으로 만들면서 알게된 문제점들

KUG Seoul 사이트(임시)를 Compose Web으로 만들면서 알게된 문제점들... https://haeyum.dev/kug-seoul 1. 리소스가 로딩되는 과정에서 웹사이트가 멈춘다... 2. 버튼 클릭으로 Alert 발생 시 Ripple 이펙트가 중단된다. 3. 초기 별다른 기능/화면이 없음에도 600MB나 잡아먹는다. 4. Compose Multiplatform에서 대표적으로 사용되는 moko-resources를 사용하여도 초기 폰트 로딩되는 과정에서 ㅁㅁ로 한글이 깨진다... 5. 각 Weight별로 폰트가 불러와지면서 FontWeight이 적용되는게 시각적으로 보인다. (ㅁㅁ였다가 얇은 글씨가 보였다 두꺼워진다!) 6. fontFamilyResource로 폰트를 불러왔더라도, 다시 호출 ..

Compose Web 한글 깨짐 해결 feat. 폰트 불러오기
개발/Compose2023. 11. 16. 01:46Compose Web 한글 깨짐 해결 feat. 폰트 불러오기

HTML로 Wrapping 된 Compose Web 방식이 아닌 SKIKO 자체로 렌더링을 하는 경우, 한글 출력 시 바로 깨져버립니다. 당연히 폰트와 연관있을 것이라 생각하였지만, 아무리 찾아도 폰트를 불러올 수 있는 방법이 없었습니다. 올해 초 실패한 이후, 이제는 인터넷에 관련 내용이 있겠지 생각했는데 놀랍게도 없었습니다. 우선 Compose Multiplatform에서는 Android의 Jetpack Compose처럼 Font를 받는 것이 아닌 ByteArray를 받습니다. fun Font( identity: String, data: ByteArray, weight: FontWeight = FontWeight.Normal, style: FontStyle = FontStyle.Normal ): Fo..

Jetpack Compose 테마 정리본
개발/Compose2023. 9. 23. 16:58Jetpack Compose 테마 정리본

GDG Songdo/Incheon에서 지난 4월부터 6월까지 2개월간 진행됐던 Compose 스터디에서 발표한 내용을 올려봅니다. 본 내용은 Codelab - Jetpack Compose theming 기반으로 작성되었습니다. Jetpack Compose 테마 설정 학습 내용 Material Design 기본 지침서 및 브랜드에 맞게 맞춤설정하는 방법 Compose에서 Material Design 시스템을 구현하는 방법 앱 전체에서 색상과 서체, 도형을 정의하고 사용하는 방법 구성요소의 스타일을 지정하는 방법 밝은 테마와 어두운 테마를 지원하는 방법 빌드 항목 잠깐! Material과 Material3는 요구되는 파라미터와 타입이 다른 등 일부 호환되지 않습니다. Color Material lightCo..

RuntimeException - Shortly: The required symbol androidx.compose.runtime/remember
개발/Compose2023. 8. 7. 15:29RuntimeException - Shortly: The required symbol androidx.compose.runtime/remember

컴포즈 멀티플랫폼으로 개발하다보면 아래의 컴파일 오류를 만나는 경우가 있습니다. Shortly: The required symbol androidx.compose.runtime/remember|1835138394250687683[0] is missing in the module or module dependencies. This could happen if the required dependency is missing in the project. Or if there is a dependency that has a different version (without the required symbol) in the project than the version (with the required symbol) ..

ERROR: Compose targets '[uikit]' are experimental and may have bugs!
개발/Compose2023. 8. 1. 15:42ERROR: Compose targets '[uikit]' are experimental and may have bugs!

Compose Multiplatform을 처음 개발하면 다음과 같은 오류를 만나볼 수 있습니다. ERROR: Compose targets '[uikit]' are experimental and may have bugs! But, if you still want to use them, add to gradle.properties: org.jetbrains.compose.experimental.uikit.enabled=true 말 그대로 uikit을 대상으로 하는 컴포즈는 실험적이기에 많은 버그가 있다는 것을 의미합니다. 하지만 우리는 위험을 무릅쓰고 연구/사용을 할 것이기에 가볍게(?) 무시하고 강행하면 됩니다. 위의 오류에서도 설명은 나와있지만 이를 해결하는 방법은 간단합니다. gradle.propert..

Compose iOS: Undefined symbols for architecture arm64
개발/Compose2023. 5. 1. 17:09Compose iOS: Undefined symbols for architecture arm64

Compose Multiplatform을 통해 Compose iOS를 구현하는 경우 매우 높은 확률로 아래의 컴파일 오류를 만날 것 이다. 물론 아래의 시나리오 외에도 발생할 수 있지만 가장 크게 만날 수 있는 오류이다. Undefined symbols for architecture arm64: "_kfun:com.haeyum.crosscomposemobile#HomeScreen(){}", referenced from: _objc2kotlin_kfun:com.haeyum.crosscomposemobile#HomeScreen(){} in shared(result.o) ld: symbol(s) not found for architecture arm64 clang: error: linker command fa..

image