기존에는 Gradle에 라이브러리를 추가할때

implementation 'com.squareup.retrofit2:retrofit:(version)'

이런식으로 추가를 하고있었는데 다른 오픈 프로젝트 분석을 하다가 발견을 했다.

implementation(libs.hilt.android)

이런식으로 Gradle에 추가를 하고 있었는데 libs? 이게 뭐길래 다 저기서 등록하는 걸까? 라는 생각을 갖게 되었고 구글링을 해보니 toml 파일에서 쉽게 관리를 할 수 있다는것을 알게 되었다.

Toml 사용법

프로젝트단에 gradle에 libs.versions.toml 파일을 추가해주시면됩니다.

[versions]
agp = "8.3.2"
kotlin = "1.9.22"
kotlinxCoroutines = "1.7.3"
kotlinxSerializationJson = "1.6.2"
ksp = "1.9.22-1.0.18"
coreKtx = "1.13.0"
retrofit = "2.9.0"
...

[libraries]
...
androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "appcompat" }
material = { group = "com.google.android.material", name = "material", version.ref = "material" }
hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
hilt-compiler = { group = "com.google.dagger", name = "hilt-android-compiler", version.ref = "hilt" }
hilt-android-testing = { group = "com.google.dagger", name = "hilt-android-testing", version.ref = "hilt" }
kotlinx-coroutines-android = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-android", version.ref = "kotlinxCoroutines" }
kotlinx-coroutines-test = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-test", version.ref = "kotlinxCoroutines" }
retrofit-core = { group = "com.squareup.retrofit2", name = "retrofit", version.ref = "retrofit" }
retrofit-gson = { group = "com.squareup.retrofit2", name = "converter-gson", version.ref = "retrofit" }
...


[plugins]
androidApplication = { id = "com.android.application", version.ref = "agp" }
jetbrainsKotlinAndroid = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
androidLibrary = { id = "com.android.library", version.ref = "agp" }
ksp = { id = "com.google.devtools.ksp", version.ref = "ksp" }
hilt = { id = "com.google.dagger.hilt.android", version.ref = "hilt" }
kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

toml은 4개로 구성되어 있는데 저는 우선 3개만 쓰고 있습니다.

[versions] 해당 라이브러리의 버전을 관리할 수 있습니다.

composeOptions {
        kotlinCompilerExtensionVersion = libs.versions.androidxComposeCompiler.get()
    }

이런식으로 composeOptions에서 코틀린컴파일러버전도 따로 관리가 가능해서 좋습니다. get()하면 해당 버전을 읽어옵니다.

[libraries] 실질적으로 라이브러리의 주소가 들어가는 곳 입니다. 위에 적은 retrofit2로 예시를 들어보겠습니다.

implementation 'com.squareup.retrofit2:retrofit:2.9.0'

group = "com.squareup.retrofit2" name = "retrofit" version = retrofit << 위에서 정의한 버전을 가져다가 쓰면 됩니다.

retrofit-core = { group = "com.squareup.retrofit2", name = "retrofit", version.ref = "retrofit" }

이런식으로 작성을 하시면 됩니다.

api(libs.retrofit.core)

그리고 gradle에서 이렇게 작성하고 Sync Now 해주시면 됩니다.

[plugins]

plugins {
   id("com.android.application") version "8.3.2" apply false

}

plugins {
   id("com.android.application")

}

기존에 plugins도 위와 같이 작성이 가능합니다.

androidApplication = { id = "com.android.application", version.ref = "agp" }

->
alias(libs.plugins.androidApplication) apply false

이런식으로 바꿔서 적용을 할 수 있습니다.

[bundles]

retrofit = [
    "retrofit-core",
    "retrofit-converter-gson"
]

번들에서 따로 retrofit만 넣을 수 있습니다.

 implementation(libs.bundles.retrofit)

이렇게 넣으면 retrofit 번들로 꾸려진 건 한번에 적용이 됩니다.

후기

개인적인 생각으로는 싱글모듈앱에서는 사용하면 좋고 아니어도 괜찮은 느낌이다. 하지만 앱의 확장성을 생각한다면 해주는 편이 관리하기가 수월한 것 같다.

최근에 멀티모듈로 구성한 앱을 개발할 때 toml로 사용을 해봤는데 처음 설정만 해놓으면 꾸준히 앱을 관리하는 측면에서 훨씬 수월한것 같다.

앞으로도 toml로 계속 쓰게될 것 같다.

Toml 쉽다! 편하다!

참고 https://developer.android.com/build/migrate-to-catalogs?hl=ko#kts

나는 기본적으로 내가 보고 사용하는 것에 갑자기 "이건 어떻게 만들었을까?"에 대한 막연한 궁금증을 가질 때가 종종 있다. 이번에 글을 쓰게 된 이유도 그 중 하나이다.

지금은 한국에서 서비스를 하고 있지 않은 앱인 Twitch를 자주 봤었는데 지금은 다 치지직으로 갔다 나는 영상보다 채팅창의 구현이 너무나 궁금했었다.

그 이유는 글자들 사이에 이모티콘이 있고 또는 이미지, Gif가 있었기 때문이다.

그 당시 내가 상상으로 구현을 해본다고 쳤을 때 나였다면 이렇게 구현했을 것 같다라고 생각했었다.

내가 생각했던 방식은 View가 있고 들어온 String에 따라 특정 태그같은걸로 Text와 Image를 나눠서 동적으로 뷰를 만드는 방식으로 생각을 했었다.. 지금 생각하면 참 어려운 방식으로 만들었다 라고 생각이 된다.. (멍청한 생각)

Text

@Composable
fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

이전에 내가 생각했던 방식보다 훨~~씬 쉬운 방식으로 해당 채팅화면을 구현을 할 수 있었다.

Text 하나만으로 해당 채팅화면을 구현을 할 수가 있다.

치지직이나 트위치의 경우

(구독자여부) (아이디) :(치지직의 경우는 이게 없음) Text bla bla (이모티콘) (구독티콘)

이런식으로 텍스트가 있다.

Text에서 그럼 어떤것을 사용해야 하나라고 보면

text: AnnotatedString, inlineContent: Map<String, InlineTextContent> = mapOf()

이 두 개가 Text안에서도 이미지나 Gif를 그리게 해준다.

AnnotatedString은??

• 스타일링: AnnotatedString을 사용하여 텍스트의 일부 또는 전체에 서로 다른 서식을 적용할 수 있습니다. 예를 들어, 특정 텍스트를 볼드체로 하거나 색상을 변경하는 등의 서식을 지정할 수 있습니다.

