mvvm 부시기 🫡

모델과 서비스 구현 부분 1편 에 이어서, 2편을 적어보겠다.

이번에는 무한스크롤에 관한 내용이다.

무한스크롤

무한스크롤을 사용하게 되면, 흐름이 끊기지 않게 사용자가 원하는 콘텐츠를 계속 제공해 줄 수 있다.

토이프로젝트 적용한 이유

이번 토이프로젝트에 무한스크롤을 적용한 이유는, "쇼핑" 이라는 특정 상 제품을 훑어보는 사용자에게 많은 정보를 주기 위해서였다.
그리고, 이때 한번에 많은 정보를 주면 로딩속도가 오래 걸리기 때문에 일정 갯수를 먼저 보여준 다음, 사용자가 더 많은 정보를 원할때 그다음 정보를 제공해 줄 수 있기 때문에 적용하였다.

구현 내용

로직

- 포스트맨 결과

우선 api에서 제공해 주는 건 total 아이템 수 이다.
그리고 쿼리로 보내줄때, start 와 display 수를 정해줄 수 있다.
start는 시작 넘버이고, display는 한번에 몇개를 보여줄지 결정해주는 쿼리이다.
따라서, 만약 display를 20으로 정해줬다면, start를 21로 늘려주게 되면 다음 아이템목록들을 볼 수 있다.

다만, start의 최댓값이 1000이기 때문에, total 아이템수와 start 값을 비교해서 total 아이템수가 많아, start 값이 최댓값을 넘어설때의 이슈를 해결해줄 필요가 있다.

코드

func next(_ query: String, shoppingResponse : ShoppingResponse, onCompleted: @escaping (ShoppingResponse) -> Void) {
    let totalItems : Int = shoppingResponse.total
    let maxNum : Int = getMaxNextNum(totalItems)
    startNum += 20
    guard let url = api.searchItems(query: query, start: startNum).url else {return}
    if startNum <= maxNum{
        AF.request(url, method: .get, parameters: nil, encoding: JSONEncoding(), headers: ShoppingAPIHeader.HEADERS)
            .validate()
            .responseDecodable(of: ShoppingResponse.self) {
                response in
                switch response.result {
                case .success(let response):
                    self.addedData = response
                    onCompleted(self.addedData)
                case .failure(let error) :
                    print(error.localizedDescription)
                }
            }
    } else {
        print("검색결과를 다 불러왔어요")
    }
}

지난 편에 적었던 getItmes 함수와 비슷하지만 살짝 다른점이 있다.
우선 total 값을 가지고와서, maxNum을 구해주는 로직을 추가하였다.
이 코드가 내가 생각한 start 값이 최댓값을 넘어설때의 이슈의 해결법이다.

 func getMaxNextNum(_ totalItems : Int) -> Int {
   return totalItems > 1000 ? 1000 : totalItems
}

위의 함수를 통해 maxNum이 정해지면, startNum을 20씩 증가하여, maxNum 전까지 (즉 데이터가 있을때까지) 아이템을 계속 불러올 수 있다.

이렇게 하면 네트워크 통신을 담당하는 서비스 부분 구현은 끝났다.
이제 뷰모델에서 기존 데이터와 추가적으로 불러온 데이터를 합치는 로직이 필요하다.
다음엔 이부분을 뷰모델에서 처리하는 부분을 정리해보겠다.