본 캠프 48일 차 - api를 통해 가져온 데이터 출력하기

개인과제 2일차

recyclerview를 통해 받아온 데이터 출력하기

오늘 한 내용

• retrofit으로 가져오는 데이터 인터페이스 중에서 필요한 내용만 남기고 일단 빨리 만들어보기 위해 지우기
• rest api 키 가져오기
• Dto 다시 제대로 작성하기
• serch adapter를 만들기
• 검색기능 활성화 하고 검색 한 내용 api를 통해 가져오기
• 가져온 데이터 출력하기

recyclerview를 예전 과제를 보면서 간단하게 adapter를 만들어 봤는데 이미지를 또 가져오는 걸 어떻게 해야하나 또 어지러웠다. setImageResource는 Int형을 가져와야하고 setImageDrawable은 Drawable 형으로 가져와야하는데 가져오는 데이터는 String으로 가져오기 떄문에 머리가 아파졌다. 그래서 구글링을 해보니 Glide를 이용해서 Url에 있는 이미지를 가져오는 방식이 있었다.

Glide는 간단하게 그라들에

dependencies {
    implementation("com.github.bumptech.glide:glide:4.15.1")
    annotationProcessor("com.github.bumptech.glide:compiler:4.12.0")
    }

요 두가지를 추가 해주어야한다. 이제 Glide를 쓸 수 있게 된다.

Glide.with(holder.itemView.context)
    .load(items[position].image_url)
    .into(holder.img)

이미지는 이렇게 해서 가져올 수 있었고 이 밑에 가져오는 시간과 장소는 원래 하던 대로

holder.date.text = items[position].datetime
holder.locate.text = items[position].display_sitename

이렇게 그대로 따 오면 된다.

private fun responseNetWork(param : String) = lifecycleScope.launch() {
    val restApi = "867c4ce6796c040ac81eded3a5037936"
    val authorization = "KakaoAK $restApi"
    val responseData = NetWorkClient.imgNetWork.getImg(authorization, param)
    items = responseData.documents.toMutableList()
    val listItem = items[0]
    Log.d("SearchFragment","#aaa $listItem")
    }

이렇게 api키를 넣어주고 검색할 내용을 param으로 해서 리스트로 아이템들을 가져오는 함수를 만들고 검색기능도 search view를 활성화 시키기 위해 setOnQuertTextListener라는 함수를 추가적으로 만들었다.

//검색기능
private fun setOnQueryTextListenter() {
    binding.searchView.setOnQueryTextListener(object  : SearchView.OnQueryTextListener,
        androidx.appcompat.widget.SearchView.OnQueryTextListener{
        override fun onQueryTextSubmit(query: String?): Boolean {
            responseNetWork(query?: "")
            return false
        }

        override fun onQueryTextChange(newText: String?): Boolean {
            return true
        }
        })
}

onQueryTextSubmit은 검색이 완료된 상태이고 return false는 검색이 완료되는 키보드 창이 사라지게 만들어준다.

그리고 검색하는 내용을 넣기 위해 아까 전에 위에 만든 함수안에 검색어를 뜻하는 query를 넣어줬다. (이해한게 맞나...?)

그리고 밑에 onQueryTextChange는 검색어가 바뀔떄 마다 실행되는 건데 true이니 이건 계속 키보드를 띄워주는 거 같다...

 

이렇게 하니 로그를 따보니 이렇게 해서 프래그먼트 내에서 위 함수들 즉 네트워크에서 api를 통해 검색한 내용의 데이터를 가져오기까지는 완료했는데 이 데이터를 어댑터에 다시 넣고 데이터를 출력이 안되서 한참 걸렸다...

이제 끝나기 전에 오늘은 이 recyclerview까지는 만들어보기 위해 튜터님께 찾아가려 했는데 그 전에 팀원분이 해결법을 주셨다.

 

코루틴이 비동기식으로 앱이 다른거를 하고 있는데 코루틴으로 따로 실행하는 방식이라 내가 자꾸 추가 하던것은 이 코루틴이 끝나고 넣어야 하는데 코루틴이 완료되기 전 일어나는 것이기 때문에 안되었던 거라고 한다.

근데 코루틴은 그안에 그대로는 다른거를 못한다고 한다. 하기 위해서는 withContext(Dispatchers.Main)을 통해 다른 코루틴을 사용할 수 있게 해주는 듯 하다. 원래는 IO 쓰레드에 넣어봤는데 실행이 되지 않아서 Main쓰레드에 넣으니 이제

 

이제 이렇게 리사이클러뷰가 정상적으로 작동하는 것을 볼 수 있다.

근데 sort로 정확도를 안받아서 그런건지 다른 사진들도 좀 많이 나오는 거 같다. 다음에는 이 부분을 좀 수정하거나 내 보관함을 구현해 보아야겠다.