[스프링] 8. 글 등록 중복 알람 문제(자바스크립트 관련)!!

*문제 발생

글 등록 폼인 /board/register 에서 등록을하고

목록페이지인 /board/list 로 이동이 되면 알람이 뜨게 설정 하였다.

그러나......  뒤로가기 를 누른후 

다시 앞으로가기 버튼을 누르면 알람창이 중복으로 뜨는 문제가 발생한다.

나는 실제 글을 등록한게 아닌 앞 뒤 버튼만 눌렀을 뿐인데!!

 

현재 register 컨트롤러에서 result 값을 list 페이지로 보내 result 변수를 알람값으로 사용중이며 

	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {
		
		log.info("`: " +  board);
		
		Long bno=service.register(board);
		
		log.info("bno : " + bno);
		
		rttr.addFlashAttribute("result",bno);
		
		return "redirect:/board/list";
		
	}

 

해당 알람창을 담당하고 있는 자바스크립트의 일부를 추출해보면...

<script type="text/javascript">
 $(document).ready(function(){
	// 1. 글등록 알람창======================================
	 var result='<c:out value="${result}"/>';
	 
	 
	 checkModal(result);
	 
	 history.replaceState({},null,null);
	 
	 function checkModal(result){
		 
		 if(result==''|| history.state){ //히스토리는 이벤트를 담아두는 문서객체
			 return;
		 }
		 
		 if(result=='success'){ 
			 $(".modal-body").html(
					 "정상적으로 처리되었습니다.");
			 
		 }else if(parseInt(result)>0){
			 $(".modal-body").html(
					 "게시글 "+parseInt(result)+" 번이 등록되었습니다.");
		 }
		 $("#myModal").modal("show");
	 }
	 

자바스크립트에서 지원하는 history 객체를 이용해서 알람의 clear 작업을 진행하였다.

 

history.replaceState({},null,null);

history.state

 

이 두개의 구문을 추가해 주었더니 중복 문제가 해결되었다.

맨 아래쪽의 예제와 함께 이해하면 좋다.

 

[나의 개인적인 생각 설명]

history.replaceState({},null,null);

 

앞선 pushState 가 선언되지 않았기 때문에 replace와 비교될 url이 없기 때문에 기본적으로 null과 비교되는것 같다.

이때문에 출처는 동일해지기 때문에 예외는 발생되지 않으며 

history.replaceState({},null,null); 을 선언해주면

앞뒤로 이동 하였을때 url만 변경될뿐 해당 객체의 담긴 어떠한 이벤트 문서는 사라져 영향을 주지 않는것 같다.

 

조건에서 result==' ' || history.state 에서

result 로 받는 값이 없거나 히스토리 객체에 어떠한 값이 존재한다면

return 하여 아무것도 동작하지 않게 한다.

 

 

 

기본 구문의 양식이며

history.replaceState(stateObj, title[, url])

stateObjstate

객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체입니다.

state object는 null일 수 있습니다.

 

title

나중에는 사용할 수도 있지만, 대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다. 

이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.

 

url 

Optionalhistory 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다.

그렇지 않으면 replaceState에서 예외가 발생합니다.

 

 

 

[쉬운 설명]

const stateObj = { foo: 'bar' };
history.pushState(stateObj, '', 'bar.html');
history.replaceState(stateObj, '', 'bar2.html');

http://www.mozila.org/bar2.html

에서 아래와 같은 JavaScript를 실행한다고 가정해본다.

이렇게하면 URL 표시줄에 https://www.mozilla.org/bar2.html이라고 표시되지만,

브라우저가 bar2.html을 로드하거나 bar2.html파일이 있는지 확인하지는 않습니다.

이제 사용자가 https://www.microsoft.com 이동한 다음, 뒤로가기 버튼을 누른다고 가정해봅시다.

이 때, URL 표시줄에는 https://www.mozilla.org/bar2.html 이 표시됩니다.

사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 https://www.mozilla.org/foo.html이 표시되고,

bar.html은 완전히 무시되어 표시되지 않습니다.

 

참고:developer.mozilla.org/ko/docs/Web/API/History/replaceState