게시판 페이징 추가

전체 소스코드 : https://github.com/imtaekh/my_app/tree/edd2d79605ad6f1cdf2c6313eac4a2328288301e 

테스트 사이트 : https://azure0777board.herokuapp.com

여러분께서 게시판에 글을 남겨주셔서 글이 15개나 되었네요. 이제 슬슬 페이지가 필요할 때입니다.

mongoose-pagination 이라는 package를 사용해도 되는데, 사실 크게 어렵지도 않고 mongo DB 공부도 할 겸 그냥 코딩하였습니다.

참고로 페이지넣는 것을 영어로 pagination이라고 합니다.

아래쪽에 1, 2 라고 페이지가 표시되었죠. 현재 페이지는 진하게 표시되고, 클릭할 수 없게 하였습니다.

페이지가 별로 없으니까 한페이지에 표시되는 글을 1개로 줄여서 강제로 페이지를 늘려보았습니다.

 

처음 3페이지, 마지막 3페이지, 그리고 현재 페이지와 좌우 2페이지는 항상 표시하고, 나머지는 ... 으로 표시되게 하였습니다.

우선 back end쪽 부터 살펴봅시다. routes/posts.js파일입니다.

오늘의 가장 핵심적인 부분은 14줄의 .skip(skip).limit(limit) 인데, 

mongoDB에서 자료를 가져올때 결과를 skip만큼 건너뛰고 limit 개수 만큼만의 결과만 읽어옵니다.

이 skip이 사실 데이터를 실제로 skip하지 않고 skip과정의 데이터도 모두 읽어드려서(mongoDB상에서) 성능에 저하를 가져온다는 말도 있는데, 일단 데이터를 수십만개 가지고 있는게 아닌 경우는 일단 무시합시다. 

skip을 쓰지 않고 pagination을 구현하려면 DB 상에 게시물 번호를 1번부터 데이터 생성순으로 작성 한 후에 해당 페이지에 보여지는 게시물 DB에서 검색하여 보여주면 됩니다. 예를 들어 전체 게시물이 100개이고 한페이지당 10개의 게시물을 보여줄때 2페이지의 글을 읽어오려면 90~80번의 게시물을 읽어 오는 식이죠. 이 방법은 성능이 더 좋지만 만약 게시물이 지워진 경우 한페이지에 10개보다 적은 게시물이 보여질 수도 있습니다. 알아서 사용해주세요.

다음으로 front end 쪽입니다.

54번째 줄 : pagination을 하는데, maxPage만큼 반복문으로 번호를 줍니다.

55번째 줄 : 번호가 offset보다 같거나 작은 경우나, 마지막번호에서 offset를 뺀 값보다 크거나, 현재 페이지 보다 offset-1 범위보다 작은 경우에는 번호를 찍고

61번째 줄 : 그렇지 않은 경우 중 번호가 offest보다 1크거나 마지막번호에서 offset을 뺀 값일 경우에 ... 을 표시합니다.

56~60번째 줄 : 번호가 현재 페이지의 번호일 경우에는 링크를 하지 않습니다.

44번째 줄은 게시글을 클릭했을 때 back 버튼에 현재 페이지 번호를 넣어주는 부분입니다.

받은 페이지 번호를 show에서 전달해 준 후에


front end로 전달해 줍니다.

[출처] [Node.js 강좌] 게시판 페이지 기능 추가|작성자 azure0777