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

 

 

 

🧑🏻‍💻 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

 

 

 

 

 

🚀 게시판 만들기 - 목록 조회

    🔽  화면

Navigator

 

Q&A 게시판 - 목록 조회 (상단)

 

Q&A 게시판 - 목록 조회 (상단)

 

 

 

    🔽  Source Code

<template>
  <!-- 컨텐츠 영역 -->
  <div id="contentWrap">

    <div id="topVisualWrap">

      <div class="topVisual">
        <p class="tit01">[JUNY COMPANY] 개발자 업무 협업 서비스 위한</p>
        <p class="tit02">인공지능 클라우드 주니하랑 플랫폼 <span></span></p>
      </div> <!-- class="topVisual" 끝 -->

    </div> <!-- id="topVisualWrap" 끝 -->

    <!-- 컨텐츠 영역 -->
    <div id="Content">
      <h2>
        <span>개발지원</span>
        <span><b>Q&A</b></span>
      </h2>

      <div class="topSearch">
        <select name="" class="tops_sel" v-model="searchParams.srchType">
          <option value="1">제목</option>
          <option value="2">내용</option>
          <option value="3">작성자</option>
        </select>

        <input type="text" name="" class="tops_inp" placeholder="검색어를 입력 해 주세요!" v-model="searchParams.srcWord" @keyup.enter="searchList()">

        <button type="button" onclick="" class="topBtnSearch" @click="searchList()">검색</button>
      </div> <!-- class="topSearch" -->

      <div class="ListTbWrap mt-20">

        <div class="tbHead">

          <div class="total">
            총<span>{{total}}</span>건 게시글 존재
          </div> <!-- class="total" 끝 -->

          <div class="tbHeadR">
            <button type="button" class="btn01" @click="goRegist()">글쓰기</button>
          </div> <!-- class="tbHeadR" 끝 -->
        </div>  <!-- class="tbHead" 끝 -->

        <table class="tList">
          <caption>개발자 가이드 목록</caption>
          <colgroup>
            <col style="width: 8%">
            <col>
            <col style="width: 10%">
            <col style="width: 15%">
            <col style="width: 10%">
          </colgroup>

          <thead>
          <tr>
            <th>순번</th>
            <th>제목</th>
            <th>등록자</th>
            <th>등록일</th>
            <th>답변 여부</th>
          </tr>
          </thead>

          <tbody>
          <template v-if="this.total > 0">
            <tr v-for="(list) in devInquryList" :key="list.inqrySn">
              <td>{{list.inqryIndex}}</td>
              <td class="alignL">
                <a href="#" :class="{'ellipsis' : list.secretAt==='N', 'ellipsis lock' : list.secretAt === 'Y'}" @click="goDetailView(list.inqrySn)">{{list.inqrySj}}</a>
              </td>
              <td>{{list.userId}}</td>
              <td>{{list.creatDt}}</td>
              <td>
                <label class="lb01" v-if="list.answerAt==='N'">대기</label>

                <label class="lb01" v-else-if="list.answerAt!=='N'">완료</label>
              </td>
            </tr>
          </template>

          <template v-else>

            <tr>
              <td colspan="5" class="noData">데이터가 존재하지 않습니다.</td>
            </tr>

          </template>
          </tbody>
        </table>

        <!-- 페지징 처리 부 -->
        <pagination
          v-show="total > 0"
          ref="pagination"
          :total-count="total"
          :row-count="this.searchParams.perPageNum"
          :curr-page="this.searchParams.page"
          @change-page="changePage"
          />

        <!-- 인가 관련 Pop up -->
        <div class="card3_popup" style="display: block; top: 160px;" v-show="this.viewDeletePopup">

          <div class="popup_body">

            <!-- Message -->
            <div class="card_mody mt-20">
              <p class="c_tit">작성자만 열람 가능 합니다!</p>
            </div> <!-- class="card_mody mt-20" 끝 -->

          </div> <!-- class="popup_body" 끝 -->

          <div class="popup_close" @click="this.viewDeletePopup = false">닫기</div>

        </div>  <!-- class="card3_popup" style="display: block; top: 160px;" v-show="this.viewDeletePopup" 끝 -->
        <!-- 인가 관련 Pop up End -->

        <!-- Login 관련 Pop up -->
        <div class="card3_popup" style="display: block; top:160px;" v-show="this.loginDeletePopup">

          <div class="popup_body">

            <!-- Message -->
            <div class="card_mody mt-20">
              <p class="c_tit">로그인 후 이용 가능 합니다!</p>
            </div>

          </div>  <!-- class="popup_body" 끝 -->

          <div class="btn_wrap_pop">
            <button class="btn_m01_50" @click="this.loginDeletePopup = false">확인</button>

            <button class="btn_m02_50" @click="this.loginDeletePopup = false">취소</button>
          </div>  <!-- class="btn_wrap_pop" 끝 -->

          <div class="popup_close" @click="this.loginDeletePopup = false">닫기</div>

        </div> <!-- class="card3_popup" style="display: block; top:160px;" v-show="this.loginDeletePopup" 끝 -->
        <!-- Login 관련 Pop up End -->


      </div> <!-- class="ListTbWrap mt-20" 끝 -->
    </div> <!-- id="Content" 끝 -->
  </div> <!-- id="contentWrap" 끝 -->
