홀싀

웨어러블과 모바일 앱을 멀티모듈을 이용해 구성하던 중,

app, wearable app 과 같은 상위 level 에 포함시켜야 할 

data, domain 모듈을 app 모듈 내부에 만들었음을 깨달았다

멍청이…

그래서 rename 이나 디렉터리상에서 옮기기를 시도해보았지만 잘 되지 않았고.. 

Project Sturcture 의 module 탭에서도 Add, Delete 가 있을 뿐 Move 가 없었다

…그래서 해결책은…

1. 파인더등에서 디렉터리를 째로 옮기거나 rename 을 통해 ‘:app’ (< 상위 루트 이름)을 제거한다.

2. settings.gradle 파일에서 include 된 모듈이름도 변경해준다!

3. 당연히 include 시에 :app:뭐시기 -> :뭐시기  변경도 해주어야한다

4. Sync 잊지말기!

5. 만약에 안나오면 File -> Invalidate Caches 

호호 모듈 옮기기 성공

[현상]

개인프로젝트 중 힐트 어노테이션 의존성(?)을 추가하니 빌드에러가 난다..... 

    ksp(libs.hilt.android.compiler)

[원인]

KSP 는 아직 힐트를 지원하지 않음

https://issuetracker.google.com/issues/179057202

증말 너무한다잉

[해결]

kapt 로 돌아가야한다 뿌엥...

Before

plugins {
	// ...
    id("com.google.devtools.ksp")
}

dependencies {
	// ...
        ksp(libs.hilt.android.compiler)
}

After

plugins {
	// ...
    kotlin("kapt")
}

dependencies {
	// ...
        kapt(libs.hilt.android.compiler)
}

혹시 추가 설명이 필요하신 분은 아래 링크 참고 

https://kotlinlang.org/docs/kapt.html#annotation-processor-arguments

그렇게... 나의 빌드속도 향상이여...안녕히... 

모듈화가 되어있기는 하나 Hilt 는 뭐 거의 다 쓰이기때문에.....하..... 

그냥 업뎃을 기다려야겠다

그래서 프로덕션에서는 maintenance 상태인 kapt 를 쓰는구나....ㅎ

문제

테스트 빌드중에 

connectedDebugAndroidTest 에서 영원한 로딩에 굴레에 갇히는 일이 있었다.. (테스트빌드 말고 그냥빌드는 잘됨....& unit test 도 잘됨.... instrumental test만 난리남)

Androidx.test.espresso:espresso-core

해당 의존성을 3.5.0 -> 3.4.0 으로 내리니 빌드가 정상적으로 되긴 했지만

해당 라이브러리가 배포된지도 좀 되었고 다른 프로젝트에서는 잘 되기에… 

다른 문제가 있겠거니 해서 열심히 뒤적거렸다. 

해결 

힐트 테스트 디펜던시가 implementation 으로 되어있는것을 발견.. 

공식문서에는 테스트 스코프로 명시되어있다 

https://developer.android.com/training/dependency-injection/hilt-testing?hl=ko#testing-dependencies

이를 testImplementation 과 androidTestImplementation 으로 교체해주니 빌드도 테스트도 잘 된다. 

dependencies {
// AS-IS
	implementation("com.google.dagger:hilt-android-testing:2.44")

// TO-BE
    testImplementation("com.google.dagger:hilt-android-testing:2.44")
    androidTestImplementation("com.google.dagger:hilt-android-testing:2.44")
}

공식문서를 잘 보자 흑흑

해결하는데 이틀꼬박걸림 

아래는 유입을 위한 추적하면서 마주친 에러메시지들 

Hilt 를 이용한 DI에서,

구현체를 만들 때 3가지 어노테이션을 사용할 수 있다.

간단히 플로우차트로 나타내면 아래와 같다.

가장 간단한 케이스로, constructor 가 존재하여

1. 모듈이 필요없는 의존성 주입

@Inject constructor(param….) 

class DateFormatter @Inject constructor() {

