40. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 게시물의 수정/삭제(처리, 페이지로 이동, 확인)

 

💁🏻‍♂️ 게시물의 수정/삭제 처리

수정 작업은 일반적으로 아래와 같은 방식을 많이 사용한다

1) 조회 페이지에서 직접 처리하는 방식

2) 별도의 수정/삭제 페이지를 만들고 그 페이지에서 수정과 삭제를 처리하는 방식

 

최근에는 조회 페이지에 댓글 등에 대한 처리가 많아지면서

수정과 삭제는 별개의 페이지에서 하는 것이 일반적이다.

 

조회 페이지에서는 GET 방식을 처리되는 URL을 통해서

수정/삭제 버튼이 존재하는 화면을 볼 수 있게 제작해야 한다.

 

수정 혹은 삭제 작업은 POST방식으로 처리되고

결과는 다시 목록 화면에서 확인할 수 있는 형태로 제작한다.

---

👉🏻 수정/삭제 페이지로 이동

BoardController에서 수정/삭제가 가능한 화면으로 이동하는 것은

조회 페이지와 같다. 따라서 기존 get() 메서드를 수정해서 화면을 구성해 보자.

 

👨🏻‍💻 BoardController 수정

@GetMapping이나 @PostMapping 등은

하나의 메서드로 여러 URL을 배열로 처리할 수 있다.

 

브라우저에서는 /baord/modify?bno=30’과 같은 방식으로 처리하므로

views폴더 내 modifiy.jsp를 작성해 준다.

 

👨🏻‍💻modifiy.jsp 작성

 

<form> 태그는 action 속성을 /board/modify’로 지정했지만

삭제 시 /board/remove’와 같이 action 속성의 내용을 수정해서 사용한다.

 

제목, 내용은 수정이 가능한 형태로 사용해서 사용자가 편집할 수 있게 한다.

등록일과 수정일은 나중에 BoardVO로 수집되어야 하므로 날짜 포맷을 ‘yyyy/mm/dd’로 한다.

 

JavaScpript에서는 위 버튼에 따라 다른 동작을 할 수 있게 아래처럼 수정해 준다.

<button> 태그의 ‘data-oper’ 속성을 이용해 원하는 기능을 동작하도록 처리.

 

<form> 태그의 모든 버튼을 기본적을 submit으로 처리하기 때문에

e.preventDefault()로 기본 동작(버튼, 링크 등)을 막고 마지막에 직접 submit()을 수행한다.

 

🙋🏻‍♂️ 결과

브라우저에 board/modify?bno=1(존재하는 게시물 번호)

요청 시 정상적으로 출력을 확인할 수 있다.

---

✍🏻 게시물 수정/삭제 확인

수정) 화면에서 게시물을 수정하고 modify 버튼을 통해 BoardController에 수정을 요청한다.

요청시 파라미터들은 BoardVO로 처리하게 된다.

 

삭제) 화면에서 ‘Remove’ 버튼을 클릭 시

<form> 태그의 action 값이 /board/remove가 되어 데이터들을 전송한다.

물론 BoardController에서는 bno 값 하나만 필요하지만 처리에 문제는 없다.

 

💁🏻‍♂️ 결과

게시물 수정, 삭제 모두 동작 후 다시 /board/list 화면으로 이동하게 된다

이 경우에 대한 처리는 완료되었으므로 모달창을 통하여 메시지를 확인할 수 있다.

 

---

💁🏻‍♂️ 최종 흐름

 

 

 

위 내용은 코드로 배우는 스프링 웹 프로젝트 교재를 참고하여 작성되었습니다.

코드로 배우는 스프링 웹 프로젝트 - YES24