0804 새싹 24회차 정리 - Pagenation
iOS 앱 개발자 데뷔 과정 24회차
#1. Checklist
- 서버 통신 시 셀에 보여줄 UIImage 변환 시점 / TMDB 장르 대응 방법 등
String -> URL -> UIImage 로 변환하는 코드는 서버 통신 함수 내부에 작성할 수도 있고, 외부에 작성할 수도 있다.
내부에서 이미지 변환까지 끝내면 외부에서 그만큼 간단하게 적용시킬 수 있지만, 그만큼 함수가 무거워질 수 있다.
개인적으로는 내부에서는 String을(api_url과 imge_url) 합치는 정도만 하는 것이 좋을 것 같다.
TMDB 장르는 Int로 반환되는데, 이렇게 하면 언어별 대응이나 유지보수 측면에서 이점이 있을 수 있다.
이번에 구현한 방법으로는, 우선 TMDB 장르 목록을 서버 통신을 통해 받아오는 함수를 만들어 viewDidLoad 시점에서 실행시키고, 반복문을 활용해 미리 선언해둔 빈 딕셔너리에 추가했다.
그리고 cellForItemAt에서 indexPath.row를 활용해 key값을 매칭시켜, 텍스트를 가져와 변경하면 끝이다.
- Pagenation
[0803 새싹 23회차 정리] #1. Checklist 참고
iOS에서 Pagination을 구현하는 세 가지 방법
페이지네이션 방법3의 구현 예시는 prefetchItemsAt 에서 설명한다.
- UICollectionViewDataSourcePrefetching
페이지네이션 방법 3에서 사용하는 프로토콜이다. iOS10 이상 지원
서버 통신과 같은 비동기 상황에서 페이지네이션을 쉽게 구현할 수 있다.
용량이 큰 이미지를 다운받아 테이블뷰에 보여주려고 하는 경우 등에 효과적이고, 스크롤 성능이 향상된다.
videDidLoad에서 collectionView.prefetchDataSource = self 를 잊지 말자.
- prefetchItemsAt
페이지네이션 방법 3에서 사용하는 UITableViewDataSourcePrefetching의 필수 메서드이다.
셀이 화면에 보이기 전에 미리 필요한 리소스를 다운받을 수 있는 기능을 제공한다.
현재 사용자가 보고 있는 셀 이후에 표시될 셀을 판단하고 이 메서드를 호출하며, 사용자가 스크롤하지 않는다면 메서드는 호출되지 않는다.
구현 예시
현재 한 번에 받아오는 데이터 (display) 는 30으로 설정해놓은 상태이다.
셀이 화면에 보이기 직전에 필요한 리소스를 미리 다운 받는 기능을 하기 때문에, 사용자가 보려는 화면의 마지막 셀을 체크해야 한다.
전달받은 인자 (indexPaths) 를 반복문에 넣고, 조건문을 통해 현재 서버로부터 받아온 데이터 (thumbvailList) 의 총 갯수와 indexPath.row의 값이 같은지 판단하여, 만약 같다면 사용자가 현재 마지막 셀을 보려고 하고 있다는 것이 된다.
따라서 사용자가 마지막 셀을 볼 것이라고 판단되면, startPate에 30을 더해서 31부터 정보를 받아올 수 있도록 값을 바꾼다.
totalCount의 값은 서버에 요청할 때, 메서드 내에서 받아와서 바로 값을 바꿔주면 된다.
그리고 fetchImage를 호출하면 31번째부터 또 30개가 로드되는 것이다.
- cancelPrefetchingForItemsAt
페이지네이션 방법 3에서 사용하는 선택 메서드이다.
사용자가 테이블뷰를 아주 빠르고 스크롤한다면, 중간에 지나가는 셀에 대해서는 데이터 처리가 필요하지 않을 수 있다.
이런 경우 취소 작업이 필요할 수 있는데, 해당 옵션 메서드를 통해서 네트워크 호출 횟수와 리소스를 덜 사용할 수 있다.
- Loading View (feat.JGProgressHUD)
서버에서 데이터를 받아오는 데에는 시간이 걸리고, 당연하게도 데이터를 받기 전까지는 View에 내용이 뜨지 않는다.
사용자는 통신중인건지, 아닌지도 모른 채 기다려야 하는데다가 아무것도 뜨지 않으면 기다리는 시간이 더 오래 느껴진다.
그럴 때 오픈소스 JGProgressHUD를 사용하면 손쉽게 로딩바 구현이 가능하다.
다른 오픈소스도 많지만 해당 오픈소스가 가장 쉽다고 한다. 링크는 글 최하단에~
1. 우선 request 함수 내에서, 데이터를 요청하기 전에 hud.show 를 통해 뷰에 로딩바를 띄워 준다.
2. 데이터의 로딩이 완료되었을 때, hud.dismiss 를 통해 로딩바를 사라지게 한다.
성공 여부와 관계 없이 통신이 끝났을 때 로딩바를 사라지게 하는것이 사용자가 네트워크 문제를 스스로 감지할 수 있게 한다.
- UISearchBarDedgate
SearchBar에 검색 기능을 구현하거나, 취소 버튼을 만드려면 UISearchBarDelegate를 채택하면 된다.
- First Class Object
[0803 새싹 23회차 정리] #1. Checklist 참고
Closure (익명함수) 도 결국 함수이기 때문에 일급함수에 포함된다.
#2. Assignment
1. trending 정보를 보여주는 어제 과제에서 페이지네이션 기능 구현하기
페이지네이션 방법 2에서 나온 ScrollViewDelegate를 활용해서 페이지네이션 구현을 해 보았다.
contentOffset_y : 화면에 보이고 있는 컨텐츠의 가장 아래 y좌표
collectionViewContentSize : 컨체 컨텐츠 길이 (눈에 보이지 않는 영역 전부 포함)
pagination_y : 스크롤이 전체 컨텐츠 길이 중 몇 퍼센트까지 스크롤 되었을 때 데이터를 로드할 것인지에 대한 상수
2. trending 정보를 보여주는 화면에서 셀 클릭 시 Push 형태로 화면이 전환되며, 영화 정보들도 함께 전달하기
3. 전환된 화면에 헤더뷰를 만들고, 헤더뷰에 영화에 대한 정보 보여주기
4. 영화 ID로 서버 통신 후, Cast 정보를 테이블뷰셀에 보여주기
- 해결해야 할 문제
1. 페이지네이션
API 정보에는 total이 1000으로 나오지만, 실제로는 데이터가 50개 정도 밖에 존재하지 않아 빈 셀이 반복되게 된다.
모든 정보가 없는데, 신기하게도 장르는 계속해서 바뀌어 나온다.
받아올 데이터가 없는 경우에는 스크롤이 되지 않도록 구현하고 싶어도, totalCount를 모르니ㅠㅠ
# 그 외
요즘들어 시뮬레이터를 종료하면 AppDelegate에 아래와 같은 에러가 거의 매번 발생했다.
찾아보니, 시뮬레이터 창을 엑스버튼으로 닫으면 코드의 종료 시점과 시뮬레이터의 종료 시점이 맞지 않게 되는 것 같다.
xCode의 실행 중지 버튼 혹은 cmd + Q 를 통해 시뮬레이터를 닫는 습관을 들여야겠다.
# 사용한 오픈소스
JGProgressHUD : https://github.com/JonasGessner/JGProgressHUD
로딩바 띄우기