쇼핑몰 사이트 만들기13(더보기 버튼 만들기)

요번에는 더보기 버튼을 만들어볼건데요.

Mongo DB를 이용해서 저 기능을 만들어줄건데요. MongoDB에서 제공해주는 메소드가 SKIP이랑 LIMIT이 있는데요 그것들을 활용해서 기능을 만들어주겠습니다.

처음에 LIMIT에 대해서 설명을하자면 처음에 데이터를 가져올 때 얼마나 많은 데이터를 한번에 가져오는지와 그리고 가져온다음에 더보기 버튼을 눌렀을 때 또한 몇개까지 가져올 수 있는지입니다. 그래서 LIMIT은 최대한 가져올 수 있는 아데이터 크기를 말합니다.

저희는 처음에 최대한 8개를 가져오고 더보기 버튼을 누를 때마다 최대한 8개의 아이템들을 더 가져올 수 있게 해줄 것입니다.

 

그리고 SKIP은 어디서부터 데이터를 가져오는지에 대한 위치입니다. 처음에는 0부터 시작을 합니다. 만약 LIMIT이 8이면 2번째 SKIP을 할 때 0 + 8 = 8

 

 

 

이제 기능을 만들어주겠습니다.

만약 limit이 string 형태일 경우에는 parseInt를 사용하여 int형으로 바꿔주고 request limit이 없으면 100으로 지정합니다. 또한 skip도 int형으로 바꿔주고 만약 값이 없으면 0으로 지정해줍니다.

 

 

결과:

결과를 확인해주기 위해서 일단 업로드된 상품이 9개로 만들어주겠습니다.

 

상품이 9개가 있는걸 확인할 수 있습니다.

 

하지만 화면으로는 저희가 최대 8개만 보이게 설정해놔서

 

위 사진처럼 뜨는 것을 확인할 수 있습니다.

 

다음에는 더보기 버튼에 기능을 넣어주는 부분을 처리해주겠습니다.