FrontEnd/Vue.js

[vue/nuxt.js] ๊ฒŒ์‹œํŒ ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ npm ์ถ”์ฒœ! vuejs-paginate ์‚ฌ์šฉํ•˜๊ธฐ(์ƒ˜ํ”Œ ์ฝ”๋“œ)

๊น€ํ‰๋ฒ”๋‹˜ 2022. 1. 14. 09:00
๋ฐ˜์‘ํ˜•

 

๐Ÿ“ƒpaginate๋ž€?

paginate๋ฅผ ์ด์šฉํ•˜๋ฉด DB์— ๋“ฑ๋ก๋˜์–ด์žˆ๋Š” ํ–‰์„ ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋งŒ์•ฝ ๋ฐ์ดํ„ฐ์–‘์ด ๋งŽ๋‹ค๊ณ ํ•˜๋ฉด paginate๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‚˜๋ˆ ์„œ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒŒ ๊ฐ€๋…์„ฑ ์ƒ ์ข‹๋‹ค.

๋ณดํ†ต ๊ฒŒ์‹œํŒํ˜•ํƒœ์˜ UI๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.

 

 

๐Ÿ’กvuejs-paginate

vue.js์—์„œ ์‰ฝ๊ฒŒ ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ œ๊ณตํ•ด์ฃผ๋Š” npm ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

๊ฐ„๋‹จํ•˜๊ฒŒ css๋กœ ๋””์ž์ธ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋„ ๊ฐ€๋Šฅํ•ด์„œ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค. 

 

vuejs-paginate ์„ค์น˜ํ•˜๊ธฐ

https://www.npmjs.com/package/vuejs-paginate

 

vuejs-paginate

A simple pagination component for Vue.js

www.npmjs.com

๋จผ์ € ํ•ด๋‹น ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜์—ฌ npm install ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•ด์„œ ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ์— ๊ฐ€์„œ ์ž…๋ ฅํ•ด์ฃผ์ž.

์„ค์น˜ ์ฝ”๋“œ

npm install vuejs-paginate --save

 

 

 

vuejs-paginate ํ”„๋กœ์ ํŠธ์—  ์—ฐ๊ฒฐํ•˜๊ธฐ

/plugins/client.js

import Vue from 'vue'

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)

nuxt.config.js

module.exports = {
  //...
  plugins: [
    { src: '~plugins/client', ssr: false }
  ],
  //...
};

๋จผ์ € ๋‚œ nuxt๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์„œ

pluginsํด๋”์— client.js์—์„œ ์„ค์น˜๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ์„ ์–ธํ•ด์ฃผ๊ณ 

ํ•ด๋‹น ํŒŒ์ผ์€ nuxt.config.js์—์„œ ํ•ด๋‹น ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์—ฐ๊ฒฐํ•ด์ค€๋‹ค.

 

 

 

vue ์ฝ”๋“œ ์ž‘์„ฑํ•˜๊ธฐ

/page/paginate.vue

<template>
    <div>
        <div>
            ํ˜„์žฌ ์„ ํƒ๋œ ํŽ˜์ด์ง€ : {{selectPage}}
            <paginate
                    :page-count="pageCount"
                    :page-range="3"
                    :margin-pages="2"
                    :click-handler="changePage"
                    :prev-text="'prev'"
                    :next-text="'next'"
                    :container-class="'pagination'"
                    :page-class="'page-item'">
            </paginate>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return{
                selectPage: 1,
                pageCount: 15,
            }
        },
        methods: {
            changePage: function (pageNum) {
                this.selectPage = pageNum
            },
        }
    }
</script>

๊ฒฐ๊ณผ ํ™”๋ฉด

ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ ๋„ฃ์œผ๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ํŽ˜์ด์ง• ๊ธฐ๋Šฅ์€ ์ž˜ ์ž‘๋™๋˜๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

vue pagination ์ž‘๋™ํ™”๋ฉด

์ฝ”๋“œ๋Š” ์ž˜ ์ž‘๋™์ด ๋˜์ง€๋งŒ CSS๋Š” ์ •์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒŒ ๋ณด์ด๋Š”๋ฐ

๊ธฐ๋ณธ์ ์œผ๋กœ vue pagination์€ bootstrap.css๋ฅผ ์ด์šฉํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

ํ•˜์ง€๋งŒ ์ง€๊ธˆ ๋‚ด ํ”„๋กœ์ ํŠธ์—๋Š” bootstrap.css๊ฐ€ ์ ์šฉ๋˜์–ด์žˆ์ง€ ์•Š์•„์„œ ์Šคํƒ€์ผ ์—†๋Š” ์ƒํƒœ์ด๋‹ค.

 

์Šคํƒ€์ผ์„ ์—ฐ๋™ํ•˜๊ณ  ์‹ถ์œผ๋ฉด bootstrap์„ ํ”„๋กœ์ ํŠธ์— ์—ฐ๋™ํ•˜๋˜์ง€

๋‚ด๊ฐ€ ์ง์ ‘ ์ž‘์„ฑํ•˜๋˜์ง€ ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค.

 

 

 

vue-paginate CSS ์ ์šฉํ•˜๊ธฐ

๋‚˜์˜ ๊ฒฝ์šฐ ๋‚ด๊ฐ€ ์ง์ ‘ css๋ฅผ ์ž‘์„ฑํ•ด๋ณด์•˜๋‹ค.

bootstrap์„ ์—ฐ๋™ํ•˜๊ธฐ ์‹ซ์€ ๋ถ„์ด๋ฉด ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ ์šฉํ•˜์ž.

 

/page/paginate.vue css ์ ์šฉ ์ฝ”๋“œ

<template>
    <div>
        <div>
            ํ˜„์žฌ ์„ ํƒ๋œ ํŽ˜์ด์ง€ : {{selectPage}}
            <paginate
                    :page-count="pageCount"
                    :page-range="3"
                    :margin-pages="2"
                    :click-handler="changePage"
                    :prev-text="'<'"
                    :next-text="'>'"
                    :container-class="'pagination'"
                    :page-class="'page-item'">
            </paginate>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return{
                selectPage: 1,
                pageCount: 15,
            }
        },
        methods: {
            changePage: function (pageNum) {
                this.selectPage = pageNum
            },
        }
    }
</script>
<style lang="css">
    .pagination {
        margin:24px;
    }
    .pagination li {
        min-width:32px;
        padding:2px 6px;
        text-align:center;
        margin:0 3px;
        border-radius: 6px;
        border:1px solid #eee;
        color:#666;
    }
    .pagination li:hover {
        background: #E4DBD6;
    }
    .page-item a {
        color:#666;
        text-decoration: none;
    }
    .pagination li.active {
        background-color : #E7AA8D;
        color:#fff;
    }
    .pagination li.active a {
        color:#fff;
    }
</style>

๊ฒฐ๊ณผ ํ™”๋ฉด

vue-paging

vue-paginate์˜ ๊ฒฝ์šฐ :container-class์™€ :page-item์ด๋ผ๋Š” ์†์„ฑ์„ ํ†ตํ•ด์„œ

์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ class๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ง€์ •ํ•œ class์— ๋งž์ถฐ์„œ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” css๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜๋ฉด

์ปค์Šคํ„ฐ๋งˆ์ด์ง•์ด ๊ฐ€๋Šฅํ•œ ๊ฒƒ๋„ vue-paginate๋งŒ์˜ ์žฅ์ ์ด๋‹ค.

๋ฐ˜์‘ํ˜•