[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Paging 처리

 

 

🧑🏻‍💻 Git Hub 주소

 

 

 

🗂 목차

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Home / Main

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 목록 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 상세 조회

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 삭제

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 등록 / 수정

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 게시판 만들기 : 답변 삭제

 

👨‍👩‍👧‍👦 회원 관련

● [FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - 회원 관련 : 회원 가입

 

- 부 록 -

[Vue.js] axios 설치

[FrontEnd] html Tag 정리

[CSS] CSS 정리

[FrontEnd][Vue-PJ] 개발자 커뮤니티 서비스 - Paging 처리

[Vue.js] 기초 개념 정리 - Vue Router

 

 

 

 

 

 

 

 

 

 

🚀 게시판 만들기 - Paging 처리

 

Paging 처리

 

<!-- Paging 처리 관련 Component -->
<template>
  <div class="tPages">

    <ul>
      <li class="prev02">
        <a href="javascript:;" @click="firstPage">
          <img :src="require(`@/assets/images/btn_first.png`)">
        </a>
      </li>

      <li class="prev">
        <a href="javascript:;" @click="prevPage">
          <img :src="require(`@/assets/images/btn_prev.png`)">
        </a>
      </li>

      <li v-for="i in range(startPage, endPage)" v-bind:key="i" :class="classActive(i)">
        <a href="javascript:;" @click="setPage(i)">
          <template v-if="i !== nowPage" style="cursor: pointer;">{{ i }}</template>

          <template v-else-if="i === nowPage">{{ i }}</template>
        </a>
      </li>

      <li class="next">
        <a href="javascript:;" @click="nextPage">
          <img :src="require(`@/assets/images/btn_next.png`)">
        </a>
      </li>

      <li class="next02">
        <a href="javascript:;" @click="lastPage">
          <img :src="require(`@/assets/images/btn_last.png`)">
        </a>
      </li>
    </ul>

  </div>  <!-- div class="tPages" 끝 -->
</template>

<script>
import _ from "lodash";

export default {
  name: "Pagination",
  props: {
    totalCount: {
      type: Number,
      default: 0
    }, // totalCount 끝
    rowCount: {
      type: Number,
      default: 10
    }, // rowCount 끝
    pageLimit: {
      type: Number,
      default: 10
    }, // pageLimit 끝
    currPage: {
      type: Number,
      default: 1
    }, // currPage 끝
  }, // props 끝

  data() {
    return {
      startPage: 1,
      nowPage: 1,
      nowPageBlock: 1,
      pervRowCount: 0
    };
  }, // data() 끝

  watch: {
    currPage: "currPageSet"
  }, // watch 끝

  computed: {
    totalPage() {  // 한 Page 당 건 수 변경 시 1 Page로 설정
      if (this.rowCount !== this.prevRowCount) {
        this.prevRowCount = this.rowCount;

        // 1Page로 변경
        this.setFirstPage();
      } // if (this.rowCount != this.prevRowCount) 끝

      console.log("페이징 처리 부에서 총 페이지 수 : " + this.totalPage + " 를 알려 드립니다!");

      return _.ceil(this.totalCount / this.rowCount);
    }, // totalPage() 끝

    endPage() { // 한 Page 당 건 수 변경 시 1 Page로 설정
      if (this.rowCount !== this.prevRowCount) {
        this.prevRowCount = this.rowCount;
        // 1 Page로 설정
        this.setFirstPage();
      } // if (this.rowCount !== this.prevRowCount) 끝

      const check = this.startPage + this.pageLimit - 1;

      return check <= this.totalPage ? check : this.totalPage;

    } // endPage() 끝
  }, // computed 끝

  methods: {
    range(start, end) {
      return _.range(start, end + 1);
    }, // range(start, end) 끝

    setPage(page) {
      this.nowPage = page;

      this.changePage();
    }, // setPage(page) 끝

    firstPage() {
      // 1 Page로 설정
      this.setFirstPage();

      this.changePage();
    }, // firstPage() 끝

    prevPage() {
      if (this.nowPage > 1) {
        this.nowPage --;
      } // if (this.nowPage > 1) 끝

      if (this.nowPage < this.startPage) {
        this.nowPageBlock --;

        this.startPage = (this.nowPageBlock - 1) * this.pageLimit + 1;
      } // if (this.nowPage < this.startPage) 끝

      this.changePage();

    }, // prevPage() 끝

    nextPage() {
      console.log("페이징 처리 부에서 현재 Page : " + this.nowPage + " 를 알려 드립니다!");
      console.log("페이징 처리 부에서 총 페이지 수 : " + this.totalPage + " 를 알려 드립니다!");
      console.log("페이징 처리 부에서 마지막 페이지 : " + this.endPage + " 를 알려 드립니다!");

      if (this.nowPage < this.totalPage) {
        this.nowPage ++;
      } // if (this.nowPage < this.totalPage) 끝

      if (this.nowPage > this.endPage) {
        this.nowPageBlock ++;

        this.startPage = this.nowPage;
      } // if (this.nowPage > this.endPage) 끝

      this.changePage();

    }, // nextPage() 끝

    lastPage() {
      this.nowPage = this.totalPage;
      this.nowPageBlock = _.ceil(this.totalPage / this.pageLimit);
      this.startPage = (this.nowPageBlock - 1) * this.pageLimit + 1;

      this.changePage();
    }, // lastPage() 끝

    changePage() {
      this.$emit("change-page", this.nowPage);
    }, // changePage() 끝

    classActive(i) {
      if (i === this.nowPage) {
        return "active";
      } // if (i === this.nowPage) 끝
    }, // classActive(i) 끝

    setFirstPage() {  // 1 Page로 설정
      this.nowPage = 1;
      this.nowPageBlock = 1;
      this.startPage = 1;
    }, // setFirstPage() 끝

    currPageSet() {
      this.nowPage = this.currPage;

      if (this.nowPage === 1) {
        this.startPage = 1;
      } // if (this.nowPage === 1) 끝
    } // currPageSet() 끝
  } // methods 끝
}; // export default 끝
</script>

 

위의 Code가 바로 Paging처리를 위한 Component인 Pagination.vue인 것이에요.

 

Panation.vue Paging 처리 부

 

div와 같은 태그들은 생략을 하고, 실제적으로 중요한 내용들에 대해서 분석을 해보려고 하는 것이에요. 먼저 ul Tag를 통해서 순서 없는 목록을 만들어 준 것이에요. 그런 뒤 6~10 번째 줄까지 <li>로 각 항목을 나타내도록 한 것이에요.

먼저 <a> Tag를 통해 href 속성에 javascipt:; 을 주었는데, 이건 `href="#"`과 동일한 내용인 것이에요. 즉, 클릭해도 아무것도 하지 않겠다는 의미로 사용한 것이에요. 어딘가로 이동하기 위해 쓰는 것이 아니라 어떤 처리를 하기 위해 사용한 것이기 때문에 이렇게 해 준 것이에요.

그 다음 Click Event가 발생하면 firstPage()를 호출하도록 해 준 것이에요.

 

firstPage()

 

이름이 아주 직관적인 것이에요.
이 <a> Tag를 클릭하게 되면 아래와 같이 생긴 Button을 클릭한 것인데 (Button은 아니지만, Button이라 칭함) 이건 맨 앞 Page로 이동하는 Button인 것이에요.

 

class="prev02"

 

먼저 해당 Method가 동작하면 setFirstPage()를 호출 하게 되는 것이에요.

 

setFirstPage()

 

최초 해당 Method가 동작하게 되면 nowPage라는 Member 변수에 값이 1로 변하고, nowPageBlock도 1로 startPage 도 모두 1로 초기화가 되어 결국 1 Page로 설정 되도록 해 주는 것이에요.

 

그런 다음 firstPage()로 다시 돌아와서 이번에는 changePage()를 호출하는 것이에요.

 

changePage()

 

이 Method는 this.$emit()을 호출하는데, 이것은 다른 컴포넌트에게 이벤트를 전달하기 위해 이용하는 것이에요. 예를 들어 자식 컴포넌트에서 개발자가 지정한 이벤트를 만들어 부모 컴포넌트에게 어떤 Data를 전달할 수 있는 것이에요. 부모 컴포넌트는 자식 컴포넌트에서 만들어진 개발자 지정 Event를 받아 `v-on` 즉, 특정 동작을 수행할 수 있는 것이에요.

그럼 여기서 말하는 부모 컴포넌트는 누가 될까요?

바로 각 게시판 혹은 회원 관리 등 목록 조회를 하는 모든 컴포넌트가 부모 컴포넌트가 될 것이에요. 지금은 Q&A 게시판에 목록 조회만 완료가 되었기 때문에 이 부분을 확인 해 보면

 

Q&amp;amp;amp;amp;amp;A 게시판 목록 조회 - DevInquryList.vue

반응형

 

이 곳에 위와 같이 Component가 선언된 걸 볼 수 있는 것이에요. changePage()의 this.$emit의 change-page는 부모 컴포넌트에 100번째 줄 @change-page에게 값을 전달해 주는 것인데, 그 값은 바로 `this.nowPage` 즉 현재 이용자가 위치한 Page의 정수 값을 전달 해 주겠다는 것이에요. 그럼 이걸 부모 컴포넌트가 받게 되면 changePage()라는 Method가 실행 되는 것이에요.

 

 

 

 

 

class="prev"

 

이 친구는 한 Page 앞으로 이동하는 Button인 것이에요.
click Event가 발생하면 prevPage()가 호출 되는 것이에요.

 

 

prevPage()

 

이 Method가 호출되면 일단 물어보는 것이에요. "nowPage가 1보다 큽니까?" 즉, 현재 이용자가 있는 위치가 1 Page 보다 큰 곳에 위치해 있어야지 '이 전으로 이동' 이라는 Logic이 합리화가 되기 때문에 물어보는 것이에요.

1보다 크다고 하면 this.nowPage --; 즉 nowPage에 값을 하나 빼겠다는 의미인 것이에요.
만약 이용자가 5 Page에 있다가 이 전 이동 버튼을 누르면 4 Page로 이동하게 되는 것이에요.

 

 

 

 

이 친구는 번호를 Click 함으로 해당 Page로 이동할 수 있게 해 주는 버튼인 것이에요. 자꾸 버튼이라고 하지만 엄연히 따지면 button Tag가 아니라 a Tag로 만들어 졌기 때문에 button은 아닌 것이에요. 그렇다고 link를 통해 이동하는 Logic도 아니니 그냥 버튼이라고 하는 것이에요.

 

먼저 v-for를 통해 range함수를 호출 하는데, startPage의 변수값과 endPage 변수의 값을 전달해 주는 것이에요.

 

data()

 

data() 안에 Member 변수들이 있는 것이에요.
사실 이게 Member 변수가 아니라 data Method return에 정의된 객체(Object)인데, JAVA를 공부한 주니하랑은 Member 변수로 이해하는 것이 훨씬 이해가 빨라서 이렇게 이야기하는 것이니 착오 없길 바라는 것이에요.

JAVA에서 Class에 Member 변수를 선언하고, 생성자에서 초기화를 해 주듯 이 곳에서 선언과 초기화를 모두 할 수 있는 것이에요.

지금 보면 startPage가 1이고, endPage는 아래와 같이 Method가 호출 되는 것이에요.

 

endPage()

 

endPage가 호출 되면 물어 뽀는 것이에요. "rowCount(1 Page에 출력될 게시글 개 수)의 값이 prevRowCount(이 전 Page의 출력될 게시글 개 수와 같지 않습니까?" 라고 말이에요. 같지 않다면 현재 Page에서 출력될 게시글 개수를 이 전 Page에 출력될 게시글 개수에 넣어주고, setFirstPage()를 호출 하는 것이에요.

그럼 결국 1 Page로 이동하게 되는 효과를 만들 수 있는것이에요.

 

그런 뒤 if문을 빠져 나와 startPage에 pageLismit(한 Page 당 보여줄 최대 Data 개수)에 1을 뺀 값을 check에 넣어 주고, 해당 check에 this.totalPage 즉, 총 Page 개수 값 보다 작거나 같으면 check 변수를 반환하고, 아니면 총 Page 개수 값을 반환 해 주는 것이에요.

 

그럼 이제 startPage에 값과 endPage에서 반환된 값을 가지고, range()가 호출이 되고, 

 

range()

 

range()는 lodash 형식에 range()를 이용해서 시작 Page값과 매개 변수로 들어온 end Page값에 1을 더한 범위를 반환 해 주는 것이에요.

 

그럼 예를 들어 1 ~ 10이라는 범위가 만들어졌다고 가정할 때 `Panation.vue Paging 처리 부` 그림 18번째로 돌아와서 해당 범위를 하나씩 i에 넣어주면서 반복을 하게 되고, 해당 반복에 Unique 값은 i로 설정을 해 준 뒤 classActive()를 호출하는데, i의 값을 넣어주면서 계속 반복하는 것이에요.

 

classActive()

 

이 친구는 또 들어오면 물어보는 것이에요. "i가 이용자가 위치한 현재 Page (this.nowPage)와 같나요?" 물어보고, 맞다면 "active"을 반환해 주게 되어 있는 것이에요. 

그렇게 1 ~ N번까지의 번호 순에 목록을 만들어주고, 그 안에 <a>를 이용해서 Click Event가 발생하면 i 값을 가지고 setPage() 가 호출 되게 한 것이에요.

 

 

해당 번호를 눌렀다는 것은 이용자가 해당 Page로 이동하겠다는 의미인 것이에요. 그 처리를 setPage()가 해 주는 것이에요.

이용자가 누른 Page 번호가 매개 변수로 들어올 것이고, Member 변수 (Data()에 정의 된 nowPage Object)에 값을 매개 변수 값으로 바꿔주고, changePage()를 호출 하는 것이에요.

 

그럼 이용자가 원하는 Page로 이동이 될 것이에요.

 

`Panation.vue Paging 처리 부` 20 ~ 22번째 줄을 보면 해당 버튼(<a>)는 이 조건에 만족할 때만 보이는 것이에요.

i가 현재 이용자가 위치한 Page(nowPage)랑 같지 않다면 해당 i의 값(정수)를 보여주면서 버튼이 활성화 되게 하고, i가 현재 이용자가 위치한 Page(nowPage)랑 위치가 같다면 숨기라는 것이에요.

이용자가 위치한 곳에 번호가 굳이 표시되서 또 누르게 할 수 있을 필요는 없기 때문인 것이에요.

 

 

 

Pagination.vue 26~30번째 줄

 

class="next"

 

자 이제 다음 Page로 넘어가게 해주는 Button을 한번 만들어 볼 것이에요.

해당 버튼을 누르게 되면 nextPage()가 호출 되게 되는데, 어떤 일이 벌어질까요?

 

nextPage()

 

console.log는 확인을 위한 Code이기 때문에 넘어가고, 이제 또 if문으로 물어보는 것이에요.

"이용자 위치 Page(nowPage)가 총 Page 수(total.Page)보다 작습니까?"

"만약 그렇다고 한다면 이용자 위치를 하나 더한 Page에 이동 시키기 위해 nowPage 값을 하나 더하겠습니다" 라는 처리를 하고 나서 또 물어보는 것이에요.

"그리고 현재 이용자 위치 값(nowPage)이 마지막 Page(endPage) 보다 큰가요? 그렇다면 nowPageBlock의 개수를 하나 더하고, 현재 이용자 위치 Page번호를 시작 Page(startPage)에 넣도록 하겠습니다"

그리고, changePage()를 호출하여 nowPage값을 조정해 이용자 위치를 변화 시켜 주는 것이에요.

 

 

 

 

 

 

class="next02"

 

이제 마지막으로 이 친구를 만들어 볼 것이에요.

click Event가 발생되면 lastPage()가 호출이 되는 것이에요.

 

lastPage()

 

일단 이 Method가 호출되면 총 Page 개수(totalPage)값을 현재 이용자 위치 Page(nowPage)에 넣어주고, nowPageBlock에 lodash형식의 ceil을 이용하여 총 Page 개수(totalPage)를 pageLimit에 나눠서 나온 값을 반올림하는 것이에요.

그런 뒤 시작 Page(startPage)에 (nowPageBlock에 1을 뺀 값)과 pageLimit에 1을 더한 값을 서로 곱한 것을 넣어주는 것이에요.

그런 뒤 changePage()를 호출하여 맨 마지막 Page로 이동할 수 있게 해주는 것이랍니다.