• 링크 및 클릭 이벤트: AnnotatedString을 사용하여 특정 텍스트를 하이퍼링크로 만들고 클릭 이벤트를 처리할 수 있습니다. 이를 통해 사용자가 특정 텍스트를 클릭했을 때 원하는 작업을 수행할 수 있습니다.
• 커스텀 서식 지정: AnnotatedString은 사용자 정의 서식 태그를 정의하고 이를 사용하여 특정 텍스트 부분에 사용자가 정의한 서식을 적용할 수 있습니다. 이를 통해 특정 텍스트에 사용자 정의 서식을 적용하여 복잡한 텍스트 서식을 구현할 수 있습니다.

ChatGPT가 알려준 내용입니다.

코드로 알아보겠습니다 !

 val annotatedString = buildAnnotatedString {
        append("Text에 이미지를 추가하기 !")
        appendInlineContent(id = "image")
    }

 val inlineContentMap = mapOf(
      "image" to InlineTextContent(
          Placeholder(40.sp, 40.sp, PlaceholderVerticalAlign.TextCenter)
      ) {
          GlideImage(
              modifier = Modifier.fillMaxSize(),
              model = ContextCompat.getDrawable(context, R.mipmap.doridori),
              contentDescription = ""
          )
      },
  )

  Text(
        modifier = Modifier.height(50.dp),
        text = annotatedString,
        inlineContent = inlineContentMap,
     )

"image" to inlineContentMap image와 일치하는 부분이 있다면 GlideImage를 통해 이미지 작업을 진행시켜줍니다.

이번에는 여러개의 이미지를 넣어보겠습니다. 방법은 아까와 똑같습니다.

    val annotatedString2 = buildAnnotatedString {
        append("Text 중앙에 이미지를 삽입해보겠습니다.")
        appendInlineContent(id = "ryo")
        append("GIF를 \n추가하였습니다.")
        appendInlineContent(id = "image2")
    }

    val inlineContentMap2 = mapOf(
        "ryo" to InlineTextContent(
            Placeholder(40.sp, 40.sp, PlaceholderVerticalAlign.TextCenter)
        ) {
            GlideImage(
                modifier = Modifier.fillMaxSize(),
                model = ContextCompat.getDrawable(context, R.mipmap.ryo),
                contentDescription = ""
            )
        },

        "image2" to InlineTextContent(
            Placeholder(40.sp, 40.sp, PlaceholderVerticalAlign.TextCenter)
        ){
            GlideImage(
                modifier = Modifier.fillMaxSize(),
                model = ContextCompat.getDrawable(context, R.mipmap.iiyo),
                contentDescription = ""
            )
        }

    )

    Text(
        modifier = Modifier.height(50.dp),
        text = annotatedString2,
        inlineContent = inlineContentMap2
    )

Text의 sp의 사이즈보다 이미지가 살짝커서 텍스트가 살짝 잘렸지만 보통이라면 Text사이즈랑 image 사이즈랑 같게해주면 안잘린다.

skydoves님의 트위치 클론 코딩을 보면 맵핑을 하는 부분만 살짝 보겠습니다.

@Composable
fun TwitchMessageItem(
  messageItemState: MessageItemState,
  modifier: Modifier = Modifier
) {
  val badges = messageItemState.message.user.badges
  val badgePath = "${AssetUtils.baseUrl}/badges/"

  val badgesContent = badges.associateWith { badgeName ->
    InlineTextContent(
      Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
    ) {
      CoilImage(
        modifier = Modifier
          .fillMaxSize()
          .padding(2.dp),
        imageModel = { "$badgePath/$badgeName" }
      )
    }
  }
  val userSpannable = buildUserSpannableText(messageItemState = messageItemState)
  val (inline, messageText) = messageItemState.message.text.trim().transformText()
  val previewText = userSpannable + messageText

  Text(
    modifier = modifier.padding(vertical = 2.dp),
    text = previewText,
    color = ChatTheme.colors.textHighEmphasis,
    inlineContent = badgesContent + inline
  )
}

private fun buildUserSpannableText(messageItemState: MessageItemState): AnnotatedString {
  val message = messageItemState.message
  val user = messageItemState.message.user
  val badges = user.badges
  val userColor = user.nameColor

  return buildAnnotatedString {
    badges.forEach { badge ->
      appendInlineContent(id = badge)
    }

    if (badges.isNotEmpty()) {
      append(" ")
    }

    val nameStart = this.length

    append(message.user.name)

    val nameEnd = this.length

    addStyle(
      style = SpanStyle(
        color = Color(android.graphics.Color.parseColor(userColor)),
        fontWeight = FontWeight.SemiBold
      ),
      start = nameStart,
      end = nameEnd
    )

    append(": ")
  }
}

fun String.transformText(): Pair<Map<String, InlineTextContent>, AnnotatedString> {
  val emotes = AssetsProvider.reactions
  val emoteKeys = emotes.keys
  val parts = this.split(" ")
  val addedEmotes = parts.filter { it in emotes }

  val inlineContent = addedEmotes.associateWith { badgeName ->
    InlineTextContent(
      Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
    ) {
      CoilImage(
        modifier = Modifier
          .fillMaxSize()
          .padding(2.dp),
        imageModel = { AssetUtils.getEmotePath(emotes[badgeName]) }
      )
    }
  }

  val annotatedString = buildAnnotatedString {
    for (part in parts) {
      if (part in emoteKeys) {
        appendInlineContent(id = part)
      } else {
        append(part)
      }

      if (parts.indexOf(part) != parts.lastIndex) {
        append(" ")
      }
    }
  }

  return inlineContent to annotatedString
}

associateWith를 통해 <K,V>로 Return을 받은 badgesContent(구독 또는 아이디 앞에오는 것)와 inline(이모티콘류 채팅에 써질 것)을 inlineContent에 담고 Text전문을

val previewText = userSpannable + messageText

합친 후에

  Text(
    modifier = modifier.padding(vertical = 2.dp),
    text = previewText,
    color = ChatTheme.colors.textHighEmphasis,
    inlineContent = badgesContent + inline
  )

이런식으로 Text를 만들어 내면 됩니다.

이걸 이제 LazyColumn과 같은 Recyclerview의 역할을 하는 곳에 담은 뒤

list된 item들을 뿌려주면 됩니다.

아마 실제 서비스를 한다면 아마도 inlineContent이 부분을 API 통신을 통해 list들을 가져오지 않을까 싶습니다.