</template>

<script>
import {devInquryList} from "@/api/devInquryApi";

export default {
  data() {
    return {
      searchParams : {
        srchWord : "",
        srchType : "1",
        page: 1,
        perPageNum: 10
      }, // serchParams 끝

      devInquryList : [],
      total : 0,
      loginDeletePopup : false, viewDeletePopup : false
    } // return 끝
  }, // data() 끝

  created() {
    this.handleFilter();
  }, // created() 끝

  methods: {
    searchList() {
      devInquryList(this.searchParams)
      .then(response => {
        console.log("Q&A 게시판 목록 조회 값(response.data.devInquryList) : ", response.data)

        this.devInquryList = response.data.devInquryList;

        this.total = response.data.devInquryListCnt;
      });
    }, // searchList() 끝

    handleFilter() {
      this.searchParams.page = 1;
      this.searchList();    // 목록 조회 Method 호출
    }, // handleFilter() 끝

    /* 페이지당 갯수 변경 */
    changeRowCount(perPageNum) {
      this.searchParams.perPageNum = perPageNum;
      this.changePage(1);
    },
    changePage(page) {
      this.searchParams.page = page;
      this.searchList(); // 목록 조회
    },

    goDetailView(inqrySn) {
      this.$router.push({
        path : "/support/devInquryDetailView",
        query : {
          inqrySn : inqrySn,
        } // query 끝
      });
    }, // goDetailView(inqrySn) 끝

    goRegist() {
      this.$router.push({
        path: "/support/devInquryRegist",
        query : {
          status : 'C',
          noticeSn : 0
        }
      });
    }, // goRegist() 끝
  } // methods 끝
}
</script>

<style lang="">

</style>

DevInquryList.vue

 

🔽  axois를 이용한 Back End와의 통신

Code를 분석하기 전에 먼저 axios를 통해 Back End와 어떻게 요청을 주고, 어떻게 응답값을 받아오는지 정리하는 것이 먼저라고 판단한 것이에요.

 

 

최초 주니하랑은 methods안에 Method들을 정의를 하는데, axios를 이용할 searchList()라는 Method를 먼저 만들어 준 것이에요.

 

최초 해당 Componet가 Randering이 될 때, created()가 동작하게 되는데, 

 

이 때, handleFilter()라는 Method를 호출하게 만들어 준 것이에요.

 

 

handleFilter는 먼저 Paging처리에 대한 초기값 즉, 현재 Page 위치를 1로 만들어 주고, 게시글 내용을 모두 가져와야 하닌까 searchList()를 호출하게 되는 것이에요.

 

다시 serchList()에 모습을 살펴 보면

 

 

