[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

 

 

 

 

 

 

🚀 답변 만들기 - 등록

    🔽  개요

답글, 댓글 등은 어떤 게시판에 상세 조회에 들어가면 이용할 수 있는 서비스인 것이에요.
주니하랑이 이 곳에서 만들고자 하는 답변은 통상적인 답글, 댓글처럼 여러 글을 올릴 수 있는 것이 아니라, 한번만 딱 등록할 수 있는 서비스를 만들어 볼 것이에요.

그런 뒤 차후 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이 수행될 수 있게 해 준것이에요.

 

그 외 모든 내용은 '등록'과 완전히 같습니다!