페이징에 대한 이해 - 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" : {

// 게시판 정보

},

……

]

}

Extension...

게시판에는 항상 검색이라는 것이 들어갑니다. 위에서 얘기했던 내용을 추가해 보도록 하겠습니다.

           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 구성을 해보도록 하겠습니다.