Method가 동작하면서 devInquryList라는 Method를 호출하면서 그 안에 객체(Object)형 Member 변수로 만들어 둔 searchParams라는 친구를 매개 변수로 전달을 해 주는 것이에요. 즉, BackEnd에 요청값을 전달 할 때 여기 searchParams를 이용해서 보내는 것이에요.

 

denInquryList()는 DevInquryList.vue에 정의된 Method가 아닌데, 어떻게 구성이 되어 있는지 살펴 볼 것이에요.

 

devInquryApi.js Path

 

DevInquryList()는 devInquryApi.js에 정의 되어 있는 Method인 것이에요.

 

import axios from 'axios';

/**
 * Q&A 게시판 관련 API
 * <pre>
 * <b>History:</b>
 *    주니하랑, 1.0.0, 2022.03.09 최초 작성
 * </pre>
 *
 * @author 주니하랑
 * @version 1.0.0, 2022.03.09 최초 작성
 * @See ""
 * @see <a href=""></a>
 */

/**
 * Q&A 목록 조회
 */

export function devInquryList(params) {
    return axios({
        // Back End Route URI
        url: '/api/support/devInquryList',
        // HTTP Method
        method: 'post',
        data: params
    });
} // devInquryList(params) 끝

 

최초 axios를 해당 Project에 설치를 해 주어야 하는 것이에요.

그런 뒤 import를 통해 axios를 이용하겠다고 선언을 한 뒤

 

어떻게 이용할지를 Method를 통해 만들어 주면 되는 것이에요.

참고로 이렇게 따로 API에 해당하는 JavaScript Code를 만드는 방법도 있지만, 직접 Component에서 axios를 이용하는 방법도 있는 것이에요. 후자에 대한 방법은 이 Project를 Refactoring 하면서 이용해 볼 것이에요.

export function이라는 것은 외부에서 이 함수를 이용하겠다고 하는 것인데, JAVA로 따졌을 때는 어떤 Method를 public 접근 제어자를 설정 해 주는 것이랑 같다고 주니하랑은 이해한 것이에요.

해당 Method가 호출 될 때, 매개 변수를 넣어주는데, 이 매개 변수에는 Server에 어떤 값을 조회할 때 필요한 값들을 넣어 주는 것이에요. 예를 들면 목록 조회닌까 Paging 처리가 필요할 것이고, Paging 처리에 대한 시작 번호, 끝 번호, 몇 개까지 한 Page 내에서 보여줄 것인지에 대한 등등에 값들을 보낼 수 있는 것이에요.

이제 url 부분에 Back End가 Q&A 게시판 목록 조회시에 설정한 URI값을 넣어주면 되는 것이에요.

그리고, method로 어떤 HTTP Method를 이용할 것인지 정의해 주는건데, 여기서는 Post를 이용했지만, RESTFul 하게 Coding을 한다면 post가 아니라 get을 사용해야 하는 것이에요.

그리고, 실제적으로 요청을 보낼 때 data라는 변수 이름으로 보내기 위해 data라는 이름을 정의하고, 그 값을 params 객체로 넣어준 것이에요.

 

이제 다시 해당 Method를 호출했었던 DevInquryList.vue에 methods 속성으로 가보면 

.then을 통해 응답으로 들어온 Data를 처리하게 되는데 그 내용을 response라는 곳에 담는 것이에요.

응답으로 들어온 실제 Data는 response안에 data라는 곳으로 들어오게 되는데,

response.data안에 들어있는 내용

반응형

 

그 안에는 이렇게 devInquryList라는 배열로 이뤄진 객체들 값과 해당 게시판에 조회된 게시글 개수인 devInquryListCnt가 객체 형식(Key : Value)로 들어 있는 것이에요.

devInquryList 배열이 10개로 구성된 것은 searchParams에 넣어둔 객체 Data`perPageNum : 10`이라고 줬는데, 한 페이지에 10개까지 출력하라고 설정을 했기 때문인 것이에요.

 

 

176번째 줄에 console로 찍으라고 했기 때문에 위처럼 어떤 값이 어떻게 들어왔는지를 확인할 수 있는 것이랍니다.

 