    @SuppressLint("SimpleDateFormat")
    private val formatter = SimpleDateFormat("d MMM yyyy HH:mm:ss")

    fun formatDate(timestamp: Long): String {
        return formatter.format(Date(timestamp))
    }
}

위 코드는 구글의 Hilt codelab Solution에서 가져왔다.

2. 모듈이 필요한 의존성 주입 (constructor 없음)

Constructor가 없는 이유에 따라 해결법이 갈린다.

a. 외부라이브러리임, 빌더패턴임

b. Interface 임

@Module, @InstallIn(...) 의 어노테이션이 있는 

모듈 클래스 내부에 @Provides, @Binds 어노테이션이 붙은 함수를 이용한다.

주의 - 둘은 섞어서 쓸 수 없음...

2-a. @Provides 어노테이션

외부라이브러리나 빌더패턴의 경우에 사용

코드랩 솔루션 일부 (ApplicationComponent 는 현재 Deprecated -> Delete 되었으나 이 글은 @Provides 를 설명하는 글이지 scope를 설명하는 글이 아니고, 코드랩에는 아직 이게 나와있어서 그냥 복붙,,, 이제 쓸일없는 코드)

@InstallIn(ApplicationComponent::class)
@Module
object DatabaseModule {

    @Provides
    @Singleton
    fun provideDatabase(@ApplicationContext appContext: Context): AppDatabase {
        return Room.databaseBuilder(
            appContext,
            AppDatabase::class.java,
            "logging.db"
        ).build()
    }
    //...
}

2-b. @Binds 어노테이션

인터페이스를 주입할 때 필요한 정보를 제공하는 역할.

추상함수 형태로 제공 (따라서 이것을 포함하는 Module class역시 추상 class 가 된다.) -> Binds 와 Provides 를 섞어쓸 수 없는 이유

역할 : 인터페이스클래스와 구현체 클래스를 알려줌 

• 리턴타입 : 어떤 인터페이스 인스턴스를 제공하는지 알려줌

• 파라미터 타입 : 인터페이스를 상속하는 녀석들중에 어떤 구현체를 제공할지 Hilt 에 알려줌

@InstallIn(ActivityComponent::class)
@Module
abstract class LoggingInMemoryModule{

    @ActivityScoped
    @Binds
    abstract fun bindInMemoryLogger(impl: LoggerInMemoryDataSource) : LoggerDataSource
}

아마도 함수가 사용안됨으로 표시될건데

@Inject 하면 그렇게 표시되더라도 Inject 하는 곳으로 안내됨..(?) 즉, 신경쓸필요없음

위의 세 방식으로 힐트에게 의존성 주입 방법에 대해 알려주었다.

Binds 나 Provides 는 같은 인터페이스/클래스에 대해 각기 다른 구현을 여러개 가질 수 있다.

이렇게 여러 구현이 있는 경우 @Qualifier 로 어떤 구현을 사용할지 구분할 수 있다.

나도 힐트 초보자이고, 사용법 가이드라기보다는 개념을 이해하기위해 쓴 글이기때문에 엄밀하지 않은 부분이 있을 수 있다.

틀린부분을 댓글로 달아주시면 감사감사... 

Hilt codelab 을 진행하다가 위와같은 오류를 만났다

error: cannot find symbol @dagger.hilt.InstallIn(value = {ApplicationComponent.class})

https://developer.android.com/codelabs/android-hilt?hl=ko#6 

사실 ApplicationComponent.class가 애초부터 import 가 안되었음ㅎ

해당 클래스는 대거에서 특정시점에 Deprecate -> Delete 되었다고 한다.

SingletonComponent로 대체되었다고..

실제 상황이면 대체 클래스를 이용하겠지만.. 이건 코드랩이니까 최대한 코드랩과 싱크를 맞추기 위해 다운그레이드하는걸로..

Hilt version 을 바꾸어주니 임포트 완... 해결

근데 구글은 라이브러리 업뎃 푸시하고 빌드를 안해본건가....??????

build.gradle(project)

변경전 

ext.hilt_version = '2.40.1'

변경후

