본문으로 바로가기

Node.js 게시물 개수 및 번호 매기기와 페이지 나누기

 

 

 

1. 게시물 개수 및 번호 매기기와 페이지 나누기


일반적인 게시판을 작성한다는 가정 하에 


게시물 수와 게시판에 보여줄 번호를 매기는 방법과


페이지를 나누는 방법이다.




[ mysql을 연동시킨 HeidiSQL 화면 ]



데이터베이스에 게시물 2개를 추가한 상태에서


다음과 같이 게시물 수를 수동적으로 입력해 표 행을 반복하여


웹페이지 출력하는 게시판 목록을 띄운다.


이러한 번거로운 일을 자동으로 바꾸는 과정이다.




 

이 작업을 자동적으로 수행하게 하려면 행의 길이를 알면 되는데

 

데이터베이스에 쿼리문을 보내 행의 길이를 알아내기엔 너무나 코드가 길어지기 때문에

 

이미 이 페이지에서는 rows라는 json형식을 불러와 출력해주고 있음을 알고 있다.


'rows.length'를 사용하여 반복문에 조건을 걸면 되지만


다른 방법을 사용하겠다.



먼저 콘솔창에 rows라는 변수가


데이터베이스에 존재하는 게시물 전체를 가지고 있는 지


서버에서 클라이언트에서 접속과 동시에 console.log를 사용해 확인해본다.





 2개의 json형식의 리스트가 입력된 것을 볼 수 있다.



일반적으로 ejs 코드 상에서 rows.length를 사용하지 않고


서버에서 Object.keys(인자)를 사용하여 값을 보내주도록 하겠다.


인자 부분에 배열을 넣고, 파라미터 함수로 length, filter, map 등이 있다.

 


 


그 중 length를 사용하여 길이를 구하고


구한 값을 leng이라는 변수에 넣는다.


구한 값은 1부터 시작한 숫자이기 때문에


나중에 반복문을 돌리기 위해 -1 한다.



페이지를 나눌 때 각 페이지당 몇 개의 게시물을 보여줄 지


숫자도 page_num이라는 변수에 담아 함께 보낸다.


 



page_num이라는 변수에 10을 넣었기 때문에


첫페이지 일 때 10개의 페이지를 보여줘야 하고

 

그 페이지 행 수를 나열하면 1~10이다.

 

2페이지는 11~20이고, 3페이지는 21~30 이 되는데,

 

배열에서는 0~9, 10~19, 20~29 이기 때문에

 

배열에서의 공통점을 보면 앞의 숫자가 10씩 늘어나는 것이고

 

반복문을 수행하려고하면 (현재페이지 * 페이지당 행 개수) - 페이지당 행 개수를 하면

 

현재페이지가 1일 때 0부터 시작하고, 현재페이지가 2일 때 10부터 시작한다.

 


남은 건 조건문인데 마지막도 반복되는 것이 10보다 9, 20보다 작은 19, 30보다 작은 29이기 때문에


현재페이지 * 페이지당 행 개수 보다 작을 때까지하면


 

조건문이 원하던 반복문에 성립되어서 한페이지당 10개의 개시물만 보여준다.

 

leng이라는 변수는 조건문을 걸어 만약 한페이지에 10개도 안되는 게시물이 있을 경우엔

 

단순히 1씩 증가하여 반복문이 종료될 수 있도록 한다.

 

 

페이지의 개수는 총 게시물 수를 10(페이지 당 행 개수)으로 나누어

 

반복문을 사용해 페이지가 몇장인지 밑에 출력하여 이동할 수 있도록 한다.

 

 





2. 번호 순서 반대로 바꾸기



게시판 작성 중에 번호가 1번부터 시작하고, 글을 작성하여 게시할 경우

 

맨 마지막에 삽입되어 불편한점이 있다.

 

그래서 반대로 맨 마지막에 삽입된 게시물이 제일 첫 번째 게시물로 올라오고

 

순번도 반대로 맨 마지막이 1이 될 수 있게 변경하겠다.





처음엔 각 페이지에 10개의 게시물을 표현하려고 10이라는 숫자를

 

page_num(페이지당 행 개수)에 담아 반복문을 수행해

 

(현재페이지 * 페이지당 행 개수) - 페이지당 행 개수 를 하여

 

1번부터 10번째 게시물, 11번부터 20번 게시물.. 했,

 

(현재페이지 * 페이지당 행 개수) 보다 작을 때까지하여 반복문을 수행했다.

 

또한 조건문에 걸어 만약 한페이지에 10개도 안되는 게시물이 있을 경우엔 if문을 걸어

 

단순히 1씩 증가하여 반복문이 종료되는 것이였는데

 

 

반대로 마지막 게시물을 맨 앞으로 올리려고 했을 때

 

i = leng(총 개시물 수) - ((현재 페이지 * 페이지 당 행 개수) - 페이지당 행 개수) 로 하여

 

현재 페이지에서 가장 큰 숫자를 넣는다.



ex) 총 게시물수 : 24개 페이지당 행 개수 : 10개 라면




(페이지 총 게시물을 가져온 값에서 -1 한 값을 render 시켰기 때문에 23)

 

1페이지 = 23 - ((1 * 10) - 10) = 23

2페이지 = 23 - ((2 * 10) - 10) = 13

3페이지 = 23 - ((3 * 10) - 10) = 3



앞에 와는 다르게 반복문 내부의 조건문에서 마지막 페이지의 게시물이 10개도

 

아닌 상황이 왔을 때 rows에서 데이터를 가져오는 상황이 발생하면 에러가 발생하기 때문에

 

i의 값이 0보다 작을 때 반복문을 종료할 수 있도록 break문을 걸었다. 





이제 게시판에 글을 쓰면 맨 마지막 페이지에 추가되며


제일 처음에 썼던 게시물이 첫페이지 상단에 올라왔다.





저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

댓글을 달아 주세요

  1. 이준서 신고">2016.08.28 04:14 신고

    감사합니다! 한참 찾았는데, 도움 많이 됐어요!!

티스토리 툴바