[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

 

 

 

 

 

 

🚀 게시판 만들기 - 삭제

    🔽  화면

 

 

    🔽  Source Code

DevInquryDetailView.vue - 112 ~ 119

 

DevInquryDetailView.vue - 126 ~ 144

 

DevInquryDetailView.vue - 210 ~ 222

 

 

 

 

 

    🔽  Code 분석 - 삭제

게시글 삭제는 화면이 따로 존재하지 않기 때문에 Component가 필요 없는 것이에요. 즉, Component는 화면을 기준으로 만들어 주는 것이라고 생각하면 되는 것이에요. 예를 들어 목록 조회라는 화면이 필요하고, 상세 조회라는 화면이 필요하다면 해당 Component를 만들어 주어야 하겠지만, 삭제라는 것은 어떤 화면이 아니라 기능이기 때문에 Component가 따로 없고, 상세 조회에서 Button을 누르게 되면 해당 기능이 동작하면 되기 때문에 이 점을 기억하고, 분석을 해 볼 것이에요.

 

DevInquryDetailView.vue - 112 ~ 119

 

맨 위 '화면'에서 보았듯이 `상세 보기`에서 `삭제` Button을 누르게 되면 어떤 Event가 발생하게 되고, 정말 삭제할 것인지에 대한 Popup창이 뜨는 것이에요.

위 코드 `DevInquryDetailView.vue - 112 ~ 119`를 보게 되면 119번째가`삭제` Logic의 시작점인 것이에요.
이용자가 `삭제`라는 Button을 클릭하게 되면 119번째 줄에 <a> Tag를 클릭하게 된 것이고, 이를 통해 Click Event가 발생하게 되는데, 이 때, deletePopup이라는 변수가 true로 변하게 되는 것이에요.

 

DevInquryDetailView.vue - 126 ~ 144

127번째 줄을 보게 되면 v-show를 통해 deletePopup 변수가 `true`라면 Pop up 화면을 보여주게 처리가 된 것이에요.
이용자가 `삭제` Button을 클릭하게 되면 P Tag를 통해 '해당 게시글을 삭제 하시겠습니까?' 라고 묻는 Popup이 뜨게 되고, 해당 Popup 밑에는 확인, 취소 Button이 존재하는 것이에요.

 

139번째 `확인` Button을 클릭하게 되면 Click Event가 발생하여 `doDelete()`라는 Method가 호출되는 것이에요.

 

DevInquryDetailView.vue - 210 ~ 222

 

최초 이 친구가 호출되면 Axois를 이용해서 해당 게시물을 DB에서 지우기 위해 Back End와 통신이 필요한 것이에요.
그래서 211번째 줄과 같이 devInquryDelete를 호출하게 되는데, 이 때 하나의 특정 게시글만 삭제를 해야 되기 때문에 해당 게시글의 일련번호(inqrySn)을 전달 해 주면서 호출하는 것이에요.

 

devInquryApi.js

 

devInquryDelete가 호출이 되면 이 곳에 오게 되는데, Back End Controller에 지정된 URI에 HTTP Method `delete`를 통해 매개 변수로 들어온 게시글 일련번호(inqurySn)을 같이 전달 해 주는 것이에요.

 

 

   @ResponseBody @DeleteMapping("/devInqury")
    public Object devInquryDelete(@RequestBody DevInquryVO devInquryVO) throws Exception {

        log.info("DevInquryController의 devInquryDelete(@RequestBody DevInquryVO devInquryVO)가 호출 되었습니다!");
        log.info("Client에서 넘어온 Data Value를 먼저 확인 하기 위해 배열 변수에 값을 넣겠습니다!");

        Field[] fields = devInquryVO.getClass().getDeclaredFields();

        for (Field field : fields) {

            /** 참고 자료
             * @see "https://tyboss.tistory.com/entry/Java-%EC%9E%90%EB%B0%94-%EB%A6%AC%ED%94%8C%EB%A0%89%EC%85%98-reflection-setAccessible"
             */

            log.info("Java 리플렉션 기법 중 setAccessible(true) 통해 Field 객체 자료형 Type field의 접근제어 지시자에 의한 제어를 변경 하겠습니다!");
            field.setAccessible(true);

            System.err.println(field.getName() + " : " + field.get(devInquryVO));

        } // for (Field field : fields) 끝

        Map<String, Object> result = new HashMap<>();

        try {

            log.info("Q&A 게시글 삭제가 시작 됩니다!");
            log.info("devInquryService.devInquryDelete(devInquryVO)를 호출 하겠습니다!");

            devInquryService.devInquryDelete(devInquryVO);

            log.info("비즈니스 로직이 정상 처리 되었으므로, Map result에 200 Code를 담겠습니다!");

            result.put("code", 200);

        } catch (Exception e) {

            log.info("게시글 삭제 중 문제가 발생하여 catch문이 실행 되었습니다!");

            e.printStackTrace();

            log.warn(e.getMessage());

            log.info("Logic이 Error로 401 Code를 Map result에 넣겠습니다!");
            result.put("code", 401);

            return result;
        } // try - catch 끝

        return result;

    } // devInquryDelete(@RequestBody DevInquryVO devInquryVO) 끝

 

그럼 BackEnd의 위의 Controller의 Method가 동작하게 되는 것이고, Back End에서 Logic을 처리하게 되는 것이에요.

 

 

DevInquryDetailView.vue - 210 ~ 222

그럼 다시 위에 Code로 돌아와서 Back End가 요청을 받고, 해당 게시물을 삭제하고 나서 어떤 응답값을 Client에게 전달을 해주었을 것인데, 그 값이 response에 담기는 것이에요.

 

그럼 어떤 값을 Back End는 전달을 해 주는 것일까요?

 

Back End Response Value

 

바로 이렇게 `HTTP Status Code 200`만 전달을 해 주는 것이에요. 삭제가 완료가 되었다면 상세 조회에 보여줄 값이 없기 때문에 어디론가 이동을 시켜줘야 하는데, 해당 게시판을 이용자가 둘어보고 있었으니 게시판 목록 조회로 다시 보내주는게 좋을 거 같은 것이에요.

그래서 216번째에서 goList()를 호출해 주는 것이에요.

 

DevInquryDetailView.vue - goList()

해당 Method가 호출되면 router를 통해 /support/devInquryList에 위치한 DevInquryList Component를 Re Rendering하게 되고, 결국 이용자는 목록 조회 Page로 이동한 것과 같은 효과를 보게 될 것이에요.

 

만약 삭제가 실패 했다면 어떤 일이 발생하게 될까요? 🤔

DevInquryDetailView.vue - doDelete() : 217 ~ 222

실패가 된다면 catch문에 들어오게 될 것이고, console에 해당 error 내용을 출력하게 될 것이에요.
그리고, 경고창이 발생하게 되고, 어떤 동작도 하지 않을 것이기 때문에 그대로 해당 게시글 상세 조회 Page에 남게 될 것이에요.

 

 

 

 

 

해당 Project에서 게시글에 대한 CRUD에 대한 코드 분석 등을 모두 마쳤습니다!
이제 회원 관리에 대한 내용을 정리하게 될 것이고, 다른 게시판은 위 게시판과 동일하게 구성이 될 것이기 때문에 따로 정리하지는 않을 것이에요.