🐣메인 화면 API 연동 좌충우돌기 기록

들어가기 전에

오늘은 메인 화면에서 쓰이는 api와 연동하는 과정을 기록하였다. 

1️⃣메인 화면 : 감상문 조회 기능 구현

메인 화면에서는 전체 감상문을 리사이클러뷰로 보여주는 기능을 제공한다. 현재는 더미 데이터를 사용해 감상문을 보여주는데, 이제 API와 연동하여 실제 감상문 내용과 연결해주는 작업을 하려 한다. 먼저 API와 연동부터 해주었다.

 

🐤배운 점

1️⃣Repository도 interface로 정의 후 이를 구현하는 클래스를 따로 만들어준다.

2️⃣인터페이스와 hilt 사용법

 

 

이렇게 Repository를 interface로 만들어준다.

interface ReportRepository {
    suspend fun searchReport(): Result<String>
}

 

그리고 아래와 같이 searchReport 함수를 재정의해주었다.

class ReportRepositoryImpl
    @Inject
    constructor(
        private val reportDataSource: ReportDataSource,
    ) : ReportRepository {
        override suspend fun searchReport(): Result<String> {
            return reportDataSource.searchReport()
        }
    }

 

 

이렇게 인터페이스인 ReportRepository 객체를 뷰 모델에서 사용하려면 아래와 같이 ReportModule를 정의해주었다.

이 때 Hilt 모듈을 사용하여 특정 유형의 인스턴스 제공 방법을 Hilt에 알려준다. 

 

인터페이스의 인스턴스를 삽입해주기

- Hilt module은 추상 클래스로 지정해준다. 

- @Binds로 주석이 지정된 추상 함수를 생성해서 Hilt에게 결합 정보를 제공한다.  

- 함수 반환 유형은 함수가 어떤 인터페이스의 인스턴스를 제공하는지를 Hilt에게 알려준다.
    -> 우리는 ReportRepository 인스턴스를 제공한다고 알려주었다.

- 함수 매개변수는 제공할 구현을 Hilt에게 알려준다. 
    -> 우리는 ReportRepositoryImpl 을 매개변수로 넘겨주었다.

@InstallIn(SingletonComponent::class)
@Module
abstract class ReportModule {
    @Binds
    @Singleton
    abstract fun bindReportRepository(impl: ReportRepositoryImpl): ReportRepository

    @Binds
    @Singleton
    abstract fun bindReportDatasource(impl: ReportDataSourceImpl): ReportDataSource
}

 

이렇게 모듈을 사용하여 Hilt에 결합 정보를 제공한 후에 는  이제 생성자 삽입을 사용하여 ReportRepository 객체를 사용할 수 있다! 

 

@HiltViewModel
class ReportViewModel
    @Inject
    constructor(private val reportRepository: ReportRepository) :
    ViewModel() {
        suspend fun getReportList() {
            viewModelScope.launch {
                reportRepository.searchReport()
            }
        }
    }

 

 

2️⃣응답값을 DTO와 연결하여 전체 감상문 리스트를 리사이클러뷰와 연결해주기 

모르는 점

🔹DTO를 작성해주려고 하니 response의 body에서 [ ] 대괄호와 { } 중괄호의 차이의 의미를 모르고 있었다.

 

    { } 는 객체를 표현한다. 객체는 키와 값의 쌍으로 이루어진다.

    [ ] 는 배열을 표현한다. 배열은 여러 개의 값을 순서대로 나열한 것이다. 

    큰 구조를 repoList를 살펴보면 

    "repoList" : [ {객체1}, {객체2}, {객체3}, ``` ] 로 구성되어있다. 

     key : value 쌍!

    reportList라는 키에 대응하는 값이  여러 개의 객체들이 순서대로 나열된 배열로 이해하면 된다. 

    이를 data class로 구현하려고 하면 , 이렇게 ReportList 객체를 정의해주고, 이러한 객체가 나열된 배열을 담은 변수인         reportList를 정의해주었다. 

data class ReportInfo(
    val reportList: List<ReportList>,
    ````
)

data class ReportList(
    ```
)

 

