Feature/#33

[tgyuuAn]

1. 📄 관련된 이슈 및 소개

• closed #15
• closed #33

2. 🔥변경된 점

• AI 채팅 기능을 추가

3. 📸 스크린샷(선택)

4. 💡알게된 혹은 궁금한 사항들

1. Retrofit2를 사용할 때, GsonConverter vs kotlin Serealization 차이

• Retorift2을 사용할 때, GsonConverter와 Kotlinx.Serealization의 차이 , 영문 레퍼런스

GsonConverter

-> 사용법 매우 간단 -> 데이터에 기본 값을 설정해줄 수 없음. -> null값의 데이터가 올 경우 엘비스 연산자 ?: 을 이용해서 기본 값을 줄 수 있긴 하지만 보일러 플레이트 발생.

Kotlinx.Sereilization

-> 기본값을 할당해줄 수 있음.

2. Retrofit2를 사용할 때, @POST, @BODY 차이

• Retofit2 @Body 사용할 때, @Field와 @Body의 차이, 2

@Field

• key=value&key=value와 같은 형식으로 데이터를 전달함.
• Retrofit2에서 사용하기 위해서는, @FormUrlEncoded도 함께 사용해야 한다고 함.

@Body

• Json형식으로 데이터를 전달함.

3. Retrofit2 Converter가 동작하지 않는 에러 발생

java.lang.IllegalArgumentException: Unable to create @Body converter for class com.tgyuu.network.model.consulting.AiChatRequest (parameter #1) for method OpenAiApi.postChatMessage

• Retrofit2를 사용하면서 @Body 부분이 직렬화가 안되고 있는 것 같음.
• 열심히 디버깅중인데,,,, 짜증이가 난다..!

디버깅

Response나 Request DTO 에서 @Serilizaion 어노테이션에서 @Suppress("PLUGIN_IS_NOT_ENABLED") 에러가 나는게 수상했음.

찾아보니 kotlin serialization을 사용하기 위해서는,

사용하려는 모듈의 plugin{} 에 kotlin("plugin.serialization") version "1.9.23" 을 추가했어야 했음.

여기서 그럼, plugin을 import할 때 뒤에 항상 붙는 apply false를 붙이지 않는 이유가 궁금했음.

음... 그렇다고 한다...! 하하...

4. StateFlow<MutableList>를 사용하면 Compose가 변화를 인지하지 못해요.

MutableLIst<T> 와 같이 mutable한 객체를 이용하여 값을 add 시키면 compose는 이의 값 변화를 인지하지 못하고 Recomposition을 유발하지 않는다.

현재 OpenAi Api를 호출함으로써 응답되는 AI응답 답변을 계속해서 mutableList<T>에 저장해야했고,

이를 계속 LazyColumn 이 받아먹으면서 자동으로 그려지는 이상적인 모습을 원했다.

하지만, ViewModel에서 StateFlow<MutableList<T>>를 사용할 때에는, 데이터는 제때 들어가지만

별도로 리컴포지션을 일으키는 행위를 추가적으로 해야지만 말풍선이 업데이트가 되었다.

디버깅

mutable한 객체를 immutable하게 만들면 된다.

예를 들어,

// BAD
@Composable
fun NamesList() {
    val names by remember {
        mutableStateOf(mutableListOf<String>())
    }

    LazyColumn {
        item {
            Button(onClick = { names.add("Hans") }) {
                Text(text = "Add name")
            }
        }
        items(names) { name ->
            Text(name)
        }
    }
}

이라는 코드는

// GOOD
@Composable
fun NamesList() {
    var names by remember {
        mutableStateOf(listOf<String>())
    }

    LazyColumn {
        item {
            Button(onClick = { 
                names = names + "Hans"
            }) {
                Text(text = "Add name")
            }
        }
        items(names) { name ->
            Text(name)
        }
    }
}

로 MutableList + add() 에서 List 으로 치환해서 사용할 수 있다.

하지만 더 좋은 방안이 있는데,

그것은 공식문서 코드랩에서 소개하는 mutableStateList를 사용하는 것이다.

mutableStateList는 관찰가능한 MutableList의 역할을 해주는 나이쓰한 아이이다.

• 레퍼런스 1
• 레퍼런스 2

5. LazyColumn 마지막 item으로 스크롤 하는 방법

1 이전 채팅의 텍스트 사이즈를 저장해둠

2. 새로운 채팅이 들어왔을 때, 현재 사이즈와 다를경우, 마지막 아이템의 인덱스로 스크롤 함.

    val listState = rememberLazyListState()
    var previousChatSize by remember { mutableStateOf(1) }
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(chatLog) {
        if (previousChatSize != chatLog.size) {
            coroutineScope.launch {
                listState.animateScrollToItem(chatLog.size - 1)
            }

            previousChatSize = chatLog.size
        }
    }

LazyColumn(
                state = listState,
                verticalArrangement = Arrangement.spacedBy(20.dp),
                contentPadding = PaddingValues(horizontal = 25.dp),
                modifier = Modifier
                    .fillMaxSize()
                    .padding(top = topBarHeight, bottom = textFieldHeight),
            ) {