[TEKHIT] 오늘의 멘토링
멋쟁이 사자처럼에서 진행하는 안드로이드 앱 스쿨에서 멘토링을 받고 배운 지식들을 정리하는 글입니다.
👩💻 오늘의 할 말
요즘 프로젝트를 하느라 바빠서 오랜만에 글을 쓰네요. 빨리 프로젝트를 마무리하고 싶습니다. 다음 계획으론 MVVM과 GoF의 디자인 패턴을 공부할 건데 재미있어 보여서 얼렁 빨리 하고 싶어요😭 공부할 책이랑 강의도 미리 정해놔서 빨리 하고싶습니다...!🔥
📕 질문
내가 등록한 매장 정보를 보여주는 프래그먼트에서 정보를 수정 후, 사진첩을 열고 돌아오면 기존의 수정 데이터가 저장되지 않고 수정 이전의 데이터를 보여주며 사진첩에서 이미지를 선택하고 변경해도 이미지가 변경되지 않습니다.
📌Layout.xml
Layout은 매장 정보는 Local Database인 Room에서 가져온 정보를 데이터 바인딩을 사용하여 렌더링 하며 이미지는 바인딩 어댑터를 사용해서 보여주도록 구현하였습니다.
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:bind="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="vm"
type="com.myproject.cloudbridge.viewModel.StoreManagementViewModel" />
</data>
(생략...)
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/storeName_Layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
app:boxStrokeColor="@color/blue_grey"
app:errorEnabled="true"
app:helperTextTextColor="@color/orange_red"
app:startIconDrawable="@drawable/baseline_store_24"
app:startIconTint="#000">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/storeName_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@{vm.myStore.storeName}"
android:fontFamily="@font/rubik_bold"
/>
</com.google.android.material.textfield.TextInputLayout>
(생략...)📌ViewModel - Model
- 데이터 바인딩을 위해 사용된 ViewModel Class와 BindingAdapter, Model Class입니다.
- DataStore에 저장된 나의 사업자 등록번호를 Primary Key로 Room에서 데이터를 가져왔습니다.
- Room에서 꺼내온 데이터는 Flow Type입니다. 그래서 StateFlow Type으로 변환하기 위해 stateIn 함수를 사용하였습니다.
class StoreManagementViewModel: ViewModel() {
private lateinit var myStoreInfoRequestModel: MyStoreInfoRequestModel
private val networkRepository = NetworkRepository()
private val dbRepository = DBRepository()
// 나의 매장 정보
private var _myStore: MutableStateFlow<StoreEntity> = MutableStateFlow(createFirstData())
val myStore: StateFlow<StoreEntity> get() = _myStore
fun getMyStoreInfo() = viewModelScope.launch(Dispatchers.IO) {
try {
// 1. Datastore에 저장된 사업자 등록번호를 가지고
MainDataStore.getCrn().collect{ crn->
// 2. Room에서 나의 매장 정보를 가져와
val response = dbRepository.getMyStoreInfo(crn)
// 3. flow로 반환된 데이터를 StateFlow로 변환해 저장
response.stateIn(viewModelScope).collect{ myStore->
_myStore.value = myStore
}
}
}catch (e: Exception){
Log.d("MyPageViewModel","MyPageViewModel: $e")
}
}
}
###################################################################################
object MyStoreBindingAdapter {
// 1) 이미지뷰에 새로운 xml 속성 만들기
// [속성명 : myStoreImage ]
@JvmStatic
@BindingAdapter("myStoreImage") //어노테이션 해독기 필요 - 빌드 그래이들에 기능 추가 필요!(kapt)
fun imageBindingAdapter(view: ImageView, image: Bitmap?){
if (image != null) {
Glide.with(view.context).load(image).into(view)
}
}
}
###################################################################################
@Entity(tableName = "store_table")
data class StoreEntity (
@PrimaryKey
@ColumnInfo(name = "company_registration_number")
val crn: String,
@ColumnInfo(name = "store_image")
val image: Bitmap,
@ColumnInfo(name = "store_name")
val storeName: String,
@ColumnInfo(name = "ceo_name")
val ceoName: String,
val contact: String,
val address: String,
val latitude: String,
val longitude: String,
val kind: String
)기본적인 나의 매장 정보를 보여주는 로직은 위와 같이 구현해 주었습니다. 이제 저는 View의 수정된 데이터를 받기 위해 새로운 데이터 모델을 만들었습니다.
🤔 왜 새로운 모델을 만들었나요?
viewModel에서는 사용자에게 보여줄 나의 매장 정보를 backing Property로 선언했습니다.
backing Property를 사용한 한 이유는 MVVM에서 다양한 아키텍처적 관점에 대한 장점이 있기 때문입니다.
우선 _myStore는 외부에서 관찰할 수 없지만 변경 가능한 타입입니다. myStore는 불변 타입이지만 외부에서 관찰할 수 있으며 _myStore를 통해 데이터를 가져옵니다. 이렇게 하면 ViewModel에서는 데이터 관련한 처리를 하고, UI에서는 데이터를 보여 주기만 할 수 있어 UI와 비즈니스 로직을 분리하고 캡슐화를 제공할 수 있습니다.
또한 이를 통해 View와 ViewModel의 역할을 완전히 분리함으로써 단일 책임 원칙을 준수할 수 있습니다.
이외에도 클린 아키텍처적인 장점이 더 많을 것 같은데 아직 제가 클린 아키텍처에 대한 지식이 부족해서 좀 더 공부해야겠습니다😭
그래서 저는 UI에서 사용자의 입력값으로 기존 ViewModel에 있던 데이터를 변경하는 것이 불가능하다고 생각해서 새로운 데이터 모델을 만들었지만 이후 이게 문제의 원인이 되었습니다.
data class ModifyStoreStateSaveModel (
var storeName: String, // 매장명
var ceoName: String, // 점주명
var contact: String, // 전화번호
var address: String, // 주소
var kind: String // 업종
)
class StoreManagementViewModel: ViewModel() {
private lateinit var myStoreInfoRequestModel: MyStoreInfoRequestModel
private val networkRepository = NetworkRepository()
private val dbRepository = DBRepository()
// 나의 매장 수정 정보
private var _myModifyStoreInfo: MutableStateFlow<ModifyStoreStateSaveModel> = MutableStateFlow(
ModifyStoreStateSaveModel("", "", "", "", "",))
val myModifyStoreInfo: StateFlow<ModifyStoreStateSaveModel> get() = _myModifyStoreInfo
fun updateSavedData(modifyData: ModifyStoreStateSaveModel) {
_myModifyStoreInfo.value = modifyData
}
}액티비티에선 이미지 등록 버튼을 눌러 갤러리로 화면이 전환되면 입력되어 있던 매장 정보들을 viewModel에 업데이트합니다. 이후 다시 프래프먼트로 돌아와 LifeCycle이 onstart( ) 상태 일 때, 저장돼있던 데이터들을 화면에 보여주려 했습니다.
이렇게 생각한 이유는 Fragment → 갤러리의 화면 전환에서 프래그먼트는 백그라운드 상태가 되며 Fragment LifeCycle은 onStop( ) 상태가 됩니다. 그리고 viewModel은 연결된 Activity나 Fragment가 완전히 제거 (onDestroy) 된 후에 클리어(onCleared) 된다는 점을 이용해서 ViewModel에 데이터를 저장하려 했습니다.
class UpdateFragment2 : Fragment(), View.OnClickListener{
(생략...)
override fun onStart() {
super.onStart()
viewLifecycleOwner.lifecycleScope.launch {
viewModel.myModifyStoreInfo.collectLatest{
if (it.storeName.isNotEmpty()){
setSavedStateInstance(it)
}
}
}
}
override fun onClick(v: View?) {
when(v?.id){
(생략 ...)
R.id.img_load_button -> {
if (isAllPermissionsGranted()){
getSavedStateInstance()
accessGallery()
}
else{
launcherForPermission.launch(REQUEST_STORAGE_PERMISSIONS)
}
}
}
}
private fun getSavedStateInstance(){
with(binding){
val modifyData = ModifyStoreStateSaveModel(
storeNameEdit.text.toString(),
ceoNameEdit.text.toString(),
phoneEdit.text.toString(),
addrEdit.text.toString(),
kindEdit.text.toString()
)
viewModel.updateSavedData(modifyData)
}
}
}
private fun setSavedStateInstance(state: ModifyStoreStateSaveModel) {
with(binding){
storeNameEdit.setText(state.storeName)
ceoNameEdit.setText(state.ceoName)
phoneEdit.setText(state.contact)
addrEdit.setText(state.address)
}
}문제는 여전히 화면 전환 후 데이터가 소실되는 현상이 발생하였습니다. 제가 생각했을 때, 데이터 바인딩에 바인딩된 ViewModel 인스턴스 때문에 새로운 모델에 저장했던 데이터를 보여줄 수 없다고 생각을 했지만 해결 방법을 찾지 못해 멘토링을 신청하게 되었습니다.
📖 이에 대해 멘토링에선 다음과 같은 답변을 얻을 수 있었습니다.
override fun onStart() {
super.onStart()
viewLifecycleOwner.lifecycleScope.launch {
viewModel.myModifyStoreInfo.collectLatest{
if (it.storeName.isNotEmpty()){
setSavedStateInstance(it)
}
}
}
}1️⃣ onStart에서 코루틴을 실행할 필요가 없었습니다.
프래그먼트가 화면 전환 후 다시 포그라운드로 전환되면 LifeCycle이 onStart( )부터 동작하기 때문에 이 타이밍에 맞춰서 저장했던 데이터를 렌더링 하려 했습니다. 하지만 제가 위에서 언급했던 것처럼 viewModel은 Fragment가 onDestroy( ) 되기 전까지 살아있기 때문에 굳이 onStart( ) 에서 수행할 필요가 없었습니다.
2️⃣ 데이터 바인딩에 사용된 Model Class를 변경하면 안 됩니다.
- 이 부분도 제가 생각했던 문젠데 왜 하나만 알고 둘은 몰랐을까요 😭😭😭😭😭😭😭😭
3️⃣ 자자 오늘의 하이라이트 사용자의 입력값으로 ViewModel에서 데이터를 변경하는 방법을 보겠습니다.
class StoreManagementViewModel: ViewModel() {
// 나의 매장 정보
private var _myStore: MutableStateFlow<StoreEntity> = MutableStateFlow(createFirstData())
val myStore: StateFlow<StoreEntity> get() = _myStore
// 사용자 수정 데이터 업데이트
fun updateSavedData(storeName: String, ceoName: String, contact: String, address: String, kind: String) {
// 바뀌지 않은 값은 유지
_myStore.value = _myStore.value.copy(
storeName = storeName,
contact = contact,
ceoName = ceoName,
address = address,
kind = kind
)
}
}copy( ) 함수는 얕은 복사(shallow copy)를 수행하며 이 함수는 새로운 객체를 만들어 기존 객체의 필드를 변경하거나 유지하는 데 사용됩니다. 이를 통해 기존의 저장되어 있던 데이터는 유지하면서 사용자가 수정한 값은 변경이 가능해집니다.
깨알 팁으로 Named Argument라는 문법도 배울 수 있었습니다. Named Argument는 데이터 클래스 생성 시 필요한 파라미터들의 이름을 지정해 주어 파라미터를 입력 순서와 상관없이 전달할 수 있고 가독성 또한 향상할 수 있습니다.
제가 모르는 코틀린의 유용한 기능들이 정말 많은 것 같습니다. 왜 코틀린이 좋은 언어인지 새삼 깨닫게 되네용... 아직 내용이 한참 남았지만 글이 길어져는 것 같아 다음 글에서 작성하겠슴당 👼