🔹kotlin에서 List와 ArrayList와 mutableList의 차이에 대해 제대로 알지 못했다.

    kotlin에서는 변수들을 Mutable 여부로 나누고 있다.

    List와 MutableList의 차이도 Read-Only인지 아닌지의 차이이다. 

    List는 오직 읽기 접근만 가능하다.

    MutableList는 읽기/쓰기 접근이 지원된다. 

    Array와 List의 차이는 무엇일까?

 

    ArrayList는 무엇일까?

 

 

발생한 에러 : 

java.lang.IllegalArgumentException: Unable to create converter for class cohttp://m.teamfilmo.filmo.ui.model.ReportInfo

 

해결 : 아래의 코드를 retrofit 구성 시 추가해주었다.

.addConverterFactory(GsonConverterFactory.create())

 

결과 : 이렇게 데이터가 들어오는 것을 확인할 수 있었다! 

 

 

🤔Json 관련 converter도 있던데 Gson과 Json Converter의 차이가 무엇일까?

 

이제 본격적으로 응답값으로 온 ReportList들을 리사이클러뷰로 연결하는 작업을 해보자. 처음이기 때문에 어떻게해야할지 먼저 정리를 해보았다.

순서를 정리해보면

1️⃣API를 통해 서버에 저장된 감상문 내용 전체를 불러온다

뷰 모델에서 ReportInfo 내에 있는 ReportList를 어댑터와 연결해준다. 

 

2️⃣리사이클러뷰의 어댑터에 해당 감상문 리스트를 연결해줘서 뷰와 바인딩해준다. 

 

어떻게 어댑터와 ReportList를 연결해줄까 ???

 

🐤1차 구현 기록

구현 흐름  

🔹 뷰모델에서 감상문 조회 시 데이터를 얻기

뷰모델에서  ReportRepository.searchReport 메소드를 호출

얻은 응답값의 ReportInfo 를 사용하여 ReportList를 추출한 데이터를 MutableLiveData인 ReportList의 value값으로  넣어준다. 

 

🔹이 데이터를 리사이클러뷰와 연결하는 방법

 

Adapter에서 List<ReportList> 형태의 데이터를 담을 reportList 변수를 생성해주고 

 

 

1️⃣ReportViewModel

@HiltViewModel
class ReportViewModel
    @Inject
    constructor(private val reportRepository: ReportRepository) :
    ViewModel() {
        val reportList = MutableLiveData<List<ReportList>?>()

        init {
            requestReportList()
        }

        fun requestReportList() {
            viewModelScope.launch {
                val result = reportRepository.searchReport()
                if (result.isSuccess) {
                    val response = result.getOrNull()
                    val reports = response?.reportList?.toList()
                    Log.d("감상문", reportList.toString())
                    reportList.value = reports
                } else {
                    result.getOrThrow()
                }
            }
        }
    }

 

🔹MutableLiveData 

🔹init { ``` } 의 사용

🔹viewModelScope.launch { ``` }

 

2️⃣ ReportFragment

private val reportViewModel by viewModels<ReportViewModel>()

runBlocking {
            reportViewModel.requestReportList()
        }

        val movieReviewAdapter = ReviewAdapter()

        reportViewModel.reportList.observe(viewLifecycleOwner) { reports ->
            if (reports != null) {
                movieReviewAdapter.setReportList(reports)
            }
        }

🔹runBlocking 과 runCatching의 차이 

🔹observe 란? 

🔹viewLifeCycleOwner 란?

 

뷰 모델의 reportList를 관찰하고, 이 ReportList가 null이 아니라면 어댑터의 setReportList를 호출해준다. 이 때 List<ReportList> 를 같이 전달해준다

 

 

 3️⃣ ReportAdapter

그럼 어댑터에서는 그 List<ReportList>를 받아서 어댑터 클래스의 속성인 reportList 값에 넣어주고, notifyDataSetChanged 함수를 호출해준다.

 

