1. 로딩화면 변경 및 추가
- Text로 되어있던 밋밋한 로딩화면을 GIF로 변경
- 검색화면, 시편필사 페이지에 로딩화면 추가
2. 너무 많은 검색결과로 인해 발생하는 로딩지연 문제 발생
'여호와' 검색시 5천개가 넘는 구절이 나옴,
웹페이지가 다운된 것 같은 오랜 로딩이 소요됨.
1) Front
(1) 무한스크롤 기능 추가
- 스크롤이 바닥에 닿을 때마다 fetch로 서버데이터를 추가로 가져오도록 설정
// 무한 스크롤
let page = 1;
async function fetchItems() {
try {
const reponse = await fetch(`http://127.0.0.1:3300/api/bible/search?query=${searchWord}&page=${page}`)
const bibleData = await reponse.json()
page += 1;
return bibleData.bibles
}
catch (error) {
console.log(error)
}
}
// 스크롤 이벤트 감지
const contents = document.querySelector('.contents')
contents.addEventListener('scroll', () => {
const { scrollTop, scrollHeight, clientHeight } = contents;
if (scrollTop + clientHeight >= scrollHeight - 1) {
async function getScrollData() {
const scrollResults = await fetchItems()
if(scrollResults.length == 0) {
return;
}else {
displayContent(scrollResults, searchWord)
return scrollResults
}
}
// 페이지의 하단에 도달하면 추가 데이터 요청
getScrollData()
}
});
2) Back
(1) 몽고DB쿼리 수정
- GPT가 알려준 .skip() .limit() 함수 사용
.skip(건너뛸컨텐츠)
.limit(보여줄컨텐츠)
// 성경전문검색
router.get('/search', expressAsyncHandler(async (req, res) => {
console.log('리퀘쿼리', req.query)
try {
const page = parseInt(req.query.page) || 1;
const perPage = 20; // 페이지당 아이템 수
const skipItems = (page - 1) * perPage;
const bibles = await Bible.find({ content: { $regex: req.query.query } }).sort({ book:1, chapter:1, verse: 1})
.skip(skipItems)
.limit(perPage);
res.status(200).json({ code: 200, message: '성경검색 성공', bibles });
} catch (err) {
res.status(500).send();
}
}));
# 친절한 gpt의 설명
.skip() 함수는 MongoDB 쿼리에서 사용되며, 쿼리 결과에서 일정 개수의 문서를 건너뛰고 그 다음 문서부터 반환하도록 하는 함수입니다.
주로 페이지네이션 기능을 구현할 때 사용됩니다. 예를 들어, 사용자에게 한 번에 페이지당 10개의 결과를 보여주고 싶을 때, 첫 번째 페이지에서는 .skip(0)을 사용하여 처음부터 10개의 결과를 가져옵니다. 그리고 두 번째 페이지에서는 .skip(10)을 사용하여 처음 10개의 결과를 건너뛰고 그 다음 10개의 결과를 가져올 수 있습니다.
일반적으로 .skip()은 큰 데이터셋에서는 사용을 지양해야 합니다. .skip()은 지정된 수만큼의 결과를 건너뛰기 때문에, 결과를 가져올 때마다 건너뛰어야 하는 문서 수만큼 데이터베이스가 작업을 수행해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 대신 페이지네이션을 구현할 때 .limit()과 함께 사용하여 적절한 페이지를 가져오는 것이 좋습니다.
.limit() 함수는 MongoDB 쿼리에서 사용되며, 쿼리 결과에서 반환할 문서의 최대 개수를 제한하는 함수입니다.
이 함수는 주어진 숫자에 따라 쿼리 결과의 문서 개수를 제한합니다. 예를 들어, .limit(10)을 사용하면 쿼리 결과에서 최대 10개의 문서만 반환하게 됩니다.
.limit() 함수는 페이지네이션에서 특정 페이지에 보여줄 문서 수를 제한하는 데 유용하게 사용됩니다. .skip() 함수와 함께 사용하여 특정 수의 문서를 건너뛰고 그 다음에 나오는 일정 수의 문서를 가져올 때 사용될 수 있습니다.