맵핑을 어떻게 할 것인지는 개발자 마음입니다. skydoves님처럼 associateWith로 Map<K,V>식으로 깔끔하게 리턴받는 형식이 괜찮은 것 같습니다.

Kotlin Collections API에 대해 한 번 알아보고 원하는 걸 쓰시면 될 것 같습니다!

빨리 찾아볼걸 ~ 근데 뭐라 검색해야 할지도 감이 안와서 잘 못찾았었다.. 혹시라도 더 좋은 방법으로 채팅창 구현을 하셨다면 알려주시면 감사하겠습니다 !!

참고 https://github.com/skydoves/twitch-clone-compose (트위치 클론 코딩 message쪽을 보면서 분석을 했는데 도움이 많이되었습니다.) https://velog.io/@heetaeheo/Android-AnnotatedString https://developer.android.com/reference/kotlin/androidx/compose/ui/text/AnnotatedString https://seosh817.tistory.com/222

기존에 개발했던 메이플스토리 검색앱에서 사용하던 LiveData를 Flow로 변환하면서 알게된 내용입니다. 틀린 부분이 있으면 알려주세요!

LiveData의 문제점

처음 MVVM구조를 만들면서 ViewModel을 만들고 그거를 이제 observe하면서 데이터가 바뀐 것을 읽는 형식으로 만들었습니다.

LiveData의 장점

• LiveData는 수명 주기를 자동으로 인식하고, 활성 상태인 관찰자만 업데이트를 수신합니다. 이를 통해 메모리 누수나 UI 갱신 오류를 방지할 수 있습니다.
• 데이터가 변경될 때마다 관찰자에게 알림을 제공하여 UI를 업데이트할 수 있습니다. 이는 데이터의 실시간 업데이트를 지원하며, 사용자 경험을 향상시킵니다.
• LiveData는 구성 변경(예: 화면 회전)에 대한 데이터 손실을 방지하고 앱 상태를 보존하는 데 도움이 됩니다.

보통 이런식으로 계층구조를 만들어서 사용을 하는데 LiveData 같은 경우 Domain Layer에서 사용하는걸 추천하지 않습니다. 보통은 Flow로 하는걸 추천을 하더라구요. 이유는 Domain Layer는 Java와 Kotlin 코드로만 구성하는 것이 좋으며 LiveData를 사용하게 되면 그 순간부터 Android에 의존적일수 있기에 단위테스트를 따로해야하는 경우가 생길 수 있습니다.

구글 공식 문서에서도 Flow로 만든 다음 asLiveData()로 변환해서 사용하는걸로 작성이 되어있습니다.

데이터 영역 클래스에서 LiveData 객체를 작업하고 싶을 수 있지만 LiveData는 비동기 데이터 스트림을 처리하도록 설계되지 않았습니다. LiveData 변환과 MediatorLiveData를 사용하여 LiveData 객체 작업을 할 수는 있지만 이 접근 방식에는 단점이 있습니다. 즉, 데이터 스트림을 결합하는 기능이 매우 제한적이고 변환을 통해 만들어진 객체를 포함하여 모든 LiveData 객체가 기본 스레드에서 관찰됩니다.

간단히 말하면 LiveData는 비동기에서 쓰기에 적절하지 않다.

그래서 저는 제가 개발했던 앱을 LiveData로 되어있던 Domain Layer 계층을 Flow로 바꿀 생각을 하고 있었습니다. 그래서 Coroutine에 대해 알아보고 Flow에 대해 알아보던 중 StateFlow에 대해 알게 되었습니다. 그 전에 Flow에 대해 간단하게 알아보고 가겠습니다.

Flow가 뭔가요??

Flow는 말 그대로 데이터의 흐름들 속에서 데이터를 처리, 변환 할 수 있으며 비동기 데이터 스트림을 처리할 수 있습니다.

기본적으로 데이터를 생산(emit)하고 소비(collect)하는데 사용됩니다.

특징

• 비동기성(Asynchronous): Coroutine Flow는 비동기적으로 데이터를 처리하며, 데이터가 생산되는 즉시 소비될 수 있습니다.
• 확장성(Scalability): 여러 개의 연산자(operator)를 조합하여 데이터를 변환하고 처리할 수 있으며, 비동기적으로 실행됩니다.
• 취소 가능성(Cancellable): 코루틴의 취소 기능을 활용하여 데이터의 생산과 소비를 취소할 수 있습니다.
• 배압 제어(Backpressure): Flow의 생산자와 소비자 간의 속도 차이를 조절하여 메모리 부하를 방지하고 안정적인 데이터 흐름을 유지할 수 있습니다.

Flow는 기본적으로 Cold Stream 입니다.

Cold Stream이 뭔데?

Flow 단점

• Flow는 안드로이드 생명주기에 대해 알 수 없습니다.
• 생명주기에 대해 알 수가 없다 보니 화면 회전, 화면 이동 등의 이벤트로 인해 화면이 재생성될 때마다 새로운 구독자가 등록될 수 있습니다. 이 경우, 이전 구독자가 여전히 활성화되어 있을 수 있으므로 메모리 누수가 발생할 수 있습니다.
• Flow는 Cold Stream의 한 형태이기 때문에 새로운 구독자가 등록될 때마다 데이터를 처음부터 다시 생성합니다. 이로 인해 데이터가 불필요하게 캐싱되거나 중복으로 처리되는 문제가 발생할 수 있습니다.

이러한 문제점이 있었습니다. 그래서 Flow로 받아서 asLiveData()로 변환해서 LiveData로 사용하고 있었습니다.

StateFlow의 등장

StateFlow는 SharedFlow 의 한 종류이며 Hot Stream의 성격을 가지고 있습니다.

사용하다보면 LiveData와 비슷하다고 느꼈는데 가장 큰 차이점은 StateFlow는 기본 값을 가지고 있다인 것 같습니다.

StateFlow 특징

• 항상 값을 가지고 있고, 오직 한 가지 값을 가집니다. 그렇기 때문에 생성할 때 기본값을 넣어줘야합니다.
• StateFlow는 Hot Stream의 한 형태이므로 여러 구독자가 공유된 데이터 스트림을 동시에 구독할 수 있습니다.
• StateFlow는 불변성 상태 값을 유지하므로 데이터의 변경을 실시간으로 반영할 수 있습니다.

이러한 특징들로 인해 LiveData를 대체할 수 있습니다.

제가 사용했던 코드를 보면서 마무리 하겠습니다.

MainViewModel.kt

@HiltViewModel
class MainViewModel @Inject constructor(private val userRepository: UserRepository) : ViewModel() {
    //기본값을 넣어줘야한다.
    private val _userData = MutableStateFlow(ResultVO())

