[Spring] 자바스크립트 - AJAX 통신을 활용한 게시글 삭제

Feb 29, 2024

Contents

1. View 확인 2. API 컨트롤러 3. 레파지토리 4. 결과 확인 5. 삭제 오류 처리

1. View 확인

삭제 버튼을 누르면 삭제가 되도록 한다.


    function render(board){
        return `  // 백틱 사용
            <tr id="board-${board.id}">
            <td>${board.id}</td>
            <td>${board.title}</td>
            <td>${board.content}</td>
            <td>${board.author}</td>
            <td>
                <div class="d-flex">
                        <button onclick="del(${board.id})" class="btn btn-danger">삭제</button>
                    <form action="/board/1/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
    }

삭제 버튼에 onclick="del(${board.id})" 를 추가한다. 버튼을 클릭하면 del() 함수가 실행된다.


    function del(boardId){
        $.ajax({
            url:`/api/boards/${boardId}`,
            type: "delete"
        }).done((res)=>{
            $(`#board-${boardId}`).remove();
        }).fail((res)=>{
            alert(res.responseJSON.msg);
        });
    }

del() 함수를 만든다.

💡

responseJSON 객체는 서버로부터 받은 JSON 형태의 응답 본문을 담고 있다. 그 중 msg 필드는 보통 에러 메시지나 실패 사유 등을 담는데 사용된다.

2. API 컨트롤러


    @DeleteMapping("/api/boards/{id}")
    public ApiUtil<?> deleteById(@PathVariable Integer id,HttpServletResponse response){
        Board board =boardRepository.selectOne(id);
        if(board==null){
            response.setStatus(404);
            return new ApiUtil<>(404,"해당 게시글을 찾을 수 없습니다.");
        }

        boardRepository.deleteById(id);
        return new ApiUtil<>(null);  //딜리트는 바디 데이터 없음
    }

ApiUtil 폴더에 오버로딩으로 생성자를 두 개 만든다. 성공 시에는 상태 코드가 200이 고정이기 떄문에 바디 데이터만 받는다. 실패 시에는 상태 코드와 오류 메세지만 받는다.

3. 레파지토리



@RequiredArgsConstructor
@Repository
public class BoardRepository {
    private final EntityManager em;

    public List<Board> selectAll(){
        Query query = em.createNativeQuery("select * from board_tb order by id desc", Board.class);
        List<Board> boardList = query.getResultList(); // 못찾으면 빈 컬렉션을 준다 (크기=0)
        return boardList;
    }
}

    @Transactional
    public void deleteById(Integer id) {
        Query query = em.createNativeQuery("delete from board_tb where id =?");
        query.setParameter(1, id);
        query.executeUpdate();
    }

4. 결과 확인

삭제 버튼을 누른다.

정상적으로 글이 삭제되고 DB에서도 데이터가 삭제된다.

5. 삭제 오류 처리

삭제를 홈페이지가 아니라 포스트맨을 활용해 외부에서 요청을 시도했다.

정상적으로 데이터가 삭제된다.

하지만 메인 페이지에서는 삭제되지 않고 그대로 남아있다.

삭제 버튼을 누르면 게시글을 찾을 수 없다는 오류 팝업이 뜬다. 확인을 눌러도 게시글은 삭제가 되지 않는다.

새로고침 시에만 8번 글이 삭제된 것을 확인할 수 있다.

UX를 높이기 위해서 자동으로 새로고침이 되도록 설정한다.


    function del(boardId){
        $.ajax({
            url:`/api/boards/${boardId}`,
            type: "delete"
        })
                .done((res)=>{
         $(`#board-${boardId}`).remove();
        }).fail((res)=>{
           alert(res.responseJSON.msg);
           location.reload(); // 자동 새로고침
        });
    }

💡

location.reload(); 를 사용하면 팝업창에서 확인을 눌렀을 때 자동으로 새로고침된다.