2차 프로젝트: 중간 정리 (3)

Hyeon Soo·2021년 3월 7일
0

무한 스크롤을 구현할 때, 모든 데이터를 프론트에 전달하고 프론트가 로직을 처리하는 방법도 존재하지만, 페이지의 끝마다 프론트가 요청을 보내고, 그 요청에 따라 서버에서 데이터를 잘라내어 전달하는 방법도 존재한다. 후자는 paginator을 이용한 것인데, 이를 정리해보고자 한다.

paginator를 이용하기 위해선 다음을 미리 설정해주어야 한다.
1. 한번에 보낼 데이터의 갯수
2. 데이터에 수에 따라 변할 요청 횟수의 제한
2의 경우, 마지막 데이터를 보낸 이후에도 프론트는 그것이 마지막 데이터인지 알 수 없기 때문에 새로운 요청을 보낸다. 그때 데이터를 새로 보내는 것이 아니라 마지막 데이터까지 전달 했으므로 적절한 메세지를 반환해야 할텐데, 그 기준을 정해주는 것이다. 전체 코드는 다음과 같다.

class DetailPaginationView(View):
    def get(self, request, posting_id):
        PER_PAGE = 4#한번에 보낼 데이터의 갯수
        try:
            posting         = Posting.objects.get(id=posting_id)
            posting_related = Posting.objects.filter(job_category=posting.job_category).exclude(id=posting_id)
            limit_page      = math.ceil(posting_related.count()/PER_PAGE)#마지막 데이터를 보내는 최종 요청
            page            = request.GET['page']#페이지의 마지막에 다다를 때 마다 프론트에서 새로운 데이터를 요청
            paginator       = Paginator(posting_related, PER_PAGE)#데이터의 묶음에서 한번에 보낼 갯수를 설정함

            if int(page) > limit_page:
                return JsonResponse({"message": "NO_MORE_POSTING"}, status=404)#최종 데이터를 보낸 후의 요청에 대해 더이상 데이터가 없다는 메세지를 반환

            posting_related = paginator.get_page(page)#요청에 맞는 데이터를 잘라냄
            posting_list    = [
                        {
                        'id': posting_related.id,
                        'img': [image.image_url for image in posting_related.company_detail.company.companyimage_set.all()][0],
                        'like': posting_related.like_set.all().count(),
                        'title': posting_related.title, 
                        'company': posting_related.company_detail.company.name,
                        'city': posting_related.company_detail.state.name,
                        'nation': posting_related.company_detail.county.name,
                        'bonus': int(posting_related.reward),
                        } for posting_related in posting_related]

            return JsonResponse({"message": "SUCCESS", "data": posting_list}, status=200)

        except Posting.DoesNotExist:
            return JsonResponse({"message": "BAD_REQUEST"}, status=404)

위와 같은 방식으로 구성하면 된다. 이때, 프론트에서의 요청은 query parameter로 받는다.

0개의 댓글