그런 뒤 주니하랑은 들어온 Data를 요리조리 이용하기 위해 data()에 정의한 devInquryList라는 배열에 응답으로 들어온 devInquryList를 넣어주고, total이라는 변수에 devInquryListCnt 값을 넣어준 것이에요.

이제 아래에서 total을 통해 게시글 개수를 출력하는 부분이 나오는데, 이렇게 설정을 해줬기 때문에 출력을 할 수 있는 것이랍니다.

 

    🔽  Code 분석

다른 화면과 공통적으로 출력되는 부분을 제외하고, 하나하나 분석해서 정리 해 볼 것이에요.

 

최초 이 부분을 하나로 묶어 주기 위해 div Tag로 아래와 같이 묶어 준 것이에요.

 

 

 

검색창

 

이제 Q&A 게시판에서 게시글을 검색할 수 있븐 부분을 한번 만들어 볼 것이에요.

 

검색창 관련 <template> Code 부

 

최초 검색에 대한 Type을 잡아 주기 위해 select Box를 하나 잡아 준 것이에요. 검색 Type이란 '제목', '내용', '작성자' 등을 통해 해당 내용을 검색할 수 있는 것이에요. select Box에 option Tag로 제목, 내용, 작성자를 조회할 수 있는 부분을 만들었고, 해당 Tag에 value는 숫자를 넣어준 것이에요.

