24.01.08(목)_로딩페이지, 무한스크롤 기능 구현

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() 함수와 함께 사용하여 특정 수의 문서를 건너뛰고 그 다음에 나오는 일정 수의 문서를 가져올 때 사용될 수 있습니다.