[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

 

 

 

 

 

🚀 답변 만들기 - 삭제

    🔽  화면

개발 지원 - Q&A 게시판 상세 조회

 

    🔽  Source Code

DevInquryDetailView.vue - 68 ~ 72

 

'답글 삭제'는 71번째 줄에 '답글 삭제' Button을 누르면서 시작되는데, 이 때 click Event로 `deleteReplyPopup` 이라는 변수가 true가 되면서 시작 되는 것이에요.

 

DevInquryDetailView.vue - data()

 

바로 228번째 `deletePopup`이 true가 되는 것이에요.

 

 

DevInquryDetailView.vue - 177 ~ 193

deletePopup이 True가 되면 178번째 줄에 v-show가 활성화가 되고, 이 곳에 작성한 Popup에 해당하는 부분이 활성화 되는 것이에요.

 

답글 삭제 버튼 클릭

반응형

 

그럼 위와 같이 Popup창이 뜨게 되는 것이에요. '확인' 버튼을 클릭하게 되면 `DevInquryDetailView.vue - 177 ~ 193` 그림에 189번째 줄에 버튼을 누른 것인데, 이 때, Click Event로 doDeleteReply()가 호출되게 되는 것이에요.

여기서 취소를 누르게 되면 `deletePopup`은 false가 되고, 위에 Popup창은 닫히고 끝나는 것이에요.

 

DevInquryDetailView.vue - 327 ~ 342

그럼 이 곳에 위치한 `doDeleteReply`가 동작하게 되는데, 이 친구가 동작하면 최초 devInquryReplyDelete를 호출하게 되는 것이에요. 이 때, searchParam안에 있는 게시글 일련번호(inqrySn)을 전달하는 것이에요.

 

DevInquryDetailView.vue - 216 ~ 217

이 친구는 이 곳에 import 되어 있는데, 바로 Api라고 명칭된 js 파일에 위치한 Method인 것이에요.

 

 

devInquryReplyApi.js - 33 ~ 46

그럼 여기 위치한 Method가 동작하게 되는 것이에요.

이 친구가 동작을 하면 동작을 하고, 어떤일을 하겠다고 Console에 출력을 해 준 뒤 API에 맞는 URI에 맞추어서 HTTP Method는 `delete`로 하여 params에 매개 변수로 전달 된 게시글 일련번호(InqrySn)을 전달하는데, delete는 Request Body에 어떤 값을 전달하지 않고, Back End의 Path Variable에 맞추어 값을 URI에 보내기 위해 data가 아닌 params를 이용해서 요청을 보내는 것이에요. 

DevInquryDetailView.vue - 342 ~ 359

다시 이 곳으로 돌아오면 345번째 줄에 `response`에 Back End가 전달 해 준 응답값이 담기게 되고, 이 응답값은 data안에 담기게 되는데, 최초 어떤 내용이 담겼는지 Console 출력으로 확인을 하고,

if문을 통해 Back End가 전달 해 준 값 중에 code가 200이면 즉, 정상으로 처리가 끝났다면 '답글을 정말 삭제 하시겠습니까?' 라고 묻는 Popup을 닫기 위해 `deleteReplyPopup`의 값을 false로 바꿔주고, getDetailViewWhthReply()를 호출 하는 것이에요. 

해당 내용은 '이 곳'에서 어떻게 처리 되는지 확인 하실 수 있도록 준비 해 둘게요!

이렇게 되면 답글이 삭제 되고 나서 다시 해당 게시글 일련번호에 맞는 게시글 상세 조회 Page가 Rendering 되게 되고, 답글을 입력할 수 있는 상태의 상세 조회 Page가 아래와 같이 나타나게 되는 것이에요.

 

답글이 삭제된 게시글 상세 보기

 

 

만약 정상 처리가 되지 못해 catch절로 빠지게 되면 Console에 어떤 문제가 생겼는지 출력하고, 경고창을 통해 문제가 생겼다고 알려주고 끝나는 것이에요.