페이징에 대한 이해 - 1
이번 글은 페이징에 대한 글 입니다.
게시판 형태의 UI에 데이터를 표현할 때, 데이터를 한번에 액세스하면 문제가 생기기 마련입니다. 그래서 대부분의 게시판 형태의 UI에서는 게시판 데이터를 모두 액세스하는 것 보다는 일정부분 데이터(ex. 한 페이지당 10개씩)를 가지고 와서 효율적인 처리를 하게 됩니다. 그리고 다음 부분에 대한 데이터를 액세스하기 위해서 페이지 UI를 구성합니다.
그렇다면, Restful 방식의 URL 구성을 해보겠습니다.
ex)
URL : www.wonchul.com
Method : GET
Mapping : /notice
Param : ?page={num}
[ Client 입장 ]
Client입장에서는 처음으로 게시판 방문 시, 페이지 1(Default)에 해당하는 데이터를 Server로 부터 받아옵니다. 여기서 빠르게 눈치를 채실 수 있는 점은 그럼 페이지 구성은 어떻게 하지? 라는 의문점이 생깁니다. 그 부분은 [Server 입장] 에서 설명하도록 하겠습니다.
www.wonchul.com
Client ----------------------------------> Server
첫 방문 시에는, page에 대한 값이 있을 수도 있지만 없을 수도 있습니다.(개발자 마음입니다.. 하지만 URL이 변경될 수 있으니 없을 때에 대한 처리도 해야 할 것 입니다.)
그 다음, Client 는 다음 페이지에 대한 데이터를 액세스 하고 싶어합니다.
www.wonchul.com?page=2
Client ----------------------------------> Server
www.wonchul.com?page=3
Client ----------------------------------> Server
……
www.wonchul.com?page={num}
Client ----------------------------------> Server
[ Server 입장 ]
Server입장에서는 Client가 처음으로 게시판 방문 시, 페이지 1(Default)에 해당하는 데이터를 Response 해줘야 합니다. 여기서 추가적으로 생각해야할 점은 Client에게 페이지 구성을 할 수 있도록 페이지에 대한 정보도 같이 Response 해줘야 합니다.(한 페이지당 게시물이 10개 라고 가정)
Reponse 데이터를 JSON 형태로 간단하게 표현을 하면,
{
"pageVo" : {
// 페이지 정보
},
"noticeList" : [
"noticeVo" : {
// 게시판 정보
},
"noticeVo" : {
// 게시판 정보
},
……
]
}
이와 같은 형태 입니다.
www.wonchul.com
Client <---------------------------------- Server
page = 1 이라고 했을 때,
{
"pageVo" : {
"pageNo" : 1, // 현재 Page 번호
"recordSize" : 10, // 페이지에 구성될 게시물 갯수
"totalSize" : 100 // 게시물 전체 갯수
},
"noticeList" : [
"noticeVo" : {
// 게시판 정보
},
"noticeVo" : {
// 게시판 정보
},
……
]
}
www.wonchul.com?page={num}
Client <---------------------------------- Server
page = n 이라고 했을 때,
{
"pageVo" : {
"pageNo" : n, // 현재 Page 번호
"recordSize" : 10, // 페이지에 구성될 게시물 갯수
"totalSize" : 100 // 게시물 전체 갯수
},
"noticeList" : [
"noticeVo" : {
// 게시판 정보
},
"noticeVo" : {
// 게시판 정보
},
……
]
}
www.wonchul.com?page={num}&option={option}&keyword={keyword}
Client <----------------------------------> Server
{
"pageVo" : {
"option" : {option}, // 검색 옵션(ex. 제목 or 내용)
"keyword" : {keyword}, // 검색 키워드(ex. 원철 or 티스토리)
"pageNo" : n, // 현재 Page 번호
"recordSize" : 10, // 페이지에 구성될 게시물 갯수
"totalSize" : 100 // 게시물 전체 갯수
},
"noticeList" : [
"noticeVo" : {
// 게시판 정보
},
"noticeVo" : {
// 게시판 정보
},
……
]
}
끝으로, 다음 페이징에 대한 이해 - 2 에서는 쿼리 작성과 전체적인 UI 구성을 해보도록 하겠습니다.