    val userData: StateFlow<ResultVO> get() = _userData

    private val _errorLiveData = MutableStateFlow("")
    val errorLiveData: StateFlow<String> get() = _errorLiveData
    fun clearErrorData() {
        _errorLiveData.value = ""
    }


    fun getUserData(id: String) {
        viewModelScope.launch {
            try {
                //가져온 데이터를 발행(emit)
                _userData.emit(userRepository.getUserData(id))
                clearErrorData()
            } catch (e: Exception) {
                _errorLiveData.emit(e.message.toString())
            }
        }
    }
}

MainView.kt

@Composable
fun ParallaxEffect(
    navigateBack: () -> Unit,
    id: String?,
) {
    ...

    val viewModel: MainViewModel = hiltViewModel()
    val likeCharacterViewModel: LikeCharacterViewModel = hiltViewModel()
    val recentSearchViewModel: RecentSearchViewModel = hiltViewModel()

    val userData by viewModel.userData.collectAsState()
    val errorData by viewModel.errorLiveData.collectAsState()

    ...

    if (errorData.isNotEmpty()) {
           SearchFailedDialog(
           errorData = errorData.toString(),
           onDismiss = { viewModel.clearErrorData() })
      }

      MainAvatar(userData = userData)

}

사용방법은 LiveData와 거의 유사합니다.

참고

https://developer.android.com/topic/architecture?hl=ko https://medium.com/@apfhdznzl/flow%EC%99%80-channel-cold-stream%EA%B3%BC-hot-stream-c42c64cf4996 https://www.youtube.com/watch?v=6z3QjG7vLkE&ab_channel=%EA%B0%9C%EB%B0%9C%ED%95%98%EB%8A%94%EC%A0%95%EB%8C%80%EB%A6%AC

2018년도? 쯤에 한 번 해봤었는데 이해가 잘 가지 않아서 손을 놨었다.

최근에 코틀린으로 Android를 개발하다가 iOS도 개발해보고 싶은 마음은 있는데,

뭔가 맥북 사기가 좀 그래서 고민만 하던 찰나 Nomad에서 클론코딩을 보면서 따라서 해보고 있는데 이게 생각보다 재밌다.

이론 -> 실전 보다 실전 -> 이론을 더 좋아한다. (일단 화면에 돌아가게 만들어놓고 이게 어떻게 돌아가는 방식인지 확인하는 경우가 많다.)

그러다보니 잘 따라가게 된 것같다.

매일 코딩이 과제가 있는건 아니고 종종 있는데 새로운 언어로 개발을 하다보니 신선한 느낌??을 받았다.

후기

처음은 UI에 대한 과제이고 그다음은 Timer를 이용한 간단한 뽀모도로 앱을 개발하는 것이였다.

사실 Flutter를 개발하면서 궁금한게 많아서 이것저것 인터넷을 많이 참고했다.. 과제랑 상관이 없는 것들이 대부분이다.

메모리 관리나 Thread는 어떻게 관리하는지 궁금한게 있긴했는데 아직 그 정도의 레벨은 아니라서 lifeCycle 정도만 찾아봤다.

Android에서 lifeCycle하고 조금 다르다는걸 알았다..

약간 Compose와 비슷한 느낌이 있다.

이번주까지가 일정이라 한 번 다 배워보고 정리를 하는 글을 올릴 것 같다.

간단한 앱을 만들 때는 괜찮은 것 같다.. 굳이 Kotlin 쓰고 swift 써가며 할 필요가 없는 이유가 있긴 한 것 같다.

그래도 난 아직도 Native가 장점이 있다고 생각한다. + a 느낌으로 배워서 하면 좋을 것 같다.

Coroutine이 뭘까?

Coroutine에 대해 알기전에 routine이 뭔지를 알면 좋습니다.

routine이란?

컴퓨터 프로그램의 일부로서, 특정한 일을 실행하기 위한 일련의 명령.

위키피디아에 등재된 내용입니다.

한마디로 루틴은 어떠한 일을 하기 위한 프로그램?? 정도로 이해하고 넘어가면 좋을 것 같습니다.

그리고 코루틴을 사용하기 전에는 우리는 서브루틴이라는 방식으로 개발을 하였습니다.

fun routine() {
    routine1()
    routine2()
}

fun routine1(){
    print("Hello")
}

fun routine2(){
    print("안녕하세요")
}

routine 함수는 routine1의 "Hello"를 print하고 다시 메인 루틴이 호출한 장소로 돌아와 다음 루틴인 routine2 "안녕하세요"를 print하고 다시 메인 루틴이 호출한 장소로 돌아와 다음 루틴을 실행한다.

그러면 Coroutine은 무엇일까?

Coroutine은 일시 중단과 재개가 가능한 루틴이며 특정 Thread에 결합되어 있지 않으며 하나의 Thread에서 중단하고 다른 Thread에서 재개가 가능합니다.

출처 : https://gist.github.com/chaxiu/d87870528bbfe3e9d7e481e1f6acace1

위와 같이 Main Thread는 log를 찍어주고 네트워킹 작업같이 오래걸리는 작업은 IO Thread가 하고 있다.

중단(suspend) 어떻게 작동할까 ? 해당영상을 간략히 요약하면 suspension point라는게 있는데 이것은 게임의 check-point의 기능과 비슷합니다. suspended 상태에서는 어떠한 자원도 사용하지 않음(Coroutine이 효율적인 이유)

기존의 Thread에서는 block을 걸면 자원을 사용하지 못하게 점유를 하고 있지만 Coroutine은 그렇지 않다. 또한 서로 다른 Thread에서 suspend와 resume이 가능하다.

suspent funtion이라고 모두가 중단 가능한 함수는 아니다.

CoroutineContext

코루틴이 실행될 때 실행 환경을 정의하고 구성합니다. (CoroutineContext = Coroutine 실행환경)

• Job, CoroutineName, CoroutineDisPatcher, CoroutineExceptionHandler 등이 있다.
• 모든 CoroutineScope와 Suspend function을 가지고 있음
• CoroutineContext가 포함하는 모든 element는 unique key를 가진다. (중복허용 X)

** 모든 suspend function에서는 CoroutineContext에 접근이 가능하다. **

1. suspend function은 컴파일 시 Continuation을 파라미터로 추가해줍니다.
2. Continuation은 CoroutineContext를 가집니다.
3. 모든 suspend function은 current coroutine의 Context에 접근이 가능합니다.

CoroutineScope

