이미지 화면 구현

코틀린을 활용한 이미지 상세 구현을 만들어 볼 계획이다.

Retrofit과 Koin, MVVM과 FLOW를 이용하여 만들었다.

기본적인 프로그램 구조는 아래의 소스에서 가져와 따라 만들었다.

Koin + MVVM + Coroutine + Flow 를 이용한 상세화면 만들기

아직 배경 지식이 없는 상황이어서 기본적인 개념부터 바로 잡아보기로 하였다.

기본적인 설명은 Chatgpt를 활용하였다.

 

1. Koin

KOIN은 코틀린(Kotlin)으로 작성된 경량(DI) 라이브러리로, 의존성 주입(Dependency Injection)을 구현하는 데 사용됩니다. KOIN은 구성이 간단하고 직관적이며 적은 양의 코드로 구현할 수 있습니다.

KOIN을 사용하면 다음과 같은 장점이 있습니다:

1. 앱 전반에 걸쳐 의존성 관리를 간편하게 처리할 수 있습니다.
2. XML이나 어노테이션과 같은 복잡한 구성 없이 구현이 가능합니다.
3. 안드로이드(Aandroid) 뿐 아니라 자바(JAVA)와 코틀린(Kotlin) 프로젝트에서 모두 사용할 수 있습니다.
4. 테스트 작성을 간편하게 할 수 있습니다.

최근 안드로이드 앱 개발에서는 의존성 주입 라이브러리의 사용이 일반적이며, KOIN은 이러한 라이브러리 중 경량화와 간편한 구성으로 인해 많은 개발자들에게 선택되고 있습니다.

 

2. MVVM

MVVM은 Model-View-ViewModel의 약자로, 소프트웨어 아키텍처 디자인 패턴 중 하나입니다.

MVVM은 사용자 인터페이스(UI)를 표시하는 뷰(View)와 데이터를 처리하는 모델(Model) 사이에 뷰모델(ViewModel)을 사용하여 데이터를 관리합니다. 뷰모델은 뷰와 모델 사이에서 중개자 역할을 하며, 뷰와 모델이 서로 직접적으로 연결되지 않도록 분리하는 역할을 합니다.

MVVM 아키텍처의 장점은 다음과 같습니다:

1. 뷰와 모델이 분리되므로 코드의 가독성이 향상되며, 유지보수가 용이합니다.
2. 뷰와 모델 간의 의존성이 줄어들어, 더욱 효과적인 테스트가 가능합니다.
3. 데이터 바인딩(Data Binding)과 함께 사용하면 코드 양을 줄이고 작성된 코드의 반응성이 높아집니다.
4. 뷰모델을 사용하여 화면 회전과 같은 구성 변경 시 발생할 수 있는 문제를 간단하게 처리할 수 있습니다.

안드로이드(Android)에서는 MVVM 패턴을 적용하여 안드로이드 아키텍처 컴포넌트(Android Architecture Components)를 사용할 수 있습니다. 안드로이드 아키텍처 컴포넌트는 LiveData, ViewModel, Room 등의 라이브러리로 구성되어 있으며, 안드로이드에서 MVVM 아키텍처를 적용하는 데 많은 도움을 줍니다.

 

3. Flow

Flow는 코틀린(Kotlin)의 비동기 스트림 처리 라이브러리입니다. Flow는 코루틴(Coroutine)을 기반으로 구현되어 있으며, 비동기 데이터 스트림을 표현하고 처리하는 데 사용됩니다.

Flow는 다음과 같은 특징을 가지고 있습니다:

1. 비동기적으로 데이터 스트림을 생성할 수 있습니다.
2. 데이터가 생성될 때마다 이를 수신하는 데이터 흐름을 만들 수 있습니다.
3. Cold 스트림을 지원하며, 데이터 소스가 발생하지 않으면 Flow도 아무것도 하지 않습니다.
4. 비동기적으로 데이터를 처리하며, 데이터 스트림을 통해 처리 결과를 반환할 수 있습니다.

Flow는 안드로이드(Android) 앱에서 비동기 작업을 처리하는 데 매우 유용합니다. 예를 들어, 네트워크 호출 또는 데이터베이스 작업과 같은 비동기적인 작업을 처리할 때 Flow를 사용하여 비동기적으로 데이터를 스트림 처리하고, 결과를 반환할 수 있습니다.

또한, Flow는 안드로이드 아키텍처 컴포넌트(Android Architecture Components)의 일부로도 제공되므로, LiveData 및 ViewModel과 함께 사용할 수 있습니다. Flow를 사용하여 데이터를 스트림 처리하면, LiveData와 ViewModel과 같은 안드로이드 아키텍처 컴포넌트를 사용하여 데이터를 관리할 때 발생할 수 있는 문제를 간단하게 해결할 수 있습니다.

 

대략적으로 내용을 이해하고 코드 작성을 시작하였다.

대학원 프로젝트를 통해 Retrofit은 어느 정도 만져봐서 이해하는 것에 크게 어려움은 없었다.

다만, 위의 소스와 같이 코드를 작성하고 실행하자 MVVM을 활용하여 만든 viewModel 클래스에 초기 생성자가 없다는 오류가 발생하였다.

그래서 ViewModelProvide을 활용하였지만, 이번에는 인스턴스가 없다는 오류가 발생하였다.

따라서 이를 해결하기 위해 별도로 인스턴스를 만들어 주는 Factory함수를 만들어 주었다.

class LoremPicsumViewModelFactory(private val repository: LoremPicsumRepository) : ViewModelProvider.Factory {
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        if (modelClass.isAssignableFrom(LoremPicsumViewModel::class.java)) {
            return LoremPicsumViewModel(repository) as T
        }
        throw IllegalArgumentException("Unknown ViewModel class")
    }
}

ViewModelProvider.Factory를 반환하여 인스턴스를 만들어 주었다.

이렇게 완성된 화면은 다음과 같이 나왔다.

실행 화면

이제 다음 목표는 해당 사이트에서 이미지를 불러와서 리스트 형식으로 배치하는 것을 목표로 할 것이다.

마찬가지로 위의 참고 사이트에 있는 것을 기반으로 적절하게 수정할 것이다.

전체 코드는 아래 깃허브 주소에 링크를 걸어두었다.

GitHub - geonunggoodboy/ExAndroid: 안드로이드 외장 하드에 저장된 연습 파일들