이번 포스트는 글을 작성하거나 수정하였을 때,
브라우저 창에 확인메시지를 띄워주는 기능을 구현하는 과정이다.
전체적인 흐름은 다음과 같다
- JavaScript를 이용하여 글 작성/수정 시 메시지를 띄워주고, 게시글 리스트로 이동하도록 하는 message.html을 만든다.
- 글작성 및 수정 시, 뷰에 원하는 내용을 전달하도록 각각의 Controller를 수정한다
//message.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
alert(message);
location.replace([[${searchUrl}]]);
/*]]>*/
</script>
<body>
</body>
</html>CDATA란?
CDATA를 사용하는 이유
(위 코드에서는 JavaScript안에서 오류없이 타임리프 변수를 사용하기 위해서 CDATA를 사용하였다)
또 다른 CDATA 사용 예시
boardController.java
...
//글작성
@PostMapping("/board/writepro")
public String boardWritePro(Board board, Model model) throws Exception{
boardService.write(board);
model.addAttribute("message", "글 작성이 완료되었습니다");
model.addAttribute("searchUrl", "/board/list");
return "message";
}
//글수정
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, Board board, Model model){
Board boardTemp = boardService.boardView(id);
boardTemp.setTitle(board.getTitle());
boardTemp.setContent(board.getContent());
boardService.write(boardTemp);
model.addAttribute("message", "글 수정이 완료되었습니다");
model.addAttribute("searchUrl", "/board/list");
return "message";
}글작성과 글수정 Controller를 위와 같이 수정한다.
즉, 각각의 메서드 매개변수에 Model을 추가하여 각 상황에 맞는 message와 searchUrl를 addAttribute()로 전달하고, message 뷰를 리턴하도록 코드를 수정한다.
[출처] 위 내용은 한코딩님의 유튜브 강의를 정리한 내용입니다
웹개발 블로그