포스트

챌린지반 과제 (4)

계속 해보려고한다.

저번에 스크롤을 내릴때 페이지를 1증가하게 하여 값을 가져오게 하려고 했는데 한번에 페이지수가 급증을 하는것 같아 스크롤을 내릴때 로딩페이지를 만들어 api 트래픽도 관리를 하는게 좋아보인다.

로딩 셀 만들기.

CustomCell을 하나 더 만들어주고 LoadingCell이라고 이름을 짓는다.

여기엔 UIActivityIndicatorView라고 하여, pull to refresh처럼 로딩액션이 뜨게 한다.

사이트 참고 하여 만들어 본다.

1
2
3
func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

로딩셀을 표시하기위해 섹션을 하나 더만들어 주고,

1
2
3
4
5
6
7
8
9
10
11
12
13
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if section == 0 {
            
            return repoList.count
            
        } else if section == 1 {
            
            return 1
        }
        
        return 0
    }

일단은 섹션이값이 0일땐 repository값을 가져오게 하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == 0 {
            
            guard let cell = tableView.dequeueReusableCell(withIdentifier: Constants.identifier, for: indexPath) as? RepoTableViewCell else { return UITableViewCell() }
            
            cell.repoLabel.text = repoList[indexPath.row].name
            cell.languageLabel.text = repoList[indexPath.row].language
            cell.selectionStyle = .none
            print(indexPath)
            return cell
        } else {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: Constants.secondCellName, for: indexPath) as? LoadingCell else {
                return UITableViewCell()
            }
            cell.start()
            print(indexPath)
            
            return cell
        }
    }

그리고 새로 추가한 셀을 section값이 0일때 1일때 구분하여 1일때는 로딩화면이 나오는 셀을 나오게 한다.

실행화면

Apr-01-2024-06-48-44

로딩시 값 가져오기.

여러 참고 사이트를 보다보니 처음에는 어떻게 해야할지 뭔가 감이 안섰는데, 오늘은 감이 좀 오기 시작하는 듯 하다.

어제 테스트를 바탕으로 무지성으로 1씩 증가를 하면 안되겠다라는 생각이 든다.

저 로딩화면은 DispatchQueue.main.aysncAffer를 통해 약간의 시간적인 딜레이를 주면 될것같고,

내가 해당 페이지를 가져올지 안가져올 지는 boolean값을 주어 로딩할지 안할지에 대해서 정하면 될듯하다.

var isLoadingPage: Bool = false 하나 만들어 주었다.

페이지를 로딩 할지 안할지 이다.

함수도 수정해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if section == 0 {
            
            return repoList.count
            
        } else if section == 1 && isLoadingPage { //new
            
            return 1
        }
        
        return 0
    }

그리고 스크롤을 내릴때 true로 일단 해보았다.

1
2
3
4
5
6
7
8
9
10
func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        let height = scrollView.frame.height
        
        // 스크롤이 테이블 뷰 Offset의 끝에 가게 되면 다음 페이지를 호출
        if offsetY > (contentHeight - height) {
            isLoadingPage = true
        }
    }

작동하지 않았다. 이상태에서는 섹션이 하나 더 추가되지 않는다.

하나 더 만들어 주기위해 함수를 하나 더 만들어 준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
func loadPage () {
        isLoadingPage = true
        
        // Section 1을 reload하여 로딩 셀을 보여줌 (페이징 진행 중인 것을 확인할 수 있도록)
        DispatchQueue.main.async {
            self.tableView.reloadSections(IndexSet(integer: 1), with: .none)
        }
        
        // 페이징 메소드 호출
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            print("loaded")
        }
    }

로딩셀이 나오는 걸 확인했다.

loaded 자리에 값을 가져오는 함수 구현

이제 저 출력한 자리에 값을 가져오게하는 함수를 구현하면 된다.

1
2
3
4
5
6
7
func addPage () {
        
        currentPage += 1
        gitManager.fetchRequestAppleRepo(page: currentPage)
        isLoadingPage = false
        
    }

addPage라는 함수를 만들고 호출될떄마다 1씩 증가하게 하였다.

작동해보니 잘된다.

하지만 마지막페이지에 대한 인식이 없기에 마지막일땐 더이상 안가져오게 해야하는 기능을 구현해야 할듯 하다.

물론 지금도 마지막엔 값을 가져오지 않긴 하지만 무의미한 api 접속을 방지 하려 한다.

Apr-01-2024-08-44-07

전체 갯수를 알때 더이상 로드 방지

1
2
3
4
5
6
7
8
9
10
11
12
func addPage () {   
        let currentCount = repoList.count
        
        if hasNext {
            currentPage += 1
            gitManager.fetchRequestAppleRepo(page: currentPage, hasNext: hasNext)
            isLoadingPage = false
            if currentCount > 290 {
            hasNext = false
        }
        }
    }

hasNext 변수를 하나 만들고 290개가 넘어갔을때 false를 주어 더이상 로드를 못하게 하였다.

Apr-01-2024-09-53-49

우선 기본 구성은 다 한듯하고 다음글에서는 token을 적용하는걸 적어봐야겠다.

시간 리미트가 너무 빡세서 테스트가 어렵다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.