• child는 parent를 상속합니다.
• parent는 모든 children이 끝날 때 까지 기다립니다.
• parent가 취소되면, children도 취소됩니다.
• child에서 에러가 발생하면 parent에게도 전파가 됩니다.
• launch(), async()는 CoroutineScope의 확장 함수입니다.
• runBlocking()은 오직 root coroutione으로 사용이 됩니다. (CoroutineScope의 확장 함수 X)

CoroutineScope도 CoroutineContext를 가지고 있습니다.

public interface CoroutineScope {
    /**
     * The context of this scope.
     * Context is encapsulated by the scope and used for implementation of coroutine builders that are extensions on the scope.
     * Accessing this property in general code is not recommended for any purposes except accessing the [Job] instance for advanced usages.
     *
     * By convention, should contain an instance of a [job][Job] to enforce structured concurrency.
     */
    public val coroutineContext: CoroutineContext
}

드로이드나이츠에 있는 영상을 정리한 글인데요. 다른 영상은 안보셔도 Android 개발을 하신다면 한 번쯤 보시는걸 추천드립니다.

감사합니다.

참고자료

https://www.youtube.com/watch?v=x0KY6qtuNHg&ab_channel=DroidKnights https://gist.github.com/chaxiu/d87870528bbfe3e9d7e481e1f6acace1 https://dev.gmarket.com/82 https://developer.android.com/kotlin/coroutines?hl=ko https://www.youtube.com/watch?v=eJF60hcz3EU&ab_channel=%EB%8B%B9%EA%B7%BC%ED%85%8C%ED%81%AC

Hilt는 Dagger를 기반으로 한 Android용 의존성 주입(Dependency Injection) 프레임워크로 입니다. 안드로이드 애플리케이션에서 의존성 주입을 쉽게 구현할 수 있도록 도와주는 도구입니다.

💉DI (Dependency Injection)

의존성 주입(Dependency Injection, DI)은 소프트웨어 개발에서 객체 간의 의존성을 외부에서 주입하는 디자인 패턴입니다. 이를 통해 코드의 유연성과 테스트 용이성이 향상되며, 코드의 결합도를 낮출 수 있습니다.

class Engine {
    fun start() {
        println("Engine started")
    }
}

class Car(private val engine: Engine) {
    fun start() {
        engine.start()
        println("Car started")
    }
}

val e = Engine()
val car = Car(e)
car.start()

위와 같이 생성자로 engine을 받아서 사용하면 됩니다.

저는 처음에는 무슨소리인지 잘 모르겠어서 "생성자나 인터페이스 같은 것을 통해 클래스간의 결합도를 낮춘다" 정도로 이해를 하고 넘어갔습니다.

큰 장점은 본인이 생각하기에 2가지가 있는 것 같습니다.

• 모듈성 및 재사용성: DI를 통해 코드는 모듈로 나눠질 수 있습니다. 각 모듈은 독립적으로 테스트하고 재사용할 수 있게 되어 코드 베이스를 더 쉽게 관리하고 확장할 수 있습니다.

• 가독성 및 유지보수성: DI는 코드의 가독성을 향상시킵니다. 의존성이 외부에서 주입되기 때문에 코드의 의도가 더 명확해지며, 이는 향후 유지보수에 큰 도움이 됩니다.

Hilt 사용해보기

Hilt는 기존의 Dagger에서 장점을 Android에 LifeCycle에 맞게 Google이 만든 라이브러리입니다. Dagger2 보다 낮은 러닝커브 쉬운 환경설정으로 인해 Android에서 인기가 많은 것 같습니다.

프로젝트에 Hilt를 적용하는 방법은 해당 링크에서 확인해주세요.

class Engine @Inject constructor() {
    fun start() {
        println("Engine started")
    }
}

class Car @Inject constructor(private val engine: Engine) {
    fun start() {
        engine.start()
        println("Car started")
    }
}

의존성이 있는 클래스를 생성

@HiltAndroidApp
class MyApplication : Application()

@Module
@InstallIn(SingletonComponent::class)
object AppModule {
    @Provides
    fun provideEngine(): Engine {
        return Engine()
    }
}

기본 Application에 추가를 해줘야합니다. Application이 없는 경우 만든 후에 manifest에서 등록을 해주세요.

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {

    @Inject
    lateinit var car: Car

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        car.start()
    }
}

위의 코드에서 @HiltAndroidApp 어노테이션이 지정된 MyApplication 클래스는 Hilt의 초기화를 담당합니다. @AndroidEntryPoint 어노테이션이 지정된 MainActivity 클래스에서는 Car 객체를 주입받아 사용합니다.

Hilt는 Android 컴포넌트 (예: Application, Activity, Fragment)에 의존성을 주입하는 데 사용되는 @AndroidEntryPoint 어노테이션과 같은 특별한 어노테이션을 제공합니다.

Hilt에 대한 계층구조와 어노테이션에 대한 건 다음 포스팅에 이어서 올리도록 하겠습니다.

참고자료

Google Document Medium 블로그

AAC의 하나인 Room은 기존에 SQLite를 좀 더 쉽게 쓸 수 있게 만든거라고 생각하시면 됩니다.

주요 구성 요소 Room에는 세 가지 주요 구성요소가 있습니다.

• 데이터베이스를 보유하고 앱의 지속형 데이터에 대한 기본 연결을 위한 기본 액세스 지점 역할을 하는 데이터베이스 클래스 입니다.
• 앱 데이터베이스의 테이블을 나타내는 Data Entity입니다 .
• 앱이 데이터베이스의 데이터를 쿼리, 업데이트, 삽입 및 삭제하는 데 사용할 수 있는 메서드를 제공하는 데이터 액세스 개체(DAO) 입니다.

Google Document에 있는 내용입니다.

Room에서 필요한 3가지 요소를 나타낸 것 입니다.

DataBase, Data Entity, DAO가 있습니다.

간단하게 알아보겠습니다.

1.데이터 베이스

@Database(
    entities = [LikeCharacterVo::class, RecentSearchVO::class],
    version = 2,
    exportSchema = false
)
abstract class AppDatabase : RoomDatabase() {
    abstract fun likeCharacterDao(): LikeCharacterDao

    abstract fun recentSearchDao(): RecentSearchDao
}

entities는 간단히 말하면 Table의 역할을 합니다.

version은 변경사항이 생길 때 하나씩 올려주면됩니다. 올리지 않고 빌드를 한다면 에러를 마주칠 것입니다.

exportSchema는 Room의 스키마를 폴더로 내보내도록 지시할 수 있습니다.

2.엔티티

