[Spring] 게시판 프로젝트10 - Redirect 처리 (addFlashAttribute)

Redirect

: 등록 과정에서 post방식으로 데이터가 처리되는 과정

 

 

우리가 일반적으로 사용하는 웹페이지(게시판)에서 동작하는 방식은 대부분 아래와 동일하다.

게시물 등록 페이지에서 form을 작성하여 전송버튼을 누르면 입력된 항목들이 BoardController에 전달된다. 컨트롤러는 /boards/list로 Redirect시킨다. 브라우저가 다시 컨트롤러에 /list를 호출하면 컨트롤러는 /list에 매핑된 메소드가 정의한 내용대로 목록 페이지를 브라우저에 띄운다. 

 

이 때 우리가 게시물을 등록하고 전송버튼을 누르면 목록페이지로 자동으로 이동하는 것이 Redirect이다. 물론 이 Redirect는 등록 뿐만아니라 수정, 삭제의 경우에도 사용한다. 

 

redirect시에 데이터를 전달할 수 있는 방법으로는 RedirectAttributes클래스를 사용하는 방법이 있는데, 성공적으로 리다이렉트를 한 경우 그 결과를 사용자에게 확인시켜줄 수 있는 기능을 사용할 수 있다. 개발자들이 대부분 사용자에게 결과를 확인시켜주는 경우는 alert창을 이용하는 경우가 많다! 

 

내용을 입력하고 등록버튼을 누르면 "등록되었습니다!" 알림창이 뜬 것을 확인했는데, 이 때 새로고침을 하게되면 어떻게 될까? 이 경우, 이전에서 넘어온 정보들이 아직 남아있어서 새로고침을 할 때 마다 등록되었습니다 알림창이 나오게 된다. 그치만 등록되는 것은 한 번인데 여러 번 알림창을 띄우는 것은 불필요하고 혼란스럽다.

그래서 우리는 이 부분에 대해 처리해주는 작업이 필요한데, 딱 일회성으로 데이터를 전달하게 하는 것이 바로 addFlashAttribute 속성이다. 

 

참고로 RedirectAttributes클래스에서는 addAttribute와, addFlashAttribute속성을 사용하는데, 방금 소개한 문제점을 해결하기 위해 우리는 실습에서 addFlashAttribute속성을 이용하여 코드를 작성해볼 것이다🙌

 

👇 addAttribute라는 속성과 addFlashAttribute속성의 차이점은 아래의 포스팅에서 참고

https://web-obj.tistory.com/455

RedirectAttributes(redirect 객체 전달)

---

 

기존에 BoardController에서 정의한 register메소드는 아래와 같다.

//실제로 게시물을 등록하는 경우
@PostMapping("/register") // 글을 등록하는 경우에는 get방식이 아니라 post방식을 사용한다.
public String register(BoardVO board, RedirectAttributes rttr) { // RedirectAttributes :
    log.info("[CONTROLLER]register : " + board);
    service.register(board);
    rttr.addFlashAttribute("result", board.getBno());
    return "redirect:/board/list";
}

여기서 보면 rttr.addFlashAttribute("result", board.getBno()); 코드가 일회성으로 데이터를 전송하는 부분이다.

컨트롤러에서 addFlashAttribute 속성을 사용했다면, 등록버튼을 눌렀을 때 리다이렉트되는 페이지, 즉 리스트 페이지의 html코드에 다음 자바스크립트 코드를 추가할 수 있다. 

<script type="text/javascript">
    $(document).ready(function() {
        var result = '<c:out value="${result}"/>';
        if(!(result==''))
            alert("게시물이 등록되었습니다!");
    });
</script>

 

실제로 result값이 넘어오는 지를 확인해보기 위해서는 개발자모드에서 해당 코드가 있는 곳을 검사하면 알 수 있다.

등록버튼을 눌러서 리스트를 넘어오는 경우에는 result값이 있다.

 

그러나 넘어온 리스트 페이지에서 새로고침을 누르는 경우에는 result값은 일회성이기 때문에 날라가버린 것을 확인할 수 있다. 그것을 이용해서 alert창을 제어한 것이다!

 

만약 게시물 번호를 함께 보여주려고 할 때, result를 그대로 사용하면 alert창에는 번호가 나타나지 않는다.

그런 경우엔 result값을 Int로 형변환하여 게시물 번호를 나타낼 수 있다.

<script type="text/javascript">
	$(document).ready(function() {
		var result = '<c:out value="${result}"/>';
		if(!(result=='')&& parseInt(result)>0)
			alert(parseInt(result)+"번 게시물이 등록되었습니다!");
	});
</script>