[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋ชฉ๋ก ์กฐํšŒ

2022. 3. 18. 17:55ใ†Programming Project ์ž‘์—…์‹ค/๋‚ด์šฉ ์ •๋ฆฌ

728x90
๋ฐ˜์‘ํ˜•

 

 

 

๐Ÿง‘๐Ÿป‍๐Ÿ’ป 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 ๊ฒŒ์‹œํŒ์—์„œ ๊ฒŒ์‹œ๊ธ€์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋ธ ๋ถ€๋ถ„์„ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ด์—์š”.

 

๊ฒ€์ƒ‰์ฐฝ ๊ด€๋ จ &amp;amp;amp;lt;template&amp;amp;amp;gt; 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์ด ์‚ฌ๋ผ์งˆ ๊ฒƒ์ด์—์š”.

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•