스프링부트(SpringBoot) 게시판 만들기 (7) - 게시글 삭제 기능 구현

게시글 삭제 기능 구현하기

 

PostController에 게시글 삭제하는 메서드 추가

// 기존 게시글 삭제
@PostMapping("/post/delete.do")
public String deletePost(final Long id) {
    postService.deletePost(id);
    return "redirect:/post/list.do"
}

 

게시글 번호(id)를 파라미터로 전달받아 postMapper에 정의한 delete쿼리가 실행되어 게시글이 삭제된다. 
단, 물리적으로 아예 삭제를 시키는 것이 아니라 삭제 여부 값을 1로 바꾸어 화면에서 제외 시키는 것.

 

삭제 버튼에 onclick 이벤트 선언 (view.html)

 

 

선언한 이벤트 자바스크립트 함수 생성 (view.html)

<th:block layout:fragment="script">
    <script th:inline="javascript">
    /*<![CDATA[*/

        // 게시글 삭제
        function deletePost() {
            const id = [[ ${post.id} ]];

            if ( !confirm(id + '번 게시글을 삭제할까요?') ) {
                return false;
            }

            const formHtml = `
                <form id="deleteForm" action="/post/delete.do" method="post">
                    <input type="hidden" id="id" name="id" value="${id}" />
                </form>
            `;
            const doc = new DOMParser().parseFromString(formHtml, 'text/html');
            const form = doc.body.firstChild;
            document.body.append(form);
            document.getElementById('deleteForm').submit();
        }

    /*]]>*/

    </script>
</th:block>

 

confirm() 함수를 사용해 사용자가 확인을 누르면 true, 취소를 누르면 false 를 return 하며 함수가 종료된다.

 

그 다음 formHtml 변수에 삭제 api(PostController의 deletePost() 메서드)를 불러오는 폼 정보를 선언하고, 폼에 hidden 타입으로 게시글의 id(번호)를 담는다. 그렇게 담긴 id는 나중에 폼을 제출했을 때 컨트롤러에 있는 deletePost()로 전송되고, 전달받은 id를 이용해 게시글을 삭제(삭제 여부 상태값 변경)한다.

 

이후 formHtml에 문자열 형태로 정의된 html 폼을 DOMParser를 사용하여 실제 html 문서로 변환한다. 변환된 문서에서 폼 요소를 가져와 document.body.append(form)를 통해 현재 페이지의 body에 추가한다. 추가된 폼을 submit(제출)하여 서버로 삭제 요청을 보낸다.

 

위 코드는 동적인 방법으로 폼을 삭제 요청이 발생할 때마다 JavaScript로 생성하는 방식이다. 필요할 때마다 폼을 생성하므로 페이지가 깔끔해지지만, 보다시피 JS 코드가 약간 더 복잡하다.

 

 

아래는 정적인 방식의 예시로 페이지가 로드될 때 미리 폼을 HTML에 작성해 두고, 삭제할 때 이 폼을 제출한다. 폼이 미리 HTML에 작성되어 있어 코드가 간단하고 이해하기 쉽지만, 페이지에 불필요한 폼 요소가 있을 수 있게 된다.

<form id="deleteForm" action="/post/delete.do" method="post" style="display:none;">
    <input type="hidden" id="id" name="id" value="" />
</form>

<script>
function deletePost() {
    const id = [[ ${post.id} ]];

    if (!confirm(id + '번 게시글을 삭제할까요?')) {
        return false;
    }

    document.getElementById('id').value = id;
    document.getElementById('deleteForm').submit();
}
</script>

 

 

 

게시글 삭제 해보기

 

게시글 삭제 결과

 

취소를 클릭하면 이벤트가 종료되어 아무런 동작을 하지 않고, 확인을 누르면 /post/list.do(목록 페이지)로 리다이렉트 되면서 해당 글이 목록에서 없어진 것을 볼 수 있다. 화면에 보이는 번호도 재정렬됨!

 

 

 

실제로는 물리적으로 데이터가 삭제 된 것이 아니라 삭제 여부 상태값만 변경이 된 것이기 때문에, 테이블에는 데이터가 존재한다. 대신에 delete_yn 상태 값이 1로 바뀐 것을 확인 할 수 있다. 다시 게시글을 화면에 노출시키고 싶으면 해당 상태값을 직접 0으로 변경 시키면 됨!

 

 

---

모든 코드는 아래 블로그를 참고합니다!

스프링 부트(Spring Boot) 게시판 - 게시글 삭제 구현하기 [Thymeleaf, MariaDB, IntelliJ, Gradle, MyBatis]