class ReviewAdapter : RecyclerView.Adapter<ReviewAdapter.ReviewViewHolder>() {
    private var reportList: List<ReportList> = listOf()

    fun setReportList(reportList: List<ReportList>) {
        this.reportList = reportList
        notifyDataSetChanged()
    }

 

🔹notifyDataSetChanged( )란?

 

notifyDataSetChanged 란 ?

 

근데 지금은 searchReport 메서드를 통해 서버에 저장된 전체 감상문을 불러오는데 notifyDataSetChanged를 호출해줘야할까? 하는 의문이 들었다.

서버에서 데이터를 가져와서 바로 바인딩해주는데 왜 업데이트가 필요할까 조금 더 찾아봐야겠다.

 

그래서 notifyDataSetChanged에 주석처리를 하고 다시 실행했더니...!!!  아무것도 보이지 않았다. 
우선 notifyDataSetChanged 메서드를 사욯하는 것은 필요했다. 왜냐하면 서버에서 받아온 데이터로 인해 리사이클러뷰에서 보여줄 아이템과 개수가 변경되었기 때문이다! 

🐤리사이클러뷰 데이터 업데이트 방법에는 무엇이 있을까?

 

메인화면에 존재하는 프래그먼트, 어댑터를 공유할 수 있을까?

현재 메인 화면에서 전체 감상문이 보이는 전체 탭과 팔로우하는 감상문만 보이는 팔로잉 탭이 있다.

 

현재 상황을 정리해보면,

리사이클러뷰로 아이템들을 보여줄 때 공통적으로 searchReport api를 호출하여 아이템을 보여준다. 

차이는 searchReport에 들어가는 인자의 차이이다.

[전체]의 경우  아무 인자없이 searchReport api를 호출해줄 경우 

[팔로잉]의 경우 팔로우하는 사람의 게시글만 보기 위해서서는 전체 중에서 팔로우하는 사람의 감상문 게시글만 보이도록 필터링이 필요하다. 

우선은 어떻게 필터링 할 것인지보다는 전체 구조를 짜보자!

 

나는 Adapter를 별도록 2개 구현해줘야할까? 라는 생각이 들었다. 뷰 홀더 2개가 하나의 어댑터를 공유하면 안될까? 

 

 

🔥어댑터에서 뷰모델 객체를 가지고 있어도 되는가?

발생 에러 

handleAppError, pkgName : com.teamfilmo.filmo, userId : 0, errorType : 9, repeat : true component : com.teamfilmo.filmo.ui.report.ReportViewModel.<init> []errorStack: Caused by: java.lang.NoSuchMethodException: com.teamfilmo.filmo.ui.report.ReportViewModel.<init> []
                                                                                                    	at java.lang.Class.getConstructor0(Class.java:2363)
                                                                                                    	at java.lang.Class.getDeclaredConstructor(Class.java:2201)
                                                                                                    	at androidx.lifecycle.ViewModelProvider$NewInstanceFactory.create(ViewModelProvider.kt:199)
                                                                                                    	... 57 morejava.lang.RuntimeException: Cannot create an instance of class com.teamfilmo.filmo.ui.report.ReportViewModel
                                                                                                    	at androidx.lifecycle.ViewModelProvider$NewInstanceFactory.create(ViewModelProvider.

 

원인 : 이 에러는 FollowingFragment에서 뷰모델 객체를 가지고 있는데 @AndroidEntryPoint 어노테이션을 적어주지않아서 발생한 에러였다! 

해결 : 어노테이션 추가 

 

3  3056-3056  SDHMS:BarT...r:AppError com.sec.android.sdhms                I  update AppError : uid=10607, pkg=com.teamfilmo.filmo, errorType=crash
2024-04-11 01:09:26.161  3056-3056  SDHMS:BarT...r:AppError com.sec.android.sdhms                I  analyze app error : uid=10607, pkg=com.teamfilmo.filmo, appErrorCount=2

 

두 프래그먼트에서 동일하게 뷰모델의 requestReportList 메서드를 통해 데이터를 얻도록 코드 작성 시 
팔로잉 페이지로 이동한 후 1초 이후에 앱이 비정상 종료되었다. 

 

시험이 끝나고 다시 돌아왔다!! 20240426!!

저번에 이어 아직 해결되지 않은 아래의 에러를 파악해보자!

2024-04-26 23:01:58.562  3132-3132  SDHMS:BarT...r:AppError com.sec.android.sdhms                I  update AppError : uid=10607, pkg=com.teamfilmo.filmo, errorType=crash
2024-04-26 23:01:58.565  3132-3132  SDHMS:BarT...r:AppError com.sec.android.sdhms                I  analyze app error : uid=10607, pkg=com.teamfilmo.filmo, appErrorCount=5

 

 Calling a method in the system process without a qualified user: android.app.ContextImpl.sendBroadcast:1242 com.android.server.am.AppErrors.crashApplicationInner:724 com.android.server.am.AppErrors.crashApplication:584 com.android.server.am.ActivityManagerService.handleApplicationCrashInner:9748 com.android.server.am.ActivityManagerService.handleApplicationCrash:9627

 

확인을 위해서 우선 Following Fragment와 Adapter 코드를 주석 처리 후 실행해주었다. 

 

이를 통해  변수 초기화 과정에 문제가 있음을 알 수 있었다.

 

아래와 같이 reviewAdapter 변수에 대해 선언해주고, 초기화 작업은 이후 할 수 있도록 해주었다.

    private lateinit var reviewAdapter: ReviewAdapter

 

그러나 아래처럼 코드를 작성해준 후인데 정의해준 코드에 적용이 되지 않았다. 

reviewAdapter = ReviewAdapter()

 

실행 정상화

🫱버튼 클릭으로 프래그먼트를 변경해주는데 뷰페이저2를 사용해야할까?하는 의문이 들었다. 

 

공식문서에서 뷰페이저2를 "스와이프할 수 있는 뷰 또는 프래그먼트를 제공" 이라고 설명하고 있었다.

따라서 뷰페이저2가 아닌 클릭 이벤트 처리로 프래그먼트를 변경해주도록 코드를 수정해주었다.

 

여기서 배운 내용은 프래그먼트를 보여줄 때 supportFragmentManager을 사용하는 것이다! 

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainPageBinding.inflate(layoutInflater)
        setContentView(binding.root)
        setFrag(0)

        binding.allReportButton.setOnClickListener {
            setFrag(0)
        }
        binding.FollowingReportButton.setOnClickListener {
            setFrag(1)
        }
    }

    private fun setFrag(fragNum: Int) {
        val fragment = supportFragmentManager.beginTransaction()
        when (fragNum) {
            0 -> fragment.replace(R.id.fragmentArea, ReviewFragment()).commit()
            else -> fragment.replace(R.id.fragmentArea, FollowingReviewFragment()).commit()
        }
    }

 

👍좋아요 버튼 연동하기

리사이클러뷰에 있는 ❤️ 좋아요 버튼을 클릭 할 때마다 좋아요가 등록되도록 해보자! 

 

우선 클릭이 정상적으로 되는지 테스트하기 위해 로그로 확인해준 결과 OK였다!

 

지금 구조를 정리해보면

메인 페이지에서 2개의 프래그먼트 화면을 제공하고 

각 프래그먼트 화면에서는 리사이클러뷰를 통해 데이터를 보여주는데 이 리사이클러뷰에는 리뷰 데이터 + 좋아요 + 댓글 + 북마크 데이터가 함께하고 있다.

 

좋아요 등록 기능을 연동하기 시작했는데.. 험난한 여정이 펼쳐졌다.

우선 좋아요를 서버에 등록하려면 현재의 아이템의 reportId를 같이 넘겨서 호출해줘야한다.

 

어디서 호출을 해줘야할까?