@Entity(tableName = "like_table", indices = [Index(value = ["nickName"], unique = true)])
data class LikeCharacterVo(
    @PrimaryKey(autoGenerate = true)
    val id : Long = 0,
    val nickName: String,
    val imgUrl: String,
    val level : String
)

이번에 메이플스토리 관련 앱을 만들면서 쓰던 캐릭터 즐겨찾기의 엔티티 구조입니다.

우선 Table Name을 정해주고 indices 속성에 nickName필드를 unique 고유 속성으로 만든 엔티티입니다. 만일 닉네임이 같은 경우 추후 Insert를 하게 되면 에러가 난다거나 덮어쓰기를 한다거나 개발자가 정해준 방식을 취할 것 입니다. 하지만 제가 만든 앱은 메이플에서 닉네임을 생성할 때 중복이 방지되므로 저는 덮어쓰기 방식을 채택했습니다. 나머지 필드들은 자기가 넣어주고 싶은 필드들을 넣어주시면 됩니다.

@PrimaryKey(autoGenerate = true)
    val id : Long = 0

이 부분은 보통 index로 많이 쓰는 부분입니다. 자동으로 카운트가 됩니다.

3.DAO (Data Access Objects)

@Dao
interface LikeCharacterDao {
    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertLickCharacter(likeCharacterVo: LikeCharacterVo)

    @Query("SELECT * FROM like_table")
    fun getAllLikeCharacter(): LiveData<List<LikeCharacterVo>>


    @Query("DELETE FROM like_table WHERE nickName = :nickName")
    suspend fun deleteData(nickName: String)

    @Query("SELECT * FROM like_table WHERE nickName = :name")
    fun getCharacterByName(name : String): LikeCharacterVo?
}

즐겨찾기 Dao입니다.

Dao는 테이블에 접근하려고 하는 object? 정도 라고 생각하시면 편할 것 같습니다.

사실 Update도 만들어야 하지만 insert를 할 때

onConflict = OnConflictStrategy.REPLACE

Insert에 옵션을 주면 해당 옵션은 중복값이 있을 때 교체를 한다는 뜻입니다.

그래서 저는 따로 Update는 만들지 않았습니다.

@Module
@InstallIn(SingletonComponent::class)
object DatabaseModule {
    @Singleton
    @Provides
    fun provideAppDatabase(@ApplicationContext context: Context): AppDatabase {
        return Room.databaseBuilder(
            context,
            AppDatabase::class.java,
            "LikeCharacterDatabase"
        ).build()
    }

    @Provides
    fun provideLikeCharacterDao(database: AppDatabase): LikeCharacterDao {
        return database.likeCharacterDao()
    }

}

DB객체는 싱글톤으로 구현하는 걸 추천하고 있습니다. 공식문서를 참조해주세요.

@HiltViewModel
class LikeCharacterViewModel @Inject constructor(private val likeCharacterRepository: LikeCharacterRepository) : ViewModel() {
    private val _characterData = MutableLiveData<List<LikeCharacterVo>>()
    val characterData: LiveData<List<LikeCharacterVo>> get() = _characterData

