[VUE.JS] 페이징 처리 컴포넌트

FRONT (pagenation.vue)

<template>
  <div class="pagenation">
    <div class="wrap">        
        <v-icon class="arrowL" @click="start ? sendPage(start) : ''">mdi-chevron-left</v-icon>
        <div class="page" :class="{'pageSelected' :  pageSetting.pageSelect == pageNum}" v-for="(pageNum,pIdx) in pagingList" :key= "pIdx" @click="sendPage(pageNum)">{{pageNum}}</div>
        <v-icon class="arrowR" @click="end !== null ? sendPage(end) : ''">mdi-chevron-right</v-icon>
    </div>
  </div>
</template>
 
<script> 
  export default {
    // pageSetting:{total: 0, //전체 게시물수 pageSelect: 1, //페이지 번호 limit: 5,listCount : 5, //보여줄 갯수}
    props: ["pageSetting"], 
    data(){
        return{          
            start:0, //페이징 시작
            end:0, //페이징 끝
            pagingList : []
            
        }
    },
    watch:{
        "pageSetting.pageSelect"(){
            this.pageDataSetting();
        }
    },
    mounted(){
        this.pageDataSetting();
    },
    methods: {
        sendPage(page) {
            this.pageSetting.pageSelect = page
            console.log(this.pageSetting.pageSelect)
            this.$emit("paging", this.pageSetting.pageSelect)
        },
        
        pageDataSetting(){              
            console.log("pageDataSetting FRONT")                      
            let totalPage = Math.ceil(this.pageSetting.total / this.pageSetting.limit) // 데이터에서 나오게 될 전체 페이징 수   

            this.start = this.pageSetting.pageSelect  > 1 ? this.pageSetting.pageSelect - 1 : null
            this.end = totalPage !== this.pageSetting.pageSelect ? this.pageSetting.pageSelect + 1 : null
            
            let startIndex = (Math.ceil(this.pageSetting.pageSelect / this.pageSetting.pageSize) - 1) * this.pageSetting.pageSize + 1
            let endIndex = startIndex + this.pageSetting.pageSize > totalPage ? totalPage : startIndex + this.pageSetting.pageSize - 1
            
            this.pagingList = []
            for (let index = startIndex; index <= endIndex; index++) {
                this.pagingList.push(index)
            }
        }
    }
  }
</script>
<style lang="scss" scoped>
    .pagenation {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100px;

        .wrap {
            display: flex;
        }

        .page {
            border: 1px solid #F5F4F4;
            padding: 5px 10px;
            font-size: 16px;
            color: #878787;
            cursor: pointer;
            margin: 0 8px;
        }

        .pageSelected {
            color: #161C31;
            font-weight: 700;
        }

        .arrowL {
            color: #161c31;
            cursor: pointer;
        }

        .arrowR {
            color: #161c31;
            cursor: pointer;
        }
    }
</style>

BACK(getTestPagination API) with MySQL

        async getTestPagination(req, res) {
            console.log("getTestPagination API")
            let { type, limit, offset } = req.query

            let com_id = req.session.comInfo.com_id

            // 보여지는 갯수 만큼 곱하기
            if (offset > 0) {
                offset *= limit
            }

            try {
                let sql = `
                SELECT 
                    a.idx,
                    a.title,
                    a.content,
                    a.regdate,
                    al.total_count total
                FROM test a,
                (SELECT count(*) total_count FROM test) al
                ORDER BY regdate DESC       
                LIMIT ${limit} OFFSET ${offset}
                `;
                let result = await db.query({ sql })

                if (result.state) {
                        res.send({ result: "OK", data: result.rows })
                    } else {
                        res.send({ result: "NODATA" })
                    }
                } else {
                    res.send({ result: "FAIL" })
                }
            } catch (e) {
                console.log(e)
            }
        },