24.01.08(목)_로딩페이지, 무한스크롤 기능 구현
1. 로딩화면 변경 및 추가
- Text로 되어있던 밋밋한 로딩화면을 GIF로 변경
- 검색화면, 시편필사 페이지에 로딩화면 추가
2. 너무 많은 검색결과로 인해 발생하는 로딩지연 문제 발생
'여호와' 검색시 5천개가 넘는 구절이 나옴,
웹페이지가 다운된 것 같은 오랜 로딩이 소요됨.
1) Front
(1) 무한스크롤 기능 추가
- 스크롤이 바닥에 닿을 때마다 fetch로 서버데이터를 추가로 가져오도록 설정
2) Back
(1) 몽고DB쿼리 수정
- GPT가 알려준 .skip() .limit() 함수 사용
.skip(건너뛸컨텐츠)
.limit(보여줄컨텐츠)
# 친절한 gpt의 설명
.skip() 함수는 MongoDB 쿼리에서 사용되며, 쿼리 결과에서 일정 개수의 문서를 건너뛰고 그 다음 문서부터 반환하도록 하는 함수입니다.
주로 페이지네이션 기능을 구현할 때 사용됩니다. 예를 들어, 사용자에게 한 번에 페이지당 10개의 결과를 보여주고 싶을 때, 첫 번째 페이지에서는 .skip(0)을 사용하여 처음부터 10개의 결과를 가져옵니다. 그리고 두 번째 페이지에서는 .skip(10)을 사용하여 처음 10개의 결과를 건너뛰고 그 다음 10개의 결과를 가져올 수 있습니다.
일반적으로 .skip()은 큰 데이터셋에서는 사용을 지양해야 합니다. .skip()은 지정된 수만큼의 결과를 건너뛰기 때문에, 결과를 가져올 때마다 건너뛰어야 하는 문서 수만큼 데이터베이스가 작업을 수행해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 대신 페이지네이션을 구현할 때 .limit()과 함께 사용하여 적절한 페이지를 가져오는 것이 좋습니다.
.limit() 함수는 MongoDB 쿼리에서 사용되며, 쿼리 결과에서 반환할 문서의 최대 개수를 제한하는 함수입니다.
이 함수는 주어진 숫자에 따라 쿼리 결과의 문서 개수를 제한합니다. 예를 들어, .limit(10)을 사용하면 쿼리 결과에서 최대 10개의 문서만 반환하게 됩니다.
.limit() 함수는 페이지네이션에서 특정 페이지에 보여줄 문서 수를 제한하는 데 유용하게 사용됩니다. .skip() 함수와 함께 사용하여 특정 수의 문서를 건너뛰고 그 다음에 나오는 일정 수의 문서를 가져올 때 사용될 수 있습니다.