ext.hilt_version = '2.28.3-alpha'

이렇게 버전을 바꿔주면 코드랩을 끝까지 따라갈 수 있다.....

출처

컴포즈에서 폰트 + 타이포그래피를 커스텀해보자

쉬운 방법부터 Jetpack Compose 가 권장하는 사용법까지...

순서 

1. 텍스트 스타일 인라인 지정
2. FontFamily
3. Material 제공 Typography 
4. Material 상속, Custom typography

예시로 사용한 노토산스 폰트는 웨이트별로 아래 링크에서 다운받을 수 있다.

https://fonts.google.com/noto/specimen/Noto+Sans+KR 

1.  텍스트 스타일 인라인 지정

가장 간단한 방법

폰트 리소스를 추가하고

텍스트 스타일 필드에서 손수 지정한다.

@Composable
fun SimpleTextStyle() {
    Text(
        text = "simple text style",
        fontStyle = FontStyle(R.font.noto_sans_kr_regular),
        fontSize = 20.sp,
    )
}

2. FontFamily

여러 폰트 리소스를 폰트 패밀리로 묶고 사용하기!

폰트 패밀리 선언

val NotoSans = FontFamily(
    Font(R.font.noto_sans_kr_regular, FontWeight.Normal),
    Font(R.font.noto_sans_kr_medium, FontWeight.Medium),
    Font(R.font.noto_sans_kr_bold, FontWeight.Bold),
)

폰트 패밀리 사용예

@Composable
fun FontFamilyText() {
    Column {
        Text(
            text = "font family regular",
            fontFamily = NotoSans,
            fontWeight = FontWeight.Normal,
        )
        Text(
            text = "font family medium",
            fontFamily = NotoSans,
            fontWeight = FontWeight.Medium,
        )
        Text(
            text = "font family bold",
            fontFamily = NotoSans,
            fontWeight = FontWeight.Bold,
        )
    }
}

폰트 패밀리를 불러오는 부분이 훨씬 간단해졌다.

 Text 의 다른 필드들을 이용해 size, color 등을 지정할 수 있다.

3. Material 제공 Typography 

구글이 간편한 디자인을 위해 제공하는 Material Theme 을 사용하고있다면 미리 선언 된 타이포그래피를 사용할 수 있다.

미리보기...

더보기

주의) 최상위 스크린을 MaterailTheme 으로 감싸주어야 제대로 된 결과물을 볼 수 있다.

(여기서는 프리뷰를 MaterialTheme 으로 감싸주었음)

