개발 과정 리뷰 -17- 카테고리 및 페이지네이션

#1 카테고리 CSS 구현

 

다음과 같은 느낌으로 디자인했다.

 

사용한 CSS 기술과 배운점은

1. ::before 와 ::after를 이용해서 탭 사이에 여유공간을 만들었다. 이 덕분에 가장 첫번째 탭 왼편에 여유 공간을 만들 수 있었다. 다만 width를 설정해줄 때 주의할점은 기본적으로 이들은 inline이기 때문에 inline-box로 만들어줘야 동작한다.

 

2. 맨 마지막에 tab 요소들을 모두 배치하고 남은 부분의 border-bottom을 따로 주기 위해서 dummy-tab을 만들고 flex:1 로 남은 width를 모두 차지하도록 하였다.

 

 

#2 URL query 사용

const {tab, page} = req.query;

 

간단하게 해당 쿼리로 데이터를 불러오는 건 쉬웠다.

undefined인 경우 자동으로 tab은 all을, page는 1을 불러오도록 설정하는 것도 해주고,

 

재밌는건 pagenation 하는 숫자 버튼의 링크였다.

링크가 현재 카테고리가 존재하면 

<a href="tab=현재카테고리&page=2">2</a>

과 같은 형식으로 설정되도록 만들어야 했다.

 

 

#3 페이지네이션

1. 먼저 총 몇페이지까지 존재하는지 알아내기 위해서 문서의 갯수를 세는 mongoose 코드를 알아봤는데,

model.count() 와 model.countDocuments() 함수 두 종류가 있었다.

 

"Specifies this query as a countDocuments() query. Behaves like count(), except it always does a full collection scan when passed an empty filter {}."

 

공식 문서상 둘은 거의 완전히 같은 기능을 수행하나, 필터를 비워서 넣으면 countDocuments의 경우 문서를 전부 센다고 한다.

 

아래와 같은 코드를 사용해서 카테고리와 페이지에 따른 문서를 출력했다.

docNum = await Document.countDocuments({category: tab});
//문서 20개 array에 저장해서 넘기기.
documents = await Document.find({category: tab})
.limit(perPage)
.skip(perPage*(currentPage-1))
.sort({
    title: "asc"
});