페이지네이션 & 무한스크롤 구현하기

 

 

프로젝트를 진행하는 도중 필요한 기능이 생겼다.

 

서비스내에 있는 게임들을 가나다순으로 정렬하여 사용자들에게 보여줘야했다.

 

하지만 한번에 모든 게임목록들을 가져다 보여주는 것은 게임 수가 많아질 수록 효율성이 떨어진다.

 

사용자가 한번에 볼 수 있는 게임의 숫자를 적절히 정해서 필요한만큼만 그때그때 보여주는 것이 효율적이다.

 

게시판에 게시글목록을 볼때도 마찬가지.

 

 

 

 

그래서 게임목록을 가나다순으로 20개씩 끊어서 보여주기로했고, 페이지네이션을 이용하게되었다

 

FE는 게임목록을 요청할때 page를 1부터 2, 3, 4... 하나씩 올려가며 요청하면된다.

 

BE는 전달받은 page에 X20을 해서 그만큼을 생략하고( OFFSET ), 추가 20개만 보여주면된다( LIMIT )

 

**DB의 OFFSET과 LIMIT를 이용하기

 

 

//게임목록불러오기
router.get('/', async (req, res, next) => {
    let { page } = req.query;
    //20개씩 불러오기
    const skip = (page - 1) * 20;

    try {
    	//게시글 제목순으로 정렬해서, 페이지*20만큼 생략하고, 20개만 보여준다
        const gameSelectSQLResult = await pool.query(
            `SELECT 
                *
            FROM 
                game
            WHERE 
                deleted_at IS NULL 
            ORDER BY 
                title ASC
            LIMIT        //20개만 보여주기
                20
            OFFSET       // page*20개만큼 생략하기
                $1`,
            [skip]
        );

        const gameList = gameSelectSQLResult.rows;

        res.status(200).send({
            data: {
                page: page,
                skip: skip,
                count: gameList.length,
                gameList: gameList,
            },
        });
    } catch (e) {
        next(e);
    }
});

 

 

 

 

 

게임목록보기 요청결과)

 

{
    "data": {
        "page": "1", // 요청받은 페이지
        "skip": 0,   // 앞에 생략한 게임 수
        "count": 5,  // 현재 가져온 게임 수
        "gameList": [  // 게임리스트
            {
                "idx": 4,
                "title": "산리오",
                "post_count": "26",  // 현재게임의 게시글 수
                "imgPath": "https://game~"
            },
            {
                "idx": 7,
                "title": "오렌지게임",
                "post_count": "9",
                "imgPath": "https://game~"
            },
            {
                "idx": 5,
                "title": "수박게임",
                "post_count": "4",
                "imgPath": "https://game~"
            },
            {
                "idx": 6,
                "title": "딸기게임",
                "post_count": "3",
                "imgPath": "https://game~"
            },
            {
                "idx": 8,
                "title": "지뢰찾기",
                "post_count": "1",
                "imgPath": "https://game~"
            }
        ]
    }
}