@Composable
fun MaterialTypo() {
    Column {
        Text(
            text = "material text h4",
            style = MaterialTheme.typography.h4
        )
        Text(
            text = "material text body1",
            style = MaterialTheme.typography.body1
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewMaterial() {
    MaterialTheme { // 잊지말자앗
        Column(
            modifier = Modifier.padding(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            MaterialTypo()
        }
    }
}

4. Material 상속, Custom typography

그러나 주어진 타이포그래피 안에서만 디자인이 나올리가 없다

개발자가 스스로 타이포를 선언해서 비슷한걸 묶어쓸수도 있겠고, 디자인단에서 정의 된 타이포가 내려올 수도 있겠지

이를위해 나는 Material 을 상속하는 Custom Theme 을 선언하고

타이포그라피 객체는 커스텀을 사용했다.

또한 타이포그래피는 내용이 바뀔 일 없는 객체이므로 CompositionLocalProvider 로 감싸주었다. 

타이포그래피 선언하기

https://developer.android.com/jetpack/compose/designsystems/material3#defining_typography

추가설명

https://developer.android.com/jetpack/compose/compositionlocal?hl=ko#intro 

val LocalReplacementTypo = staticCompositionLocalOf {
    HolsuiTypography()
}

@Composable
fun MyTheme(content: @Composable () -> Unit) {
    CompositionLocalProvider(
        LocalReplacementTypo provides myTypography
    ) {
        MaterialTheme(
            content = content,
        )
    }
}

object MyTheme {
    val typography: HolsuiTypography
        @Composable
        get() = LocalReplacementTypo.current
}

Typo Data class

@Immutable
data class HolsuiTypography(
    val myTypo2: TextStyle = TextStyle.Default,
    val myTypo1: TextStyle = TextStyle.Default,
    )
    
val fontFamily = FontFamily(
    listOf(
        Font(R.font.noto_sans_kr_regular, weight = FontWeight.Normal),
        Font(R.font.noto_sans_kr_medium, weight = FontWeight.Medium),
        Font(R.font.noto_sans_kr_bold, weight = FontWeight.Bold),
    )
)    

internal val myTypography = HolsuiTypography(
      defaultFontFamily = fontFamily,
      myTypo2 = TextStyle(
        fontFamily = fontFamily,
        platformStyle = platformTextStyle,
        fontSize = 14.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal
    ),
    myTypo1 = TextStyle(
        fontFamily = fontFamily,
        platformStyle = platformTextStyle,
        fontSize = 24.sp,
        lineHeight = 34.sp,
        fontWeight = FontWeight.Medium
    ),
)

사용할 때

주의) 얘도 최상위 스크린을 MyTheme 으로 잘 감싸주자

@Composable
fun CustomTypo() {
    Column {
        Text(
            text = "custom text my typo1",
            style = MyTheme.typography.myTypo1
        )
        Text(
            text = "custom text my typo2",
            style = MyTheme.typography.myTypo2
        )
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewCustomTheme() {
    MyTheme { // 이거 빠지면 도로묵
        Column(
            modifier = Modifier.padding(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            CustomTypo()
        }
    }
}

처음에는 조금 번거로우나 성능에도 좋고 유지보수도 편하다!

잘못된 내용이나 개선점 댓글로 알려주시면 감사드리겠슴다.

Jetpack Compose 실무 도입 후기

기존 뷰를 사용하던 팀에서 작년9월부터 현재까지 약 10개월간 점진적으로 컴포즈를 도입한 후기… (벌써 10달이나 됐어..?)

by 안드로이드 병아리 와타시..

9월 : 하이 컴포즈

실험적으로.. 로직이 비교적 간단하고, 영향력이 비교적 적은 페이지를 컴포즈로 교체해보았다.

이때 나는 컴포즈 코드랩 하면서 구경함… 미지의 세계…

기존 뷰를 위한 프레젠테이션 모델을 구상할 때 딱히 Stability 를 생각하지 않았으므로, 컴포즈만을 위한 거의 비슷한~ 모델을 다시 구성했다… 물론 기존 모델을 건들면 깨끗은 했겠지만 영향력이 너무 커서 안정성을 위한 투트랙….

괜찮았을것도 같지만 상용서비스까지 나가진 못했다. 그냥 체험해본것으로…

10월 : 컴포넌트화?

반복적으로 사용되는 버튼을 컴포넌트화 해보기로 했다.

이건 디자인 팀에서 컴포넌트화를 강력하게 미는것과 맞물려서 시도했던건데

뷰 내부까지 컴포즈 컴포넌트를 쓰는것은 수고에비해 얻는게 없는것같아서… 일단 컴포즈를 사용중인 부분만 먼저 컴포넌트화 했다.

소통도 많이하고 고민도 많았는데 이후 컴포넌트에 예상치못한 베리에이션들이 생기면서 잡음이 많았던거같다.

12월 : 상용출격!!!

상용서비스에 드디어 컴포즈 출격…

기획단에서 엎어버린 바람에 몇달 못가고 사라진 스크린이지만.. 암튼 한 스크린 전체에 컴포즈가 도입되었다

이때까지도 컴포즈에 가장 관심이 많은 팀원분만 홀로 외로운 컴포즈길을 걸었음

2월  : 나작컴(나의작은컴포즈)

나에게도 컴포즈의 바람이(?) 불어오기 시작

본격적으로 메인 피쳐에 컴포즈를 도입하기 시작했다

한땀한땀 작성하느라 시간은 좀 걸렸다…. 상태관리도 미숙하고…

이때 각 컴포넌트에서 뭘 조정할 수 있는지 보려고 android developers 문서를 참 많이봤는데

꼭 필요한 문서긴 하지만 문서를 맨날 보는거보다는… 급할때는 해당 컴포저블 파라미터 뭐뭐있는지 보면서 상황파악하는게 더 빠른거같다(개인적인생각...)

UI state 을 끌어올려서 애니메이션이나 스크롤을 컨트롤 하는 문제가 까다로웠다 ㅠ

6월 : 나작띰

디자인쪽에서 컨벤션이 좀 완성되어서 Material Theme3 을 상속하는 서비스 자체 Theme 을.. Font 부터 도입하였다

Theme 을 컴포넌트마다 씌워놨다가 감사하게도 리뷰어택을 맞고… 

스크린단위로 바꿈…. 

~현재

컴포즈를 얼레벌레 도입해서 팀원들과 리뷰를 주고받으며 어떻게 잘 끌고오고 있는데,

이제는… 모두… 컴포즈 없이는… 살수없는몸이 되어버렸음…. 

일단 구현시간이 압도적으로 빠르고, 디자인 수정도 대체로 쉽다..

그리고 난 갠적으로 프리뷰기능 사랑함… 이걸로 좀 까다로울거같은 상호작용을 먼저 구현해보고.. 폰에서 만져보고… 사이즈보고 일에 착수할 수 있는거 너무좋당..

또, 보일러플레이트 코드가 적고 (특히 리사이클러뷰 미친놈)

UI업데이트가 이런저런 복잡한 길을 타고 이루어지는게 아니라 깔쌈하게 상태를따라가니 상태 업데이트에 집중할 수 있어 디버깅도 쉽다고 느낀다.

조금 아쉬웠던건 Pager…가 아직 미완성느낌이 좀 있어서… 기존 뷰바인딩과 섞어서 사용하는 부분이 아직 남아있다.. TextField 랑 씨름한적도 있었는데 이것도 아직 완성품은 아닌 느낌이다…(deprecate 되었다가 다시 살아났다가 이젠 디폴트 false 가 되신 includeFontPadding) 

뭐 텍스트 인풋창은 평생의 숙제긴하지… 

그리고 컴포즈의 아쉬움은 아니고, 이미 꽤 디벨롭된 프로젝트라면 겪기 쉬운 문제라고 생각이 드는데, 마이그레이션하면서 뷰와 컴포즈를 위한 프레젠테이션 모델이 분리되면서(눈으로 보기엔 똑같은??) 샷건수정이 빈번하게 일어나기도 했다.

그러나 암튼, 과거로 돌아가서 컴포즈로 마이그레이션 다시 할거냐고 묻는다면 나는 YES!!!

출처 : https://developer.android.com/jetpack/compose/state?hl=ko#restore-ui-state 

이전글에서는 선언형 UI가 무엇인지, 재구성과 부작용이 무엇인지 간단히 살펴보았다. 

오늘은 콤포오즈 사용에 있어 빠질 수 없는 상태에 대한 이해..

상태(State) 

시간이 지남에 따라 변할 수 있는 값

ex) 

• 네트워크 연결을 설정할 수 없을 때 표시되는 스낵바
• 블로그 게시물 및 관련 댓글
• 사용자가 클릭하면 버튼에서 재생되는 물결 애니메이션
• 사용자가 이미지 위에 그릴 수 있는 스티커

상태 및 구성

Composable 을 업데이트 하려면 새 인수로 동일 컴포저블을 호출해야함

컴포저블의 상태(State)

컴포저블은 remeber API 를 사용해 메모리에 객체를 저장할 수 있음

초기 컴포지션 중에 값을 저장하고

리컴포지션시에 이 값을 꺼내 사용

MutableState<T> 형식 : 관찰가능한 유형 대표(?)

관찰가능한 객체를 선언하는 세가지 방법

• val mutableState = remember { mutableStateOf(default) }
• var value by remember { mutableStateOf(default) }
• val (value, setValue) = remember { mutableStateOf(default) }

주의 : ArrayList<T>, mutableListOf() 같은 mutable 한 객체를 상태로 사용하면 관찰이 불가하여 객체 변경 시 리컴포지션이 트리거되지 않는다. State<List<T>>, listOf() 등 관찰 가능한 데이터 홀더를 사용할 것! 

Remember 는 재구성(recomposition)시에 값을 저장하는 역할, 구성 변경 전반에서는 값을 저장하지 못하므로 

그러한 역할이 필요할 때는 remember saveable 을 사용한다.

Remember saveable 에는  Bundle 에 저장될 수 있는 값 형태나, 맞춤 Saver 객체가 저장된다. 

(번들에 추가할 수 없는 데이터 유형을 사용하고 싶은 경우 @Parcelize 주석, mapSaver, ListSaver 등을 이용하여 saver 객체를 만들어 저장할 수 있다.... 김 비둘기 님 피드백)

Jetpack Compose 에서 지원되는 기타 상태 유형

컴포즈는 state 객체를 읽어 재구성(리컴포지션)을 수행하므로 관찰 대상 데이터들을 state로 변환해주어야한다.

아래 유형들을 State<T> 로 변환하는 함수가 Compose 에 내장되어있음 

• 아티팩트(디펜던시) 필요..
• 어떤 아티팩트 필요한지는 원문에서 확인하자~~ https://developer.android.com/jetpack/compose/state?hl=ko#use-other-types-of-state-in-jetpack-compose

Flow : CollectAsStateWithLifecycle() - Android 전용

Flow : CollectAsState

LiveData : ObserveAsState()

RxJava2 : subscribeAsState()

RxJava3 : subscribeAsState()

이외에 다른 유형을 컴포즈와 함께 사용하기 위해 produceState API 를 이용해 직접 확장함수를 빌드해도 된다고 한다..

스테이트풀(Stateful)과 스테이트리스(Stateless)

스테이트풀 : remember 로 객체를 저장하는 컴포저블을 스테이트풀 하다고 한다.

스테이트리스 : 내부에 state 를 갖지 않는 컴포저블(파라미터로 받아서 쓰기만..)

스테이트풀은 호출자가 상태를 제어,관리할 수 없다 -> 스테이트풀은 호출자가 상태를 제어,관리할 필요 없을 때 쓴다

스테이트풀한 컴포저블은 밖에서 스테이트를 제어, 관리 할 수 없으므로 재사용 가능성이 적고 테스터블하지 않다. 

따라서 재사용을 위한 컴포저블 개발 시 스테이트풀/ 스테이트리스 모두 노출하기도 함

상태 호이스팅 

컴포저블을 스테이스리스로 만들기위해 상태를 호출자로 옮기는(끌어올리는) 패턴

내부의 상태변수를 두개의 매개변수로 바꾼다 

1. Value : 표시될 값
2. Event : 값 변경을 요청하는 이벤트

2번 Event 는 onValueChange : (T) -> Unit 형태로 많이 쓰지만 구체적 이벤트가 어울리는 경우 람다를 이용해 정의할 수 있음

끌어올려진 상태의 중요한 속성

• 단일 정보 소스 - Single Source Of Truth : 버그 방지
• 캡슐화 : 끌어올림 받은(?) 스테이트풀 컴포저블의 내부적 속성으로 이 스테이트풀 컴포저블만 상태를 수정할 수 있음
• 공유가능 : 호이스팅 후 스테이트풀 컴포저블 내부(하위의) 다른 컴포저블에도 값을 공유할 수 있다
• 가로채기 가능 : 호출자가 값을 먼저 보고 무시하거나 수정하는 등 결정이 가능
• 분리됨 : 상태를 뷰모델 등 어디든지 저장할 수 있음

이러한 호이스팅을 통해 UI 상태를 표시하는 컴포저블과 상태를 저장하고 변경하는 앱 부분을 분리할 수 있다.

상태만 mock 으로 주고 이래저래 테스트도 간편하고 좋다… 

틀린내용 댓글로 달아주시면 감사합니다