    fun insertLikeCharacter(name: String, imgUrl: String, level : String) {
        viewModelScope.launch {
            try {
                val likeCharacterVo = LikeCharacterVo(nickName = name, imgUrl = imgUrl, level = level)
                likeCharacterRepository.insertCharacter(likeCharacterVo)
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }

    fun deleteLikeCharacter(name: String) {
        viewModelScope.launch {
            try {
                likeCharacterRepository.deleteUser(name)
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }

    fun getAllList() {
        likeCharacterRepository.getAllCharacterList().observeForever {
            _characterData.value = it
        }
    }

    suspend fun isExistCharacter(name: String): Boolean {
        return withContext(Dispatchers.IO) {
            likeCharacterRepository.isExistCharacter(name)
        }
    }

}

그리고 viewModel로 만들어서 원하는 곳에서 가져다 쓰면 됩니다.

해당 링크를 통해 Room에 대해 더 자세히 알아보시면 좋을 것 같습니다.

예전에는 XML을 사용하면서 Navigation을 사용했었는데 역시 페이지 이동은 Navigation !

기존에는 개발을 할 때 SAA(Single Activity Architecture)로 개발을 했었는데 그러다 보니 단일 또는 소수의 Activity와 나머지 페이지들은 Fragment로 개발을 했었습니다.

그래서 Navigation으로 개발을 했었는데 Compose로 개발을 하다보니 Fragment를 사용하지 않다보니 화면이동은 어떻게 하지?! 생각을 했었는데 역시 화면이동은 Navigation으로 그대로 하고있었습니다.

Navigation Compose

기존에는 Navigation은 nav_graph.xml에 아래와 같은 그림 처럼 그래프만 그어주면 됩니다. 참 쉽게 만들어 놓았습니다.

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/nav_graph"
            app:startDestination="@id/a">

    <fragment android:id="@+id/a"
              android:name="com.example.myapplication.FragmentA"
              android:label="a"
              tools:layout="@layout/a">
        <action android:id="@+id/action_a_to_b"
                app:destination="@id/b"
                app:enterAnim="@anim/nav_default_enter_anim"
                app:exitAnim="@anim/nav_default_exit_anim"
                app:popEnterAnim="@anim/nav_default_pop_enter_anim"
                app:popExitAnim="@anim/nav_default_pop_exit_anim"/>
    </fragment>

    <fragment android:id="@+id/b"
              android:name="com.example.myapplication.FragmentB"
              android:label="b"
              tools:layout="@layout/b">
        <action android:id="@+id/action_b_to_a"
                app:destination="@id/a"
                app:enterAnim="@anim/nav_default_enter_anim"
                app:exitAnim="@anim/nav_default_exit_anim"
                app:popEnterAnim="@anim/nav_default_pop_enter_anim"
                app:popExitAnim="@anim/nav_default_pop_exit_anim"
                app:popUpTo="@+id/a"
                app:popUpToInclusive="true"/>
    </fragment>
</navigation>

이런식으로 xml 코드가 작성이 되어있고 action Id만 가져다 쓰면 됩니다.

하지만 Compose는 xml이 없기 때문에 본인이 직접 작성을 해야하는것 같다.. 원래는 fragment 생성해주고 드래그 쓰윽 ~ 하면 알아서 코드 만들어줬었는데 ㅠㅠ

@Composable
fun Navigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Screen.MainScreen.route) {
        composable(route = Screen.MainScreen.route) {
            MainView(navController = navController)
        }

        composable(
            route = Screen.SearchScreen.route,
            arguments = listOf(navArgument(name = "searchId") {
                type = NavType.StringType
            })
        ) {
            ParallaxEffect(
                navigateBack = {
                    navController.popBackStack()
                },
                id = it.arguments?.getString("searchId", ""),
            )
        }

        composable(route = Screen.LikeScreen.route) {
            LikeCharacterView(navController = navController, navigateBack = {
                navController.popBackStack()
            })
        }

        composable(route = Screen.RecentSearchScreen.route) {
            RecentSearchView(
                navController = navController,
                navigateBack = { navController.popBackStack() }
            )
        }
    }
}

해당 코드는 실제 제가 만든 앱 Navigation 코드입니다.

Navgation을 구성하는 요소

1. NavGraph: 앱의 전체 네비게이션 구조를 정의합니다. NavGraph는 하나 이상의 Destination으로 구성되며, 각 Destination은 화면이나 일부 화면을 나타냅니다. NavGraph에 포함된 각 화면이나 대상을 나타냅니다. Fragment, Activity, 또는 Dialog와 같은 화면을 Destination으로 사용할 수 있습니다.

2. NavController: 현재의 Destination을 추적하고, 목적지 간의 이동을 관리합니다. NavController는 UI 구성 요소와 상호 작용하여 목적지 간의 이동을 쉽게 처리할 수 있게 합니다.

3. NavHost: NavController를 포함하는 UI 요소로, NavGraph의 일부 목적지를 표시하는 곳입니다. 일반적으로 Fragment 또는 Activity에 내장되어 사용됩니다.

보통 이정도만 알면 기본적인 Navigation을 사용하면 됩니다.

composable(route = Screen.MainScreen.route) {
            MainView(navController = navController)
        }

하지만 Compose에서는 따로 XML같은 View가 없기 때문에 이게 NavGarph다! 라고 생각하시면 될 것 같습니다.

Compose에서 Navigation을 사용할 때 Screen들을 정의할 필요가 있습니다.

To link the items in a bottom navigation bar to routes in your navigation graph, it is recommended to define a sealed class, such as Screen seen here, that contains the route and String resource ID for the destinations.

Android Compose Navigation Developer에서 나온 말 인데요. Screen을 정의할 때는 Sealed Class를 사용하는 것을 추천한다고 합니다.

그 이유는 stackoverflow에서 본 글을 참조해주세요.

제가 이해한 바로는 인수가 있는 경우는 Sealed Class로 해놓은 경우가 좋은 방법이라고 합니다.

인수가 없다면 사실 안해도 되는 것 같아요. 다른 외국 유튜브를 봤는데 Sealed Class로 만든 사람들은 잘 없더라구요.. 기초적인 Navigation 방법을 만들어줘서 그런 것 같습니다.

저는 인수로 쓸 경우가 있어서 Sealed Class로 만들어 줬습니다.

sealed class Screen(val route: String) {
    object MainScreen : Screen("main_screen")
    object SearchScreen : Screen("search_screen/{searchId}") {
        fun searchCharacter(searchId: String) = "search_screen/$searchId"
    }

    object LikeScreen : Screen("like_screen")

    object RecentSearchScreen : Screen("recentSearch_screen")

}

아무래도 장점은 저런식으로

fun searchCharacter(searchId: String) = "search_screen/$searchId"

이런 식으로 쓸 수 있다는 게 장점인것 같습니다. 추가, 삭제가 편한 것 같아요.

그래서 Screen들을 정의를 해주고

composable(
            route = Screen.SearchScreen.route,
            arguments = listOf(navArgument(name = "searchId") {
                type = NavType.StringType
            })
        ) {
            ParallaxEffect(
                navigateBack = {
                    navController.popBackStack()
                },
                id = it.arguments?.getString("searchId", ""),
            )
        }

이런식으로 arguments를 넘겨줄 수 있습니다. listOf로 만든 이유는 인자를 여러개를 넘겨줄 때 listOf로 여러개 넣을 수 있습니다.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaSearchTheme {
                Navigation()
            }
        }
    }
}

그리고 마지막으로 MainActivity에서 이렇게 정의를 해주시면 됩니다.

글쓰기가 많이 부족한데 이 글을 읽어주신 분들에게 감사합니다 !
뭔가 기존에 쓰던 Navigation과 같으면서 약간씩 다른 Compose Navigation 기존에 쓰던 분들은 쉽게 배울 것 같습니다. 그리고 기존에 Navigation처럼 이동 할 때 animation을 넣어 줄 수도 있습니다.

참고자료

Google Document StackOverFlow

MVVM은 거의 대부분의 Android 개발을 하다 보면 많이 보는 아키텍처이다. 처음에는 MVVM을 접했을 때 이미 AAC의 ViewModel이 나온 후 였고 MVVM의 대해 알아보려 하면 몇몇 블로그에서 AAC의 ViewModel로 MVVM을 구현을 해놓은 블로그 글들이 몇 개 있다. 그래서 MVVM의 ViewModel이랑 같은 건 줄 알았다. 근데 뭔가 이것만으로는 이해하기에 부족했다. 왜냐하면 ViewModel(AAC)은 Android에서 사용하는건데 MVVM은 MS사에서 만든 아키텍처라는 걸 알았기 때문이다. MVVM개념이 훨씬 먼저 나오기도 했다.

그러다가 원티드에서 챌린지를 참여하게 되었는데 어떤 영상을 보게 되었다. 네이버 2018 테크 콘서트 영상입니다. 오래된 영상이지만 MVVM의 기초를 이해하기에는 좋은 영상인 것 같다. 지금은 XML을 이용해서 개발한 앱이 아니지만 왜 DataBinding이 들어가야하는지 Observer패턴만으로는 왜 반쪽짜리 MVVM인지 잘 설명해주는 영상입니다.

근데 최근 Google을 보면 DataBinding은 2019년 3월에 업데이트 된 게 마지막이다. 사용하는데는 문제는 없지만 ,,

Compose는 선언형 UI 프레임워크이다보니 사실 DataBinding을 사용하지 않고 MVVM 아키텍처를 만드는데 지장이 없다고 생각한다.

MS사의 MVVM을 설명해놓은 이미지이다. ViewModel이 하는 역할을 View에서 Event가 발생하면 Model에게 Update요청을 해달라고하면 Model의 업데이트가 끝나면 다시 역순으로 알려주게된다. 해당 View는 데이터를 구독하는 형태로 있다가 데이터가 바뀌면 화면에서 보여주는 데이터가 바뀌게 된다.