Back End에서 Query를 날릴 때 숫자값으로 받기 때문인 것인데,

    <!-- Q&A 목록 조회 -->
    <select id="devInquryList" parameterType="com.devcommunity.junyharang.model.vo.support.DevInquryVO" resultType="com.devcommunity.junyharang.model.vo.support.DevInquryVO">
        select row_number() over(order by i.INQRY_SN asc) as INQRY_INDEX , i.INQRY_SN, i.INQRY_USER_SN , i.FILE_SN , i.INQRY_CN , i.INQRY_SJ , i.SECRET_AT , i.ANSWER_AT , i.ANSWER_CN , i.ANSWER_USER_SN , i.ANSWER_DT , i.CREAT_DT , i.UPDT_DT , i.UPDUSR_SN, u.USER_ID
        from tb_com_inqry i inner join tb_user u
        on i.INQRY_USER_SN = u.user_sn
        where 1=1
        <if test=' srchType neq null and srchType neq "" '>
            <choose>
                <when test="srchType eq '1'.toString()">
                    and i.INQRY_SJ like CONCAT('%', #{srchWord}, '%')
                </when>
                <when test="srchType eq '2'.toString()">
                    and i.INQRY_CN like CONCAT('%', #{srchWord}, '%')
                </when>
                <when test="srchType eq '3'.toString()">
                    and u.USER_ID like CONCAT('%', #{srchWord}, '%')
                </when>
            </choose>
        </if>
        order by INQRY_SN desc
        <if test=' pageStart neq null and perPageNum neq null '>
            LIMIT #{pageStart}, #{perPageNum}
        </if>
    </select>

 

위에 Code가 Back End에서 해당 게시판 목록 조회에 대한 Mapper.xml Code인데, 자세한 건 '이 곳'에 준비 해 둔 것이에요.

 

 

위 사진에서 if 문을 통해 srchType(검색 타입)이 null이 아니고, 공란이 아니라면? 해당 값을 통해서 검색을 할 수 있게 구성이 되어 있는데, 1이라는 값이 들어오면 제목으로 검색을 하고, 2라는 값이 들어오면 내용을 검색하고, 3이라는 값이 들어오면 작성자를 검색하는 것이에요.

 

 

그럼 이제 검색어를 입력할 부분이 필요할 것이고, 검색어 입력이 다 되었으면 해당 값을 Server에 보내기 위한 Button이 필요한 것이에요.

 

먼저 검색어를 입력 받기 위해 input Tag를 잡아주고, type을 text로 하여 문자열을 받을 수 있게 만들어 준 것이에요.
그리고, Placeholder 속성으로 

 

 

이렇게 검색어를 입력 해 달라는 문구가 보이게 처리를 해 준 것이에요.

원래 Html Tag에서 해당 값을 input Tag에 넣어줄 때, 즉, Input Tag에 입력된 값을 처리하기 위한 속성이 value 속성인데, Vue.js에서는 v-model을 사용하는 것이에요.

v-model 속성에 searchParams.srchWord라는객체를 넣어 줬는데, 이렇게 설정을 해 주게 되면 <Script>에 data() return 부에서 해당 값을 처리할 수 있는 것이에요.

 

 

v-model에 설정해 준 것처럼 searchParams라는 객체(Object)안에 srchWord 객체 이름과 값을 초기화해서 정의 해 준 것이에요.

data()는 JAVA로 따지면 생성자와 같은 것이고, 그 밑에 정의된 객체, 변수 등은 Member 변수가 된다고 주니하랑은 이해 한 것이에요.

검색어에 경우 이용자가 입력하지 않는 이상 검색 처리가 될 필요가 없기 때문에 srchWord를 공백으로 초기화 해 주었답니다.

 

 

이제 본격적으로 게시글에 대한 목록 처리, 페이징 처리를 하는 부분에 대해 구역을 설정하기 위해 <div class "ListbWrap mt-20">으로 묶어준 것이에요.

 

개발자 Mode로 본 Code

 

 

 

먼저 위와 같이 현재 게시글이 몇 개가 있는지를 출력 해 주는 부분을 만들어 볼 것이에요.

 

 

{{ }} 이렇게 중괄호 두 개 안에 `total`이라는 것을 출력하도록 해 주었는데, 

 

 

위에 그림에서 보이듯이 163번째 줄에 total이라는 변수를 0으로 초기화 해 주었고, 이것을 위에 Tag에서 그 값을 출력하기 위해 저렇게 해 준 것이에요.

 

`total`이라는 변수에 값이 언제 변하냐면 BackEnd에 요청을 보내고, 응답이 돌아왔을 때 변화가 일어나게 되는 것이에요.

 

 

 

그런 다음 우측에 `글쓰기` Button을 만들기 위해 아래와 같이 해 준 것이에요.

 

 

 

<button> Tag를 이용하는데, html에서 해당 Button을 클릭했을 때, 이벤트 처리를 위해 이용하는 속성은 onclick이지만, Vue.js에서는 @clic을 이용해 정의 해 주는 것이에요. 주니하랑은 클릭 Event가 발생하면 `goRegist()`를 호출 하라고 정의해 준 것이에요.

 

 

글쓰기, 작성에 대한 내용은 따로 정의하겠지만, 위에 Method가 호출이 되면 router를 통해 해당 Page가 Re Rendering 되도록 설정한 것이에요. 그리고, status를 `C` 라고 해서 랜더링을 하는데, 이것은 글 등록과 수정이 합쳐져 있기 때문에 글 등록 시에 C라는 값을 받아 글 등록 처리를 하기 위해 전달 해 주는 값이에요. 

 

수정 Logic에서 InqrySn (게시글 일련번호)가 0보다 크거나, 값이 존재하면 수정 Logic을 처리하도록 할 것이기 때문에 0을 넣어서 글 등록을 처리하도록 값을 초기화 한 뒤 전달하는 것이에요.

 

 

이제 본격적으로 게시글 목록 조회에 필요한 내용을 알아 볼 것이에요.

 

 

위에는 아래 사진처럼 잡아 주기 위해 작성한 곳이에요.

해당 html Tag는 '이 곳'에 준비 해 두었어요!

 

 

 

이제 위에 해당하는 부분을 만들어 볼 것이에요.

 

게시글 목록 조회 처리

 

먼저 template Tag를 이용하여 재사용성을 높이고, 콘텐츠가 로드될 때 즉시 랜더링 되지 않게 하고 나서 Vue를 통해 해당 콘텐츠가 필요할 때 보이도록 하기 위해 만든 것이에요. 그럼 어떨 때 보이도록 설정을 하였을까요? 바로 v-if를 통해 위에서 이야기 했던 total 변수에 값이 0보다 클 때만 보이도록 한 것이에요. 0 보다 작다면 굳이 목록 조회를 할 필요가 없으니 Rendering을 할 때, 해당 내용을 처리하지 않아 성능 향상을 기대 할 수 있는 것이에요.

v-if는 조건이 만족하지 않으면 Rendring자체를 하지 않지만, v-show는 Rendering은 하지만, 조건이 만족할 때만 보여지게 해 주는 차이가 있다는 것은 참고할 만한 이야기 인 것이에요.

이제 <tr>(행 구성)을 통해서 1개의 행을 먼저 만들고,  v-for를 통해 반복문을 돌려 주는데, Axios를 통해 받아온 devInquryList 값을 하나하나 꺼내 반복하여 (list)에 넣어주게 되고, key를 통해 이 반복문에 unique한 이름을 넣어준 것인데, 해당 게시글에 일련번호가 unique한 값이니 68번째 줄 위와 같이 설정 해 준 것이에요. 

그런 뒤 각 열을 만들어 주는데, 5개의 열이 만들어 지게 될 것이에요.
먼저 첫번째 열에는 게시글에 순서 번호를 나타내기 위해 list안에 들어 있을 inqryIndex에 값을 표시하도록 한 것이에요.

그리고, 해당 게시글에 제목을 표시 하기 위해 70 ~ 72번째 까지 작성을 한 것인데, a Tag안에 내용이 중요한 것이에요.
먼저 class 속성을 사용하는데, 그 안에 'ellipsis'는 css의 이름인 것이에요.

Style.css 내&amp;amp;amp;nbsp;ellipsis

 

 

sub.css 내 a.lock:after

 

`:class`는 vue에서 조건에 따른 Class를 넣어줄 때 사용해 주는 것이에요.

 :class="{'클래스이름' : '조건'}"

 

이를 해석해 보면 먼저 list안에 있을 secretAt(비밀글 여부)에 값이 'N' 즉, false이면 비밀글이 아닌 것이닌까 style.css 내에 ellipsis 이름의 css로 꾸며서 보여주고, secreatAt이 참이면 동일한 css를 사용하되, sub.css내 lock관련 CSS를 추가적으로 사용하여 비밀글 표시가 되도록 만들어 주는 것이에요.

 

바로 이런 식으로 말이에요.

 

그리고 이 제목을 클릭을 하게 되면 goDetailView라는 Method를 호출하는데, list안에 들어있는 게시글 일련번호(inqrySn)을 넣어 호출하여 상세 조회가 처리 되도록 한 것이에요. 그리고, 게시글 제목이 밖에 표출 되어야 하기 때문에 list안에 들어있을 게시글 제목(inqrySj)가 보이도록 처리를 해 준 것이랍니다.

 

게시글 제목을 클릭하게 되면 이 Method가 게시글 일련번호를 가지고 호출 되는 것이에요.
그럼 router를 통해 Rendering을 하게 되는데, /src/views/support/q&a/devInquryDetailView Component를 Rendering하게 되고, 상세 게시글을 가져오기 위해 query에 게시글 일련번호를 넣어 보내 주는 것이에요.

여기서 ' : ' 을 기준으로 앞에것은 실제로 처리될 위치에 변수를 의미하고, 뒤에는 매개 변수로 들어온 변수를 의미하는 것이에요.

query의 의미는 JSON 형태로 query String 형태로 전달되는 파라미터를 의미하는 것이에요.

그런 뒤 작성자의 ID가 보이게 하기 위해 73번째 줄처럼 해준 것이고, 그 다음 게시글 목록 조회 처리 그림 74번째 줄에는 작성일자를 보여지게 해 준 것이에요. 

게시글 목록 조회 처리 그림 75번째 줄에는 아래와 같이 표시될 것을 하기 위해서 작성한 부분인 것이에요.

 

 

label 속성안에 v-if를 통해 list안에 answerAt(답변 여부) 속성에 값이 'N' 즉, false이면 '대기'라고 보여지고, !== 'N' 즉, 'Y'이면 '완료'로 보여지게 해준 것이에요.

게시글 목록 조회 처리 83번째 줄을 보면 <templat>을 하나 다시 시작하는데 이번에는 v-else가 들어간 것이에요. 위에 v-if문 조건에 맞지 않으면 이렇게 처리해라! 라고 지시를 하는 것이에요.

일단 행과 열을 하나 만들고, 데이터가 존재하지 않습니다.를 출력해 주는 것이에요.

 

 

 

 

🚀 게시판 만들기 - 목록 조회 - Paging 처리

DevInquryList.vue

 

Pagination.vue

 

위에 HTML 을 Code를 보면 HTML Tag가 아닌 <pagination/> 이라는 Tag가 보이고, 그 아래 여러 속성들이 보이는 것이에요. 그 속성들은 Pagination에 props에 정의된 객체들을 참조하고 있는 것이에요.

이 것은 Vue를 통해 만든 Component를 이용할 때 이렇게 Component를 마치 HTML Tag 사용하듯이 이용할 수 있는 것이에요.

먼저 해당 Tag를 분석해 보면 v-show를 통해 게시글 개수(total)이 0보다 크다면 보여주고, 그렇지 않으면 보이지 않겠다는 것이고, ref 속성으로 pagination Coponent 이름을 참조하겠다는 것인데, 그럼 이 Component는 어디에 선언이 되어 있을까요?

 

main.js

 

그건 바로 전역적 처리를 할 수 있는 main.js에 있는 것이에요. 여기 6번째 줄을 보면 Pagination.vue를 Pagination이란 이름으로 Import를 하고, app을 통해 component를 만드는데, 이름은 paginateion으로 만들고, 그 Component의 값을 입력해 처리가 되도록 한 것이에요.

Paging처리를 위해 전체 Data개수 처리를 위해 97번째 줄처럼 하고, 한 페이지당 몇 개까지 출력할 것인지에 대한 값을 정의(:row-count = ...) 해주고, 첫번째 Page 값을 정의(:curr-page ... )해주고, 마지막으로 Page를 이용자가 변경했을 때 처리를 위한 내용을 100번째 줄에 정의 해 준 것이에요.

100번째 줄에 대해 좀 더 알아보자면 이용자가 아래 그림처럼 있을 때,

각각의 Page 번호를 눌러 Page를 이동할 수 있는 것이에요. Page 번호를 눌러 Page가 이동할 때, changePage가 호출 되도록 해 준 것인데, 

 

DevInquryList.vue

 

현재 page 번호를 매개 변수값으로 가져와서 해당 Method가 실행되는 것이에요.

 

사실 해당 Paging 처리를 직접 하는 친구는 Pagination.vue인 것이에요.

 

 

 

🚀 게시판 만들기 - 각 종 Pop up

인가 처리 관련 Pop up

이제 Pop up창에 대해서 한번 만들어 보려고 하는 것이에요. 먼저 인가 관련 Pop up을 만들건데, 위에 코드에서 104번째 줄에 v-show 속성이 있는 것이에요. 조건에 맞으면 보여주고, 맞지 않으면 보여주지 않겠다는 것이에요.

loginDeletePopup의 기본값은 아래 그림과 같이 false인 것이에요.

 

그렇다는 건 평소에는 보이지 않는다는 것이에요. 아직 로그인이나 회원가입 로직이 없기 때문에 인가에 대해 조건을 더 넣지 않았지만, 주니하랑은 해당 회원이 로그인하지 않았다면 이 목록 조회 Page에 들어올 수 없게 할 것이에요.

그래서 Login을 하지 않았다면 loginDeletePopup이 true가 될 것이고, 해당 Pop up이 등장하게 만드려고 작성한 것이에요.

 

 

해당 Popup 창에는 위와 같이 두 개의 Button을 만들어 준 것이에요. 사실 지금은 기능이 똑같은데, 나중에 '확인'에 해당하는 Button을 '로그인 하러 가기'로 만들어 주고, click Event가 발생하면 Login 창으로 넘어가게 만들어 줄 것이에요.

현재는 click Evente가 발생하면 loginDeletePopup의 값을 false로 만들어 주기 때문에 그냥 해당 Popup이 사라질 것이에요.