[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฒŒ์‹œํŒ : ๋‹ต๋ณ€ ๋“ฑ๋ก / ์ˆ˜์ •

2022. 3. 23. 02:02ใ†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

 



 

 

 

 

 

๐Ÿš€ ๋‹ต๋ณ€ ๋งŒ๋“ค๊ธฐ - ๋“ฑ๋ก

    ๐Ÿ”ฝ  ๊ฐœ์š”

๋‹ต๊ธ€, ๋Œ“๊ธ€ ๋“ฑ์€ ์–ด๋–ค ๊ฒŒ์‹œํŒ์— ์ƒ์„ธ ์กฐํšŒ์— ๋“ค์–ด๊ฐ€๋ฉด ์ด์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค์ธ ๊ฒƒ์ด์—์š”.
์ฃผ๋‹ˆํ•˜๋ž‘์ด ์ด ๊ณณ์—์„œ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๋‹ต๋ณ€์€ ํ†ต์ƒ์ ์ธ ๋‹ต๊ธ€, ๋Œ“๊ธ€์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ๊ธ€์„ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํ•œ๋ฒˆ๋งŒ ๋”ฑ ๋“ฑ๋กํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค ์ฐจํ›„ Refactoring์„ ํ•˜๊ฒŒ ๋  ๋•Œ, ์—ฌ๋Ÿฌ ๋‹ต๊ธ€์„ ๋‹ฌ ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋กœ ๋ฐœ์ „์„ ์‹œ์ผœ๋ณด๋ ค๊ณ  ๊ณ„ํšํ•œ ๊ฒƒ์ด์—์š”.

 

๋จผ์ € ๋ชฉ๋ก ์กฐํšŒ ํ™”๋ฉด์—์„œ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด `๋‹ต๋ณ€ ์—ฌ๋ถ€`์— `๋Œ€๊ธฐ`์™€ `์™„๋ฃŒ`๊ฐ€ ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

๊ฐœ๋ฐœ ์ง€์› - Q&A ๊ฒŒ์‹œํŒ ๋ชฉ๋ก ์กฐํšŒ ํ™”๋ฉด

 

๋‹ต๊ธ€์ด ๋‹ฌ๋ฆฌ๋ฉด '์™„๋ฃŒ'๋กœ ๋ณ€๊ฒฝ์ด ๋  ๊ฒƒ์ด๊ณ , ๋‹ต๊ธ€์ด ๋‹ฌ๋ฆฌ์ง€ ์•Š์œผ๋ฉด '๋Œ€๊ธฐ'๋กœ ๋‚จ์•„ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

    ๐Ÿ”ฝ  ํ™”๋ฉด

๊ฐœ๋ฐœ ์ง€์› - Q&A ๊ฒŒ์‹œํŒ ์ƒ์„ธ ์กฐํšŒ ํ™”๋ฉด

 

 

 

 

    ๐Ÿ”ฝ  Source Code

<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;" ๋ -->
  <div class="btn_wrap">
    <button class="btn04" @click="this.devInquryData.answerAt = 'N'">๋‹ต๊ธ€ ์ˆ˜์ •</button>

    <button class="btn03" @click="this.deleteReplyPopup = true">๋‹ต๊ธ€ ์‚ญ์ œ</button>
  </div>
</template> <!-- template v-if="devInquryData.answerAt !== 'N'" ๋ -->

<template v-else>
  <table class="tList">
    <caption>๋‹ต๊ธ€</caption>
    <colgroup>
      <col style="width: 15%">
    </colgroup>

    <tbody>
      <tr>
        <td class="PalignL">๋‹ต๊ธ€
        </td>

        <td class="PalignL">
          <textarea id="" type="text" class="w100p" rows="5" placeholder="๊ท€ํ•˜์˜ ์ง€์‹์„ ์ „์ˆ˜ ํ•ด ์ฃผ์„ธ์š”!" v-model="devInquryData.answerCn" ref="answerCn"></textarea>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="btn_wrap">
    <button class="btn04" @click="doRegistReply(inqrySn)">๋‹ต๊ธ€ ๋“ฑ๋ก</button>
  </div>
</template>

๋‹ต๊ธ€์— ํ•ด๋‹น ํ•˜๋Š” Source Code๋Š” ์œ„์™€ ๊ฐ™์€ ๊ฒƒ์ด์—์š”.

์ด Code๋Š” ๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ์กฐํšŒ Code์•ˆ์— ๋“ค์–ด ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

 

์œ„์˜ ์ฝ”๋“œ ์ค‘์—์„œ ์œ„ ์‚ฌ์ง„ ๋‚ด์šฉ์€ ๋‹ต๋ณ€ ๋‚ด์šฉ์„ ์กฐํšŒํ•˜๋Š” ๋ถ€๋ถ„์ธ๋ฐ, ์ด ๋ถ€๋ถ„์€ ๋”ฐ๋กœ ๊ธ€์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , ์ด๋ฒˆ ์žฅ์—์„œ๋Š” ๋“ฑ๋ก / ์ˆ˜์ •์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ ํ•ด ๋ณด๋„๋ก ํ•  ๊ฒƒ์ด์—์š”.

์—ฌ๊ธฐ์„œ ํ•œ๊ฐ€์ง€ ์ง‘๊ณ  ๋„˜์–ด๊ฐ€์•ผ ํ•  ๊ฒƒ์€ <templat> Tag๋ฅผ ๋ณด์‹œ๋ฉด v-if๋ฌธ์ด ์žˆ๊ณ , devInquryData ์•ˆ์— answerAt ๋ณ€์ˆ˜์— ๊ฐ’์ด 'N'์ด ์•„๋‹ˆ๋ผ๋ฉด ์ฆ‰, 'Y'๋ผ๋ฉด ๋‹ต๋ณ€ ๋‚ด์šฉ์„ ํ‘œ์‹œํ•˜๋ผ๊ณ  ํ•œ ๊ฒƒ์ด์—์š”.

 

<template v-else>
  <table class="tList">
    <caption>๋‹ต๊ธ€</caption>
    <colgroup>
      <col style="width: 15%">
    </colgroup>

    <tbody>
      <tr>
        <td class="PalignL">๋‹ต๊ธ€
        </td>

        <td class="PalignL">
          <textarea id="" type="text" class="w100p" rows="5" placeholder="๊ท€ํ•˜์˜ ์ง€์‹์„ ์ „์ˆ˜ ํ•ด ์ฃผ์„ธ์š”!" v-model="devInquryData.answerCn" ref="answerCn"></textarea>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="btn_wrap">
    <button class="btn04" @click="doRegistReply(inqrySn)">๋‹ต๊ธ€ ๋“ฑ๋ก</button>
  </div>
</template>

 

ํ•˜์ง€๋งŒ, ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฒˆ ์žฅ์—์„œ ์ฃผ๋กœ ๊ณต๋ถ€ํ•  ๋‚ด์šฉ์€ ๋ฐ”๋กœ ์ด ๋ถ€๋ถ„์ธ ๊ฒƒ์ด์—์š”.

๋‹ค์‹œ <template> Tag๊ฐ€ ์‹œ์ž‘์ด ๋˜๊ณ , v-else๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด์—์š”. ์œ„์—์„œ ์„ค๋ช…ํ•œ 'Y'๋ผ๋ฉด ๋‹ต๋ณ€์„ ํ‘œ์‹œํ•˜๋„๋ก ํ•œ ๊ฒƒ์ธ๋ฐ, ์ด ๊ณณ์—์„œ๋Š” 'Y'๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ์ฆ‰, 'N' ์ด๋ผ๋ฉด ์ด ๋ถ€๋ถ„์„ ํ‘œ์‹œํ•˜๋ผ๊ณ  ํ•œ ๊ฒƒ์ด์—์š”.

๋จผ์ € <td> Tag๋ฅผ ํ†ตํ•ด์„œ `๋‹ต๊ธ€`์ด ํ–‰์— ์ œ๋ชฉ์œผ๋กœ ํ‘œ์‹œ๋˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค ๋‹ค์‹œ <td> Tag๋ฅผ ํ†ตํ•ด์„œ ๋ณธ๊ฒฉ์ ์œผ๋กœ ๋‹ต๊ธ€์„ ๋‹ด๋Š” ๋‚ด์šฉ์ด ์žˆ๋Š”๋ฐ, ์šฐ๋ฆฌ๊ฐ€ ์ฃผ๋ชฉํ•ด์•ผ ํ•  ๋ถ€๋ถ„์€ ๋ฐ”๋กœ <textarea> Tag์ธ ๊ฒƒ์ด์—์š”.

์—ฌ๊ธฐ์„œ rows๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ํ–‰์— ํฌ๊ธฐ๋ฅผ ์ •ํ•ด ์ฃผ์—ˆ๊ณ , placeholder๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ์ ์–ด์•ผ ๋˜๋Š”์ง€ ๋‚˜ํƒ€๋‚ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ ๋‹ค์Œ v-model์„ ํ†ตํ•ด Data๋ฅผ Bindingํ•˜๋„๋ก ํ•ด ์ฃผ์—ˆ๋Š”๋ฐ, ๊ทธ ์ด์œ ๋Š” ๋‹ต๊ธ€ ์ˆ˜์ • Logic ๋•Œ๋ฌธ์ด๊ณ , ์ด ๋ถ€๋ถ„์€ ์•„๋ž˜์—์„œ ์ด์•ผ๊ธฐ ํ•ด ๋ณด๋„๋ก ํ•  ๊ฒƒ์ด์—์š”. ref๋ฅผ ํ†ตํ•ด์„œ ํ•ด๋‹น ๊ฐ’์ด Null์ด๋ผ๋ฉด ํ‘œ์‹œ๊ฐ€ ๋˜๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

 

data()

 

์œ„์—์„œ v-model์„ ํ†ตํ•ด ๋ฌธ์ž์—ด Data๊ฐ€ ์ž…๋ ฅ์ด ๋˜๋ฉด 208๋ฒˆ์งธ ์ค„์— `devInquryData`๋ผ๋Š” ๋ณ€์ˆ˜์•ˆ์— ๊ฐ์ฒด(Object) Type์œผ๋กœ `answerCn : [๋‹ต๊ธ€ ๋‚ด์šฉ ๋ฌธ์ž์—ด]`์ด ๋‹ด๊ธฐ๊ฒŒ ๋  ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 75 ~ 97

๋ฐ˜์‘ํ˜•

๊ทธ๋Ÿผ ์œ„์™€ ๊ฐ™์ด ๊ธ€์„ ์ž‘์„ฑ์„ ํ–ˆ๋‹ค๋ฉด Button์„ ํ†ตํ•ด ๋ฌด์–ธ๊ฐ€ Event๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ํ•ด ์ค˜์•ผ ํ•  ๊ฒƒ์ด์—์š”. ์ด ๋ถ€๋ถ„์ด ๋ฐ”๋กœ 94 ~ 96๋ฒˆ์งธ ์ค„์— ๋‚ด์šฉ์ด๊ณ , 95๋ฒˆ์งธ ์ค„์— ์šฐ๋ฆฌ๋Š” ์ฃผ๋ชฉํ•ด์•ผ ํ•  ๊ฒƒ์ด์—์š”.

`@click` ์ฆ‰, '๋‹ต๋ณ€ ๋“ฑ๋ก' Button์— Click Event๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋ฉด `doRegistReply()`๊ฐ€ ํ˜ธ์ถœ๋˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ด ๋•Œ, ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ(inqrySn)์„ ์ „๋‹ฌ ํ•ด ์ฃผ๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”. ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์ด์œ ๋Š” ํŠน์ • ๊ฒŒ์‹œ๊ธ€์— ๋‹ต๊ธ€์„ ๋‚จ๊ธฐ๋Š” ๊ฐœ๋…์ด๊ธฐ ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด์ œ `doRegistReply()`๋ฅผ ๋งŒ๋‚˜๋Ÿฌ ๊ฐ€๋ด์•ผ ๊ฒ ์–ด์š”!

 

DevInquryDetailView.vue - 279 ~ 311

์ตœ์ดˆ ์ด Method๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋ฉด ํ•ด๋‹น Method๊ฐ€ ํ˜ธ์ถœ ๋˜์—ˆ๋‹ค๋Š” ๋‚ด์šฉ์„ Console์— ์ถœ๋ ฅํ•˜๊ฒŒ ๋˜๊ณ , 

 

263๋ฒˆ์งธ ์ค„์— ๋ณด๋ฉด If๋ฌธ์„ ํ†ตํ•ด ๋‹ต๋ณ€ ๋‚ด์šฉ(answerCn)์ด ๋น„์–ด์žˆ๋Š”์ง€ ํ™•์ธ์„ ํ•˜๋Š” ๊ฒƒ์ด์—์š”. ๋งŒ์•ฝ ๋น„์–ด ์žˆ๊ฑฐ๋‚˜, ๊ณต๋ฐฑ๋งŒ ์ž…๋ ฅ์ด ๋˜์—ˆ๋‹ค๋ฉด Popup์ฐฝ์„ ํ•˜๋‚˜ ๋„์–ด์ค„ ๊ฒƒ์ธ๋ฐ, ํ•ด๋‹น Popup์ฐฝ์„ ๋„์–ด์ฃผ๊ธฐ ์œ„ํ•ด boolean Type์— ๋ณ€์ˆ˜ `validationPopupShow`์„ true๋กœ ๋ฐ”๊ฟ”์ฃผ๊ฒŒ ๋˜๋Š”๋ฐ, ์œ„์—์„œ data()์•ˆ์— ํ•ด๋‹น ๋ณ€์ˆ˜๋Š” ์„ ์–ธ์ด ๋˜์–ด ์žˆ๊ณ , false๋กœ ์ดˆ๊ธฐํ™” ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿผ ์ด ๋ถ€๋ถ„์ด true๊ฐ€ ๋˜๋ฉด ์–ด๋–ค ์ผ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ ๊นŒ์š”?

 

DevInquryDetailView.vue - 195 ~ 212

๋ฐ”๋กœ ์ด ๋ถ€๋ถ„์— Popup์ฐฝ์ด ๋”ฑ! ํ•˜๊ณ  ๋„์–ด์ง€๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

114๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด v-show๋ฅผ ํ†ตํ•ด validationPopupShow ๋ณ€์ˆ˜๊ฐ€ true์ด๋ฉด ์•„๋ž˜ ๋‚ด์šฉ์ด ๋ณด์—ฌ์ ธ๋ผ! ๋ผ๊ณ  ๋ช…๋ น์„ ์ค€ ๊ฒƒ์ด์—์š”.

 

๋‹ต๋ณ€์ด Nul์ผ ๊ฒฝ์šฐ

 

๊ณต๋ฐฑ(Space)๋งŒ ์ž…๋ ฅ ๋˜์—ˆ์„ ๊ฒฝ์šฐ

 

 

๊ณต๋ฐฑ(Space)๋งŒ ์ž…๋ ฅ ๋˜์—ˆ์„ ๊ฒฝ์šฐ - ๊ฒฐ๊ณผ

 

 

207๋ฒˆ์งธ ์ค„์— ํ•ด๋‹น ํ•˜๋Š” ๋ถ€๋ถ„์ด ํ•ด๋‹น Popup ์ฐฝ์— `ํ™•์ธ` Button์ธ๋ฐ, ์ด Button์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด `validationPopupShow` ๋ณ€์ˆ˜์— ๊ฐ’์ด false๋กœ ๋ฐ”๊พธ๋ฉด์„œ ํ•ด๋‹น Popup์ด ์‚ฌ๋ผ์ง€๋Š” ๊ฒƒ์ด์—์š”.

 

 

๊ทธ๋ ‡๋‹ค๋ฉด ์ •์ƒ์ ์œผ๋กœ ์ž‘์„ฑ์ด ๋˜์—ˆ๋‹ค๋ฉด ์–ด๋–ค์ผ์ด ๋ฐœ์ƒํ• ๊นŒ์š”?

 

 

 

'๋‹ต๋ณ€ ๋“ฑ๋ก' Click

 

 

๋‹ต๋ณ€ ๋“ฑ๋ก ์™„๋ฃŒ ํ™”๋ฉด

 

DevInquryDetailView.vue - doRegistReply() : 312 ~ 326

 

์ •์ƒ์ ์œผ๋กœ ๊ธ€์ด ์ž‘์„ฑ ๋˜์—ˆ๋‹ค๋ฉด if๋ฌธ์„ ๋›ฐ์–ด ๋„˜๊ณ , ๋ฐ”๋กœ ์ด ๋ถ€๋ถ„์œผ๋กœ ์˜ค๊ฒŒ ๋  ๊ฒƒ์ด์—์š”. 311๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด devInquryReplyRegist()๋ฅผ ํ˜ธ์ถœํ•˜๋Š”๋ฐ, ์ด Method๋Š” Axios๋ฅผ ์ด์šฉํ•˜๋Š” ๋”ฐ๋กœ ์ž‘์„ฑ๋œ Api.js์•ˆ์— ์žˆ๋Š” ์นœ๊ตฌ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด์—์š”. ์ด ๋•Œ, devInquryData ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌ์„ ํ•ด ์คŒ์œผ๋กœ์จ, ๋‹ต๋ณ€ ๋“ฑ๋ก์— ํ•„์š”ํ•œ ๋‚ด์šฉ์„ ๋ชจ๋‘ ๋‹ด์•„ ๋ณด๋‚ด๋Š” ๊ฒƒ์ด์—์š”.

 

DevInqruryDetailView.vue - import ๋ฌธ

 

์œ„์™€ ๊ฐ™์ด Method๋ฅผ ๋ฐ”๋กœ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ์ด์œ ๋Š” ๋ฐ”๋กœ ์—ฌ๊ธฐ์„œ ํ•ด๋‹น Api์— Method๋ฅผ import ํ•ด ์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด์ œ devInquryReplyRegist๋ฅผ ๋งŒ๋‚˜๋Ÿฌ ๊ฐ€๋ด์•ผ ๊ฒ ์–ด์š”!

 

devInquryReplyApi.js - 1 ~ 31

๊ทธ๋Ÿผ ์ด ๊ณณ์— ์œ„์น˜ํ•œ devInquryReplyRegist๊ฐ€ ํ˜ธ์ถœ๋˜๊ฒŒ ๋˜๋Š”๋ฐ, 1๋ฒˆ์งธ ์ค„์„ ๋ณด๊ฒŒ ๋˜๋ฉด import๋ฅผ ํ†ตํ•ด Axios๋ฅผ import ํ•ด ์ค€ ๊ฒƒ์ด์—์š”. Axios๋ฅผ ์ด์šฉํ•˜๋ ค๋ฉด ๋จผ์ € '์„ค์น˜'๋ฅผ ํ•ด์ฃผ์–ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

์ด Method๊ฐ€ ์–ด๋–ค ์ผ์„ ํ•˜๋Š”์ง€ ์•Œ์•„ ๋ณผ๊ฒŒ์š”.

๋จผ์ € ์ด Method๊ฐ€ ๋™์ž‘ํ•˜๋ฉด Cosole์— ๋‚ด์šฉ์„ ์ถœ๋ ฅํ•œ ๋’ค Server (Back End - API)์— ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋˜๋Š”๋ฐ, ํ•ด๋‹น URI์— HTTP Method๋ฅผ `post`๋กœ ํ•˜์—ฌ Request Body์— ๋‹ต๊ธ€์„ ์ž…๋ ฅํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๋‹ต๋ณ€ ์—ฌ๋ถ€(answerAt), ๋‹ต๋ณ€ ๋‚ด์šฉ(answerCn), ๋‹ต๊ธ€ ์ž‘์„ฑ์ž ์ผ๋ จ๋ฒˆํ˜ธ(answerUserSn), ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ ๋ฒˆํ˜ธ(inqurySn)์— ๋Œ€ํ•œ ๊ฐ’์„ ๋‹ด์•„ data๋กœ ๋ณด๋‚ด์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

 

DevInquryDetailView.vue - doRegistReply() : 312 ~ 326

๋‹ค์‹œ ์ด ๊ณณ์œผ๋กœ ๋Œ์•„์™€์„œ 311๋ฒˆ์งธ response์— BackEnd๊ฐ€ ์‘๋‹ต์œผ๋กœ ๋Œ๋ ค์ค€ ๊ฐ’์ด ๊ฐ์ฒด(Object) Type์œผ๋กœ ๋‹ด๊ธฐ๊ฒŒ ๋˜๊ณ , ์ด ๋‚ด์šฉ์„ ๋จผ์ € Console์— ์ฐ์–ด ํ™•์ธ์„ ํ•œ ๋’ค ๊ฒฝ๊ณ ์ฐฝ(312๋ฒˆ์งธ ์ค„)์„ ๋„์–ด '๋‹ต๊ธ€ ๋“ฑ๋ก์ด ์™„๋ฃŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!'๋ฅผ ์•Œ๋ ค ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค getDetailViewWithReply()๋ฅผ ํ˜ธ์ถœํ•˜๋Š”๋ฐ, ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ๋ฒˆํ˜ธ์— ํ•ด๋‹น ํ•˜๋Š” ์ƒ์„ธ ์กฐํšŒ Page๊ฐ€ ์—ด๋ฆฌ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด Back End๊ฐ€ ๋Œ๋ ค์ค€ Data ์ค‘ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ(InqurySn)๊ฐ’์„ ์ „๋‹ฌํ•˜์—ฌ ์ƒ์„ธ ์กฐํšŒ Page๋กœ ๋Œ์•„๊ฐˆ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด๋‹น Method๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 254 ~ 267

 

๊ทธ๋Ÿผ ์œ„์˜ ๊ทธ๋ฆผ์— getDetailViewWithReply() Method๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”. ์ด์— ๋Œ€ํ•ด ์ž์„ธํ•œ ๋‚ด์šฉ์€ '์ด ๊ณณ'์— ์ค€๋น„ํ•ด ๋‘˜๊ฒŒ์š”!

 

 

 

 

 

๐Ÿš€ ๋‹ต๋ณ€ ๋งŒ๋“ค๊ธฐ - ์ˆ˜์ •

 

๋‹ต๊ธ€ ์ˆ˜์ •์€ '๋‹ต๊ธ€ ์ˆ˜์ •'์ด๋ผ๋Š” Button์„ Click ํ•จ์œผ๋กœ Click Event๋ฅผ ํ†ตํ•ด devInquryData ์•ˆ์— answerAt์ด "N"์œผ๋กœ ๋ฐ”๊พธ๋ฉด์„œ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 75 ~ 97

 

์œ„์˜ '๋‹ต๊ธ€ ๋“ฑ๋ก'๊ณผ ๋˜‘๊ฐ™์ง€๋งŒ, ์—ฌ๊ธฐ์„œ ์ด์•ผ๊ธฐ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์€ ๋ฐ”๋กœ '๋‹ต๊ธ€ ์ˆ˜์ •'์„ ๋ˆŒ๋ €์„ ๋•Œ, answerAt์ด "N"์œผ๋กœ ๋ฐ”๋€Œ์–ด์„œ <templat> Tage์˜ v-else๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๋˜์–ด '๋“ฑ๋ก'์ด๋ผ๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ธ๋ฐ, 

 

๊ฐœ๋ฐœ ์ง€์› - Q&A ๊ฒŒ์‹œํŒ ๋‹ต๊ธ€ ์ˆ˜์ •

 

'๋‹ต๊ธ€ ์ˆ˜์ •'์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด '๋“ฑ๋ก'๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ๊ธฐ์กด์— ์ž…๋ ฅ๋˜์–ด ์žˆ๋˜ ๋‹ต๊ธ€ ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜ค๋ฉด์„œ ์ˆ˜์ •์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

์ด๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ์ด์œ ๋Š” `DevInquryDetailView.vue - 75 ~ 97` ๊ทธ๋ฆผ์—์„œ 88๋ฒˆ์งธ ์ค„์— v-model ๋•Œ๋ฌธ์ธ๋ฐ, answerCn์„ Data Binding์„ ํ•ด์ค˜์„œ ๊ธฐ์กด์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ฒŒ ํ•ด์คŒ์œผ๋กœ ์ด Logic์ด ์ˆ˜ํ–‰๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ค€๊ฒƒ์ด์—์š”.

 

๊ทธ ์™ธ ๋ชจ๋“  ๋‚ด์šฉ์€ '๋“ฑ๋ก'๊ณผ ์™„์ „ํžˆ ๊ฐ™์Šต๋‹ˆ๋‹ค!

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•