[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ์ƒ์„ธ ์กฐํšŒ

2022. 3. 19. 16:44ใ†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

 

 

 

 

 

 

 

๐Ÿš€ ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ - ์ƒ์„ธ ์กฐํšŒ

    ๐Ÿ”ฝ  ํ™”๋ฉด

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> <!-- div class="topVisual" ๋ -->

    </div> <!-- div id="contentWrap" ๋ -->

  <!-- ์ปจํ…์ธ  ์˜์—ญ -->
    <div id="Content">

      <h2>
        <span>๊ฐœ๋ฐœ์ง€์›</span>
        <span @click="goList()"><b>Q&A</b></span>
      </h2>

      <div class="ListTbWrap mt-20">
        <table class="tView">
          <caption>Q&A ์ƒ์„ธ๋ณด๊ธฐ</caption>
          <colgroup>
            <col>
            <col style="width: 18%">
            <col style="width: 15%">
          </colgroup>

          <thead>

          <tr>
            <th class="alignL bolder">{{devInquryData.inqrySj}}</th>
            <th>
              <span>
                ๋“ฑ๋ก์ผ&nbsp;&nbsp;
                <b>{{devInquryData.creatDt}}</b>
              </span>
            </th>
            <th>
              <span>
                ์ฒจ๋ถ€ํŒŒ์ผ&nbsp;&nbsp;
                <a href="#" class="link_down2" v-show="devInquryData.fileSn"></a>
                <span v-show="!devInquryData.fileSn">-</span>
              </span>
            </th>
          </tr>

          </thead>
        </table>

        <div class="view_wrap">
          {{devInquryData.inqryCn}}
        </div>  <!-- div class="view_wrap" ๋ -->

        <template v-if="devInquryData.answerAt !== 'N'">
          <div class="view_wrap" style="border-top: 1px solid black;">

            <div style="margin-top:-30px; margin-left: -5px; front-weight: bold;">
              [ ๋‹ต๋ณ€ ๋‚ด์šฉ ]
            </div> <!-- div style="margin-top:-30px; margin-left: -5px; front-weight: bold;" ๋ -->

            <br>

            {{devInquryData.answerCn}}
          </div>  <!-- class="view_wrap" style="border-top: 1px solid black;" ๋ -->
        </template> <!-- template v-if="devInquryData.answerAt !== 'N'" ๋ -->

        <table class="tView2 mt-40">
          <colgroup>
            <col style="width: 12%">
            <col>
          </colgroup>

          <tbody>
          <tr>
            <th>์ด์ „ ๊ธ€</th>

            <td>
              <template v-if="devInquryData.beforeInqrySn !== -1">
                <router-link to="/support/devInquryDetailView" @click="goDetailView(devInquryData.beforeInqrySn)">{{devInquryData.beforeInqrySj}}</router-link>
              </template> <!-- template v-if="devInquryData.beforeInqrySn !== -1" ๋ -->

              <template v-else>
                ์ด์ „ ๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค.
              </template> <!-- template v-else ๋ -->
            </td>
          </tr>

          <tr>
            <th>๋‹ค์Œ ๊ธ€</th>
            <td>
              <template v-if="devInquryData.nextInqrySn !== -1">
                <router-link to="/support/devInquryDetailView" @click="goDetailView(devInquryData.nextInqrySn)">{{devInquryData.nextInqrySj}}</router-link>
              </template> <!-- template v-if="devInquryData.nextInqurySn !== -1" ๋ -->

              <template v-else>
                ๋‹ค์Œ ๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค.
              </template> <!-- template v-else ๋ -->
            </td>
          </tr>
          </tbody>
        </table>
      </div> <!-- div class="ListTbWrap mt-20" ๋ -->

      <div class="btn_wrap">
        <a href="#" class="btn04" @click="goList()">๋ชฉ ๋ก</a>

        <template v-if="devInquryData.answerAt !== 'Y'">
          <a href="#" class="btn03" @click="goRegist(devInquryData.inqrySn)">์ˆ˜ ์ •</a>
        </template> <!-- template v-if="devInquryData.answerAt != 'Y'" ๋ -->

        <a href="#" class="btn03" @click="this.deletePopup = true">์‚ญ ์ œ</a>
      </div> <!-- div class="btn_wrap" ๋ -->

    </div>  <!-- div id="Content" ๋ -->

  </div> <!-- div id="topVisualWrap" ๋ -->

  <!-- ๊ธ€ ์‚ญ์ œ ๊ด€๋ จ Pop Up -->
  <div class="card3_popup" style="display: block; top: 160px;" v-show="this.deletePopup">

    <div class="popup_body">

      <!-- Message -->
      <div class="card_mody mt-20">
        <p class="c_tit">ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?</p>
      </div>  <!-- div class="card_mody mt-20" ๋ -->

    </div>  <!-- div class="popup_body" ๋ -->

    <div class="btn_wrap_pop">
      <button type="button" class="btn_m01_50" @click="doDelete()">ํ™•์ธ</button>

      <button type="button" class="btn_m02_50" @click="this.deletePopup = false">์ทจ์†Œ</button>
    </div>  <!-- div class="btn_wrap_pop" ๋ -->

    <div class="popup_close" @click="this.deletePopup = false">๋‹ซ๊ธฐ</div>

  </div> <!-- div class="card3_popup" style="display: block; top: 160px;" v-show="this.deletePopup" ๋ -->
</template>

<script>
import {devInquryDetail, devInquryDelete } from "@/api/devInquryApi";


export default {
  data() {
    return {
      searchParam: {
        inqrySn: this.$route.query.inqrySn
      }, // searchParams ๋

      devInquryData : {},
      deletePopup : false
    }
  }, // data() ๋

  created() {
    this.getDetailView();
  }, // created() ๋

  methods: {
    getDetailView() {
      devInquryDetail({
        inqrySn: this.searchParam.inqrySn
      }).then(response => {
        console.log("Server์—์„œ ์‘๋‹ต์œผ๋กœ ๋“ค์–ด์˜จ Data์˜ ์ƒ์„ธ ๋ณด๊ธฐ ์ •๋ณด๋ฅผ ์ถœ๋ ฅ ํ•ฉ๋‹ˆ๋‹ค(response.data.devInquryView) : ", response.data);

        this.devInquryData = response.data.devInquryVO;

        console.log("์‘๋‹ต์œผ๋กœ ๋“ค์–ด์˜จ ๋ชจ๋“  Data ๋‚ด์šฉ : " + this.devInquryData)
      }).catch(error => {
        console.log("Q&A ๊ฒŒ์‹œํŒ ์ƒ์„ธ๋ณด๊ธฐ axios ์ฒ˜๋ฆฌ ์ค‘ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.", error)
        this.goList();
      });
    }, // getDetailView() ๋

    goList() {
      this.$router.push({
        path: "/support/devInquryList",
      });
    }, // goList() ๋

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

    goRegist(inqrySn) {
      this.$router.push({
        path: "/support/devInquryRegist",
        query: {
          status : 'U',
          inqrySn : inqrySn,
        } // query ๋
      });
    }, // goRegist(inqurySn) ๋

    doDelete() {
      devInquryDelete({
        inqrySn : this.searchParam.inqrySn
      }).then(response => {
        console.log("ํ•ด๋‹น ํ•˜๋Š” ๊ฒŒ์‹œ๋ฌผ์ด ์‚ญ์ œ ๋ฉ๋‹ˆ๋‹ค! ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ์ •๋ณด๋ฅผ ์ถœ๋ ฅ ํ•ฉ๋‹ˆ๋‹ค! ", response.data);
        // ์‚ญ์ œ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ๊ธ€ ๋ชฉ๋ก์œผ๋กœ ๋ณด๋‚ธ๋‹ค.
        this.goList();
      }).catch(error => {
        console.log("๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œ ํ•˜๋˜ ๋„ ์ค‘ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ ํ•˜์˜€์Šต๋‹ˆ๋‹ค!" + error);

        alert('Q&A ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ์— ์‹คํŒจํ•˜์˜€์Šต๋‹ˆ๋‹ค! \r\n ๊ด€๋ฆฌ์ž์—๊ฒŒ ๋ฌธ์˜ ํ•˜์—ฌ ์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.')
      });
    } // doDelete() ๋
  }, // methods ๋
} // export default ๋
</script>

<style lang="">

</style>

 

 

 

 

    ๐Ÿ”ฝ  Code ๋ถ„์„

 

์œ„์˜ Code๋Š” ์•„๋ž˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด ์ค€ ๊ฒƒ์ด์—์š”.

 

๋จผ์ € Colgroup๋ฅผ ํ†ตํ•ด์„œ ๊ฒŒ์‹œ๊ธ€ ์ œ๋ชฉ, ๋“ฑ๋ก์ผ, ์ฒจ๋ถ€ํŒŒ์ผ์ด ํ‘œ์‹œ๋  ๊ณต๊ฐ„์„ ๋จผ์ € ์žก์•„ ์ค€ ๊ฒƒ์ด์—์š”.

 

 

26๋ฒˆ์งธ ์ค„์€ ์ œ๋ชฉ์ด ๋“ค์–ด๊ฐˆ ๋ถ€๋ถ„์— ๋Œ€ํ•œ ํฐ ์œค๊ณฝ ์„ค์ •์„ ์œ„ํ•ด ์žก์•„ ์ค€ ๊ฒƒ์ด์—์š”.

 

 

 

 

 

๊ทธ ๋‹ค์Œ์€ ์œ„์™€ ๊ฐ™์ด ํ‹€์„ ์žก์•„ ์ œ๋ชฉ์ด ํ‘œ์‹œ ๋˜๊ฒŒ ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

 

 

DevInquryDetailView.vue 40 ~ 50์ค„

 

์ตœ์ดˆ <thead>๋ฅผ ํ†ตํ•ด ํ‘œ ์ƒ๋‹จ์— ์ œ๋ชฉ์ด ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์„ ๋งŒ๋“ค์–ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ๋ฆฌ๊ณ , <tr>์„ ํ†ตํ•ด ํ•œ ๊ฐœ์˜ ํ–‰์„ ์žก์•„์ฃผ๊ณ , <th> 3๊ฐœ๋ฅผ ๋งŒ๋“ค์–ด ์ œ๋ชฉ, ๋“ฑ๋ก์ผ, ์ฒจ๋ถ€ํŒŒ์ผ์ด ์ถœ๋ ฅ ๋˜๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

34๋ฒˆ์งธ ์ค„์„ ๋จผ์ € ์‚ดํŽด ๋ณผ ๊ฒƒ์ด์—์š”. devInquryData์•ˆ์— ๋“ค์–ด ์žˆ๋Š” InqrySj(์ œ๋ชฉ)์„ ์†์„ฑ ํ˜•์‹์œผ๋กœ ์ถœ๋ ฅํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ธ ๊ฒƒ์ด์—์š”.

devInquryData๋Š” data()์— ์„ ์–ธ์ด ๋˜์–ด ์žˆ๋Š”๋ฐ, ๊ฐ์ฒด(Object)๋กœ ์„ ์–ธ์ด ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

data()

 

๊ทธ๋Ÿฌ๋ฉด ๋นˆ ๊ฐ’์ผํ…๋ฐ ์–ด๋–ป๊ฒŒ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š”์ง€์— ๋Œ€ํ•œ ์˜๋ฌธ์ด ๋“œ๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๊ฒƒ์— ๋‹ต์€ ๋ฐ”๋กœ Vue Life Cycle Hook์˜ Created()์— ์žˆ๋Š” ๊ฒƒ์ด์—์š”.
์ƒ์„ธ ๋ณด๊ธฐ Page๊ฐ€ Rendering์ด ๋  ๋•Œ, created() Hook์ด ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ด ๋•Œ ์•„๋ž˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด GetDetailView() Method๊ฐ€ ํ˜ธ์ถœ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue์˜ created() - Vue Life Cycle Hook

 

๊ทธ๋Ÿผ ๋ฐ”๋กœ getDetailView()๋ฅผ ๋งŒ๋‚˜๋Ÿฌ ๊ฐ€ ๋ณผ ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue์˜ getDetailView()

 

์ด Method๋Š” Back End์™€ ํ†ต์‹ ์„ ์ˆ˜ํ–‰ํ•˜์—ฌ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ , ์‘๋‹ต ๊ฐ’์„ ์ฒ˜๋ฆฌํ•˜๋Š”๋ฐ ์ด์šฉ๋˜๋Š” Method์ธ ๊ฒƒ์ด์—์š”.

์ตœ์ดˆ ์ด ์นœ๊ตฌ๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋ฉด DevInquryDetail()์ด ํ˜ธ์ถœ์ด ๋˜๋Š”๋ฐ, ๊ฐ์ฒด(Object) Type์— ๊ฒŒ์‹œ๋ฌผ ์ผ๋ จ๋ฒˆํ˜ธ(inqrySn)์„ ์ „๋‹ฌ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”. ์ด ๊ฐ’์€ searchParam์— ๋“ค์–ด ์žˆ๋Š”๋ฐ, 

 

data()

๋ฐ˜์‘ํ˜•

 

์œ„์™€ ๊ฐ™์ด data()์— ๊ฐ์ฒด Type์œผ๋กœ ์ •์˜๊ฐ€ ๋˜์–ด ์žˆ๊ณ , router๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ๊ฐ’์„ ๋ฐ›์•„ ์˜ค๋Š” ๊ฒƒ์ด์—์š”.

์ƒ์„ธ ์กฐํšŒ๋ผ๋Š” ๊ฒƒ์€ ๋ชฉ๋ก ์กฐํšŒ์—์„œ ํŠน์ • ๊ฒŒ์‹œ๋ฌผ์„ ์„ ํƒ ํ–ˆ์„ ๋•Œ, ๊ทธ ๊ฒŒ์‹œ๋ฌผ์— ๋Œ€ํ•ด ์ƒ์„ธํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค ์ธ ๊ฒƒ์ด์—์š”.

 

๊ฒฐ๊ตญ ํ•ด๋‹น ๊ฐ’์€ ๋ชฉ๋ก ์กฐํšŒ(DevInquryList.vue)์—์„œ ์ „๋‹ฌ์ด ๋˜์—ˆ๋Š”๋ฐ, ์•„๋ž˜ goDetailView(inqurySn)์ด ๋ณด๋‚ด ์ค€ ๊ฒƒ์ด์—์š”.

 

DevInquryList.vue - goDetailView(inqurySn)

 

์—ฌ๊ธฐ๋ฅผ ์‚ดํŽด๋ณด๋ฉด router๋ฅผ ์ด์šฉํ•ด์„œ Push (์ „๋‹ฌ)์„ ํ•˜๋Š”๋ฐ, ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ path ์ฆ‰, ์ƒ์„ธ ์กฐํšŒ์— ์œ„์น˜๋ฅผ ์ „๋‹ฌํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

์ถœ์ฒ˜ :&amp;amp;amp;nbsp;https://junyharang.tistory.com/232

 

์œ„์™€ ๊ฐ™์ด query๋ฅผ ์ด์šฉํ•ด์„œ ๊ฒŒ์‹œ๊ธ€์— ์ผ๋ จ๋ฒˆํ˜ธ๋ฅผ ์ „๋‹ฌ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryList.vue - goDetailView(inqurySn)

 

๋‹ค์‹œ ์ด Method๋กœ ๋Œ์•„์™€์„œ ๋ถ„์„ ํ•ด ๋ณด๋ฉด ๋ชฉ๋ก ์กฐํšŒ์—์„œ Router๋ฅผ ํ†ตํ•ด ์ „๋‹ฌ๋œ ๊ฐ’์ด ์œ„์— searchParam์— ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ๋‹ด๊ธฐ๊ฒŒ ๋˜๊ณ , ์—ฌ๊ธฐ์„œ๋Š” ๊ทธ ๊ฐ’์„ ๋‹ค์‹œ InqrySn์ด๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ •์˜ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿผ BackEnd์—๋Š” ํ•ด๋‹น ๊ฒŒ์‹œ๋ฌผ ์ผ๋ จ๋ฒˆํ˜ธ๊ฐ€ ์ „๋‹ฌ์ด ๋˜์—ˆ์„ ๊ฒƒ์ด๊ณ , BackEnd์˜ MyBatis๋ฅผ ํ†ตํ•ด DB์—์„œ ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์„ ์ฐพ์„ ๊ฒƒ์ด์—์š”.

 

BackEnd - DevInquryMapper.xml - ์ƒ์„ธ ์กฐํšŒ

 

์œ„์˜ SQL Code์—์„œ ์œ ์‹ฌํžˆ ๋ด์•ผ ํ•  ๋ถ€๋ถ„์€ 73 ~ 75๋ฒˆ์งธ ์ค„์ธ ๊ฒƒ์ด์—์š”. ๊ฒŒ์‹œ๋ฌผ ์ผ๋ จ๋ฒˆํ˜ธ(inqrySn)์ด null์ด ์•„๋‹ˆ๊ณ , ๋น„์–ด์žˆ์ง€ ์•Š๋‹ค๋ฉด and ์กฐ๊ฑด์ ˆ์„ ํ†ตํ•ด INQRY_SN์ด๋ผ๋Š” Column ๊ฐ’ ์ค‘์— Request๋กœ ์ „๋‹ฌ ๋œ ๊ฒŒ์‹œ๋ฌผ ์ผ๋ จ๋ฒˆํ˜ธ๊ฐ€ ์ผ์น˜ํ•œ์ง€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด์—์š”.

์‚ฌ์‹ค ์œ„์— and ์กฐ๊ฑด์ ˆ์„ Where ์ ˆ์— ๋ฐ”๋กœ ์จ๋„ ๋˜์ง€๋งŒ, if๋ฌธ์„ ํ†ตํ•ด ๋ถ„๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด `Where 1=1`์„ ํ•˜๊ณ , and ์กฐ๊ฑด์ ˆ์„ ์ถ”๊ฐ€๋กœ ์จ์ค€ ๊ฒƒ์ด์—์š”. 

์—ฌ๊ธฐ์„œ ๊ฒŒ์‹œ๊ธ€์„ ์ฐพ์œผ๋ฉด Response๋กœ Vue์— ๋‹ค์‹œ ์ „๋‹ฌ์ด ๋  ๊ฒƒ์ด์—์š”.

 

DevInquryList.vue - goDetailView(inqurySn) ๊ทธ๋ฆผ 168๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด Back End๊ฐ€ ์ „๋‹ฌํ•ด ์ค€ Data(Response - ๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ์ •๋ณด)๊ฐ€ `response`์— ๋‹ด๊ธฐ๊ฒŒ ๋˜๊ณ , 169๋ฒˆ์งธ ์ค„์— ์–ด๋–ค ๊ฐ’์ด ๋“ค์–ด ์™”๋Š”์ง€ ํ™•์ธ์„ ์œ„ํ•ด console์— ์ฐ์–ด ๋ณด๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค response์•ˆ์— ์žˆ๋Š” data์•ˆ์— ์žˆ๋Š” ๊ฒŒ์‹œ๊ธ€ ํ•œ ๊ฐœ์˜ ๊ฐ์ฒด(devInquryVO)๋ฅผ devInquryData ๊ฐ์ฒด์— ์ €์žฅ์„ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

data()

 

๊ทธ๋Ÿฐ ๋’ค ๋‹ค์‹œ devInquryData์— ์–ด๋–ค ๊ฐ’์ด ๋“ค์–ด ์žˆ๋Š”์ง€ ํ™•์ธ์„ ํ•ด์ฃผ๊ณ , ์ด Method๋Š” ์—ญํ• ์ด ๋๋‚˜๋Š” ๊ฒƒ์ด์—์š”.

ํ•˜์ง€๋งŒ, Catch์ ˆ์— ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜๋ฉด ์–ด๋–ค ์ด์œ ๋กœ error๊ฐ€ ๋ฐœ์ƒํ–ˆ๋Š”์ง€ ์ถœ๋ ฅํ•ด์ฃผ๊ณ , ๋ชฉ๋ก ์กฐํšŒ๋กœ ๋Œ๋ ค ๋ฒ„๋ฆฌ๋Š” goList()๋ฅผ ํ˜ธ์ถœํ•ด ๋ฒ„๋ฆฌ๋Š” ๊ฒƒ์ด์—์š”. 

 

DevInquryDetailView.vue - goList()

 

 

 

DevInqryDetailView - 36 ~ 48๋ฒˆ์งธ ์ค„

 

๋‹ค์‹œ ์ด ๊ณณ์œผ๋กœ ๋Œ์•„์™€์„œ ๊ฒฐ๊ตญ devInquryData๋Š” ์ƒ์„ธ ์กฐํšŒ๋ผ๋Š” Page๊ฐ€ Rendering์ด ๋  ๋•Œ, ์œ„์— Logic์— ์˜ํ•ด Back End๋ฅผ ํ†ตํ•ด ์ „๋‹ฌ ๋ฐ›์€ Data๋ฅผ ๊ฐ–๊ณ  ์žˆ๊ฒŒ ๋˜๊ณ , ๊ทธ Data์•ˆ์—๋Š” ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ์ œ๋ชฉ(InqrySj)๊ฐ€ ๋“ค์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์ด ์ถœ๋ ฅ์„ ํ•˜๋„๋ก ๋ช…๋ นํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

๋˜ํ•œ, ๋™์ผํ•œ ์ด์œ ์™€ Logic์œผ๋กœ ๋“ฑ๋ก์ผ๋„ ์ถœ๋ ฅ์ด ๋˜๋„๋ก ํ•œ ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด์ œ 44 ~ 45๋ฒˆ์งธ ์ค„์„ ์‚ดํŽด ๋ณด๋ฉด <a> Tag ๋‚ด์—์„œ V-show (์กฐ๊ฑด์ด ๊ฑฐ์ง“์ด๋”๋ผ๋„ Rendering์„ ํ•˜์ง€๋งŒ, ์กฐ๊ฑด์ด ์ฐธ์ด ์•„๋‹ˆ๋ฉด ์ถœ๋ ฅํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.)๋ฅผ ํ†ตํ•ด devInquryData์•ˆ์— ํŒŒ์ผ ์ผ๋ จ๋ฒˆํ˜ธ(fileSn)์ด ๋“ค์–ด ์žˆ๋Š”์ง€ ํ™•์ธ ํ•ด ๋ณด๋Š” ๊ฒƒ์ด์—์š”.

์—†๋‹ค๋ฉด ๊ตณ์ด ํ™”๋ฉด์— ๊ตณ์ด ๋ณด์—ฌ์ค„ ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿผ ํŒŒ์ผ์ด ์—†์„ ๋• ์–ด๋–ค ๋‚ด์šฉ์ด ์ถœ๋ ฅ์ด ๋ ๊นŒ์š”?
45๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด <span>์•ˆ์—์„œ v-show๊ฐ€ ๋‹ค์‹œ ๋“ฑ์žฅํ•˜๊ณ , ์—ฌ๊ธฐ์„œ๋Š” devInquryData.fileSn์ด ์—†๋‹ค๋ฉด [ - ]๋ฅผ ๋ณด์—ฌ๋‹ฌ๋ผ๊ณ  ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

 

 

๊ทธ๋ž˜์„œ ์œ„ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ์ฒจ๋ถ€ํŒŒ์ผ ๋ถ€๋ถ„์ด [ - ] ๊ฐ€ ํ‘œ์‹œ๋˜๊ณ  ์žˆ๊ณ , ์ด๊ฑด ๊ฒฐ๊ตญ ์ฒจ๋ถ€ ํŒŒ์ผ์ด ์—†๋‹ค๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 53 ~ 55๋ฒˆ์งธ ์ค„

 

์ด์ œ ๋‚ด์šฉ์„ ์ถœ๋ ฅํ•ด์•ผ ํ•  ๊ฒƒ์ด์—์š”. ๋‚ด์šฉ์€ ์ด ๊ณณ์—์„œ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š”๋ฐ, devInquryData์•ˆ์— ๊ฒŒ์‹œ๊ธ€ ๋‚ด์šฉ(inquryCn)์„ ์ถœ๋ ฅํ•˜๋„๋ก ํ•œ ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด๋ ‡๊ฒŒ ์œ„์™€ ๊ฐ™์ด ๋‚ด์šฉ์ด ์ถœ๋ ฅ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

๋‹ต๊ธ€ ๋‚ด์šฉ์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•œ ๋‹ค๋ฅธ ๊ฒŒ์‹œ๋ฌผ

 

์ด๋ฒˆ์—” ๋‹ต๊ธ€์— ๋Œ€ํ•ด ๋ถ„์„ ํ•ด ๋ณด๋ ค๊ณ  ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

 

DevInquryDetailView.vue - 57 ~ 68๋ฒˆ์งธ ์ค„

 

์—ฌ๊ธฐ์„œ๋Š” <template> ์•ˆ์—์„œ ์กฐ๊ฑด์ ˆ์„ ์ด์šฉํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด์—์š”. devInquryData ์•ˆ์— ๋‹ต๋ณ€ ์—ฌ๋ถ€(answerAt)๊ฐ€ 'N'์ด ์•„๋‹ˆ๋ฉด ์ฆ‰, ๋‹ต๋ณ€ ์—ฌ๋ถ€๊ฐ€ ์ฐธ์ด๋ผ๋ฉด ํ•ด๋‹น ๋‚ด์šฉ์„ ์ถœ๋ ฅํ•˜๋ผ๋Š” ๊ฒƒ์ด์—์š”. v-if๋Š” v-show์™€ ๋‹ค๋ฅด๊ฒŒ ์กฐ๊ฑด์ด ๊ฑฐ์ง“์ด๋ฉด Rendering ์ž์ฒด๋„ ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋ ‡๊ฒŒ ์กฐ๊ฑด์ ˆ์ด ์ฐธ์ด๋˜๋ฉด 66๋ฒˆ์งธ ์ค„์— devInquryData ์•ˆ์— ๋‹ต๋ณ€ ๋‚ด์šฉ(answerCn)์„ ์ถœ๋ ฅํ•˜๊ฒŒ ํ•ด ์ค€ ๊ฒƒ์ด๋ž๋‹ˆ๋‹ค.

 

 

 

์ด๋ฒˆ์—” ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ์•Œ์•„ ๋ณผ ๊ฒƒ์ด์—์š”.
๋”ฑ ๋ณด๋ฉด ์•Œ๊ฒ ๋“ฏ์ด ์ด์ „ ๊ธ€๊ณผ, ๋‹ค์Œ๊ธ€๋กœ ๋„˜์–ด๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ธ ๊ฒƒ์ด์—์š”.

 

 

 

DevInquryDetailView.vue - 76 ~ 91 ์ค„

 

Tag์— ๋Œ€ํ•œ ์„ค๋ช…์€ ๋ฏธ๋ค„๋‘๊ณ , ์‹ค์ œ์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ํ™•์ธ์„ ํ•ด ๋ณด๋ฉด 81๋ฒˆ์งธ ์ค„์— v-if๋ฅผ ํ†ตํ•ด devInqueryData ์•ˆ์— ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ(beforInqrySn)๊ฐ€ -1์ด ์•„๋‹Œ์ง€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด์—์š”.

-1์€ ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๊ณ , -100๋„ ํ•ด๋„ ๋˜๊ณ , -9999๋„ ์ € ๊ณณ์— ๋„ฃ์–ด๋„ ๋˜๋Š” ๊ฒƒ์ด๊ณ , 0์„ ๋„ฃ์–ด๋„ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

๊ฒฐ๊ตญ ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๊ฐ€ ์žˆ๋Š”์ง€ ์—†๋Š”์ง€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

์ด์ „ ๊ฒŒ์‹œ๊ธ€ ๋ฒˆํ˜ธ๊ฐ€ devInquryData์•ˆ์— ์žˆ๋‹ค๋ฉด router-link๋ฅผ ํ†ตํ•ด [ /support/devInquryDetailView ] URI๋กœ ๋ณด๋‚ด๊ฒŒ ๋  ๊ฒƒ์ธ๋ฐ, ์ด ๋ถ€๋ถ„์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด Click Event๊ฐ€ ๋ฐœ์ƒํ•ด์„œ goDetailView()์— devInquryData ์•ˆ์— ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ๋ฒˆํ˜ธ๋ฅผ ๋„ฃ์–ด ํ˜ธ์ถœ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - goDetailView(inqrySn)

 

์ด Method๊ฐ€ ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ๋ฒˆํ˜ธ๋ฅผ ๊ฐ€์ง€๊ณ  ๋™์ž‘์„ ํ•˜๊ฒŒ ๋˜๋ฉด router๋ฅผ ํ†ตํ•ด ์ž๊ธฐ ์ž์‹ ์— URI ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๊ณ , ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋“ค์–ด์˜จ ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๋ฅผ ์ „๋‹ฌํ•ด์„œ ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ๋‚ด์šฉ์ด ์ถœ๋ ฅ ๋˜๋„๋ก ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 76 ~ 91 ์ค„

 

๋‹ค์‹œ ์œ„์˜ ๋‚ด์šฉ์œผ๋กœ ๋Œ์•„์˜ค๋ฉด ๊ฒฐ๊ตญ ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๋กœ Page๊ฐ€ ์ด๋™์ด ๋˜์—ˆ๊ณ , ๋‹ค์‹œ ๊ทธ ์ด์ „์— ๊ฒŒ์‹œ๊ธ€ ์ œ๋ชฉ์„ ์ถœ๋ ฅํ•ด ์ฃผ์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— `devInquryData.beforInqrySj(์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ œ๋ชฉ)`์„ ์ถœ๋ ฅํ•˜๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ๋ฆฌ๊ณ , 87๋ฒˆ์งธ ์ค„์— v-else๋ฅผ ํ†ตํ•ด ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ๋ฒˆํ˜ธ๊ฐ€ -1๊ณผ ๊ฐ™๋‹ค๋ฉด ์ฆ‰, ์ด ์ „ ๊ฒŒ์‹œ๊ธ€์ด ์—†๋‹ค๋ฉด '์ด์ „ ๊ธ€์ด ์—†์Šต๋‹ˆ๋‹ค.'๋ฅผ ์ถœ๋ ฅํ•ด ์ฃผ๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 93 ~ 108๋ฒˆ์งธ ์ค„

 

์œ„์— ๋‚ด์šฉ์€ ๋‹ค์Œ ๊ธ€๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” Logic์ด๊ณ , ์œ„์— ์ด์ „ ๊ธ€๊ณผ์˜ ์ฐจ์ด๋Š” ์ด์ „ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๋ฅผ ๊ฐ€์ง€๊ณ  ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋‹ค์Œ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๋ฅผ ๊ฐ€์ง€๊ณ  Logic์„ ์ˆ˜ํ–‰ํ•œ๋‹ค๋Š” ์ฐจ์ด๋งŒ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

 

 

 

 

์ด๋ฒˆ์—” ์œ„์™€ ๊ฐ™์€ ๋ฒ„ํŠผ์— ๋Œ€ํ•ด ์•Œ์•„ ๋ณผ ๊ฒƒ์ด์—์š”.
์ˆ˜์ •๊ณผ ์‚ญ์ œ๋Š” ๋”ฐ๋กœ ์ž‘์„ฑํ•˜์—ฌ ์ •๋ฆฌ ํ•˜๋„๋ก ํ•  ๊ฒƒ์ด๊ณ , ์ด ๊ณณ์—์„œ๋Š” ๋ชฉ๋ก๋งŒ ์ •๋ฆฌ ํ•˜๋„๋ก ํ•  ๊ฒƒ์ด์—์š”.

 

 

DevInquryDetailView.vue - 112 ~ 113๋ฒˆ์งธ ์ค„

 

์ด ๊ณณ์—์„œ ์ค‘์ ์ ์œผ๋กœ ๋ณผ ๋ถ€๋ถ„์€ 113๋ฒˆ์งธ ์ค„์ธ ๊ฒƒ์ด์—์š”. '๋ชฉ๋ก'์ด๋ผ๋Š” ๋ฒ„ํŠผ์€ ์‚ฌ์‹ค <a> Tag๋กœ ๋งŒ๋“ค์–ด์ง„ Link์ธ ๊ฒƒ์ด๊ณ , click์ด๋ผ๋Š” Event๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด goList()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView - goList()

 

์ด ์นœ๊ตฌ๋Š” ๋‹จ์ˆœํžˆ router๋ฅผ ์ด์šฉํ•ด์„œ devInquryList ์ฆ‰, ๋ชฉ๋ก ์กฐํšŒ Page๊ฐ€ Rendering๋˜๊ฒŒ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.
๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด ๋ชฉ๋ก ์กฐํšŒ Page๋กœ ์ด๋™ํ•œ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•