37. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 재전송(redirect)처리, 모달창 사용의 이유, 목록에서 버튼으로 이동하기

 

🔀 재전송(redirect)처리

등록 과정에서 POST 방식으로 데이터가 처리되는 과정을 그림으로 표현하면 다음과 같다

BoardController에서 register() 메서드는 ‘redirect:/board/list’를 전송하는데

브라우저는 이를 통보받고 /board/list로 이동한다.

이 같은 재전송을 사용하지 않으면 ‘새로고침’을 통해 동일한 내용을

계속 서버에 등록할 수 있기에 (흔히 도배) 문제가 발생된다.

따라서 등록, 수정, 삭제 작업은 처리가 완료된 후 다시 동일한 내용을 전송할 수 없도록

브라우저의 URL로 이동하는 방식을 이용한다.

 

또 중요한 부분은 등록, 수정, 삭제 작업 결과를 바로 알 수 있게 피드백을 줘야 한다

경고창이나 <div>를 이용하는 모달창을 이용해서 이러한 작업을 처리한다.

---

🙋🏻‍♂️ 모달창 사용의 이유

BoardController코드에서 에서 redirect 처리를 할 때

RecdirectAttirbutes라는 특별한 타입의 객체를 이용했다.

 

addFlashAttribute()의 경우 이러한 처리에 적합하다. 그 이유는

일회성으로만 데이터를 전달하기 때문.

 

addFlashAttribute()로 보관된 데이터는 한 번만 사용할 수 있게 보관된다

(세부적으로는 HttpSession을 이용해서 처리).

 

list.jsp 페이지의 아래쪽에 <script> 태그를 이용하여

상황에 보관하는 데이터를 확인해 보자.

👨🏻‍💻 list.jsp 코드수정

 

💁🏻‍♂️ 결과

새로운 게시물을 등록한다. (register() 메서드 실행 → addFlashAttribute() 실행)

그럼 화면에는 생성된 게시글의 번호를 확인할 수 있다.(화면 우클릭 → 페이지 소스보기)

여기서 확인할 부분은 새로운 게시글은 게시글 번호가 생성된다.

그 번호는 addFlashAttribute()로 저장된다.

때문에 위와 같이 번호를 확인할 수 있지만(저장된 값을 꺼낼 수 있으니)

 

사용자가 /board/list를 직접적으로 바로 호출하거나(게시글 등록 없이)

혹은 게시글 등록 후 새로고침을 하게 되면(새로운 게시글 번호 생성 없이)

아래와 같이 번호가 보이지 않는다.

 

addFlashAttribute()를 이용해서 일회성으로만 데이터를 사용하므로

이를 이용해 경고창이나 모달창 등을 보여주는 방식으로 처리할 수 있다.

---

📺 모달(Modal) 창 보여주기

최근에 브라우저에서는 경고창(alert)을 띄우는 방식보다 모달창(Modal)을 보여주는 방식을 더 많이 사용한다.

 

BootStarp은 모달창을 간단하게 사용할 수 있으므로

목록 화면에서 필요한 메시지를 보여주는 방법(모달창)을 사용하자

 

모달창은 <div>를 화면 특정 위치에 보여주고,

배경이 되는 <div>에 배경색을 입혀 처리한다.

 

모달창은 활성화된 <div>를(모달창) 선택하지 않고는 다시 원래 화면을 볼 수 없어

필수 안내 메세지를 보여주는데 효과적인 방식이다.

 

따라서 우선 <div>를 이용해 페이지의 코드에 추가해 보자

모달창에 대한 코드는 구글링을 통하여 쉽게 구할 수 있다.

 

👨🏻‍💻 list.jsp 수정

모달창을 보여주는 작업은 jQuery를 이용해서 처리할 수 있다.

checkModal() 함수는 파라미터에 따라서 모달창을 보여주거나

내용을 수정한 뒤 보이도록 작성했다.

 

새로운 게시글이 작성되면 RedirectAttributes로 게시물의 번호가 전송되므로

이를 이용해서 모달창의 내용을 수정한다.

$("#myModal").modal("show"); 를 호출 시 아래 결과처럼 모달창이 나오게 된다.

💁🏻‍♂️ 결과

따라서 이제 /board/register를 이용해서 새로운 게시물을 작성하면

자동으로 /board/list로 이동하면서 모달창이 보이게 된다.

---

🚲 목록에서 버튼으로 이동하기

등록 작업을 시작할 수 있게 우측 상단에 버튼을 추가해 주자

👨🏻‍💻 list.jsp 수정

jQuery 부분은 버튼 클릭 시 동작기능을 정의한다.

화면에서 ‘Register New Board’ 버튼 클릭시 게시물의 등록 페이지로 이동’

💁🏻‍♂️ 결과

 

 

 

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

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