개인적으로 중요하다고 생각되는 부분은 ViewModel은 View에 대해 절대 종속되면 안된다는 것이다. ViewModel은 1:N 관계를 가지는데 어떠한 View 종속되면 나중에 수정이나 재활용하기 어려워진다. 그렇게되면 MVVM을 쓰는 이유가 사라진다.

@HiltViewModel
class MainViewModel @Inject constructor(private val userRepository: UserRepository) : ViewModel() {
    private val _userData = MutableLiveData<ResultVO>()
    val userData: LiveData<ResultVO> get() = _userData

    private val _errorLiveData = MutableLiveData<String>()
    val errorLiveData: LiveData<String> get() = _errorLiveData
    fun clearErrorData() {
        _errorLiveData.value = null
    }


    fun getUserData(id: String) {
        viewModelScope.launch {
            try {
                val result = userRepository.getUserData(id)
                _userData.value = result
                clearErrorData()
            } catch (e: Exception) {
                _errorLiveData.value = e.message.toString()
            }
        }
    }
}

제 앱에 들어가있는 ViewModel인데 사실 AAC의 ViewModel을 사용하여 MVVM의 ViewModel 기능을 같이하게 만들었다. 아니 위 영상에서는 DataBinding 없는 MVVM은 반쪽짜리 MVVM이라 했는데? 처음에는 저도 그렇게 생각을하다가 Compose를 사용하는데 DataBinding이 필요없다라는 것을 알고 이렇게 구현을 하게 되었다.

1. MVVM의 ViewModel과 AAC의 ViewModel은 서로 상관이 없는 개념이다.
2. MVVM을 알고 싶으면 MS사의 문서를 보는게 낫다.
3. 그렇다고 AAC의 ViewModel이 MVVM의 ViewModel 기능을 할 수 없다 라는 것은 아니다. 구현하기에 따라서 가능하다. (+ kotlin Flows, LiveData를 같이 사용해서 구현하면 좋다.)

나중에는 MVI도 알아봐야겠다.

이번에 쉬는 김에 내가 자주 안써본 기술들을 채용해서 앱을 하나 만들어 보고 싶다는 마음에 시작하게 되었다..

하지만 뭘 만들까 << 이게 제일 문제였다

그러다가 넥슨의 한 유명 버섯게임을 하고 있었는데 해당 게임은 원래 Open Api가 없어서 만들고 싶어도 만들지 못하다가 친구에게 여기있는 아이템을 긁어오면 어떻게하면 만들 수 있을 것 같다고 얘기를 하니까 친구가 크롤링으로 Api를 만들어줬다.

크롤링은 별로 좋아하는 방법이 아니긴한데 딱히 다른방법이 없었다.. 다른 유사한 정보를 제공하는 사이트들을 보니 다른 사이트들도 다들 크롤링을 하는 것 같았다. 그런데 크롤링을 반복적으로 하다보면 보통은 크롤링을 막기 위해 해당 IP주소의 접근을 막는다. 그래서 크롤링이 원활하게 되지 않는다. 그래서 아마도 다른 사이트들은 VPN같은 것을 쓰지 않을까 생각하며 .. 기술 스택만 생각해봤다..

앱에 넣은 기술 스택

1.MVVM (무조건 넣어야 함 이거 때문에 사실 만든거임) 2.Hilt (사실 생성자와 어떤게 다른지 궁금하기도 하고 편하다고 해서 넣음) 3.Room (예전에는 SQLite를 사용했는데 이거 사용하면 더 편하대서 한 번 써보고 싶어짐) 4.Compose 5.Navigation

이정도는 꼭 넣고 싶었다.

우선 어느정도까지 개발을 할 것인가?

스코프를 먼저 설정을 했어야 했는데 우선 기본적인것만 할려고 했다. 1.캐릭터검색 2.장착아이템 3.즐겨찾기 4.최근검색기록

이렇게 설정하게 되었다. 그 이유는 캐릭터 검색은 가장 기본적인 서비스라고 생각해서 넣었고 장착아이템 또한 그렇다 3,4번을 넣게된 이유는 AAC의 하나인 Room을 사용해 보고 싶어서였다.

그 다음은 디자인을 어떻게 할 것인가?

이게 정말 어려웠다.. 나는 디자인에 대한 감각이 없어서 어려웠는데 그 동안 회사를 다니며 디자이너분한테 종종 질문을 많이 했었는데 "왜 이렇게 디자인 한 건가요?" (지금 생각해보니 뭔가 좀 그렇네요) 순수 궁금해서 물어본 질문인데 디자이너분께서 의도를 설명해주기 때문에 꽤 자주 물어봤었던것 같다. + Material design에서 많이 쓰는 걸 자주 쓸려고 했다. 전 회사도 머터리얼 디자인을 많이 따라갈려고 했던것 같다.

캐릭터정보 디자인창만 만들고 뜯어고치고만 1주일 넘게 한 것 같다.. 캐릭터가 가지고 있는 스탯이 워낙 많아서 어떻게 보여줘야 한 눈에 자기가 보고 싶어하는 걸 한 번에 볼 수 있을까? 라는 생각을 하다보니 내가 만들어놓고 아 진짜 구린데 ? 라는 생각을 하다보니 오래걸린것 같다.. 디자이너분들은 항상 대단하신 것 같다..

개발에 대한 내용은 다음 포스트에 이어서 쓰겠습니다!

firebase 연결해서 crashlytics도 연결하고 앱 아이콘도 제작하고.. 이번에 Compose에서 Splash도 테마로 쉽게 만들수 있는게 있어서 그것도 사용해봤다. Splash도 만들고 다 만들어서 앱을 등록하려고 했는데.. 그 동안 앱을 회사에서만 만들고 올려서 그랬는데 최근에는 플레이콘솔을 볼 일이 없어서 안보다가 작년 11월쯤에 업데이트가 있었다. 11월이후 신규 개인 개발자는 20명의 테스터가 14일 연속으로 테스트를 해야 플레이 스토어에 등록을 할 수 있다고한다.. ㅠㅠ 아 미리 만들어 둘 걸.. 그래서 지금은 테스터를 구해야 하나.. 돈주고 테스트해주는 업체에 맡겨야 하나 고민중에 있다.. 이유는 인도쪽에서 스미싱 앱을 만들어서 그렇다는 썰이 있다..

회고 3줄 요약..

1. 어디까지 서비스 할 건지 스코프를 확실히 하고 시작할 것
2. 디자인은 어렵다.. 좋은 UI/UX를 보면 어딘가에 적어두던가 해야 할 것 같다.
3. 아 계정 빨리 만들걸..