프론트는 하나도 몰라서 엄청 헤맨 부분입니다. 뷰에서 어떤 자료를 요청했을 때 서버에서 처리 후 결과를 리턴할 때, 처리 결과에 대한 메세지를 어떻게 전달할까에 대한 문제입니다.
원래 JSP에서 처리할 때는 컨트롤러에서 최종적으로 처리 결과를 확인한 뒤 request나 session에 Attribute로 메세지 내용을 담아 뷰에 전달하고, 뷰에서 해당 Attribute가 있다면 메세지를 출력해주는 식이었습니다. 하지만 이걸 굳이 서버단에서 해야하나 싶어 단순한 결과 확인은 뷰단에서 하기로 했습니다.
뷰 페이지에서는 요청한 정보에 대한 객체가 있다면 출력해주면 되고, 없다면(null) 경고창을 띄우고 다른 화면으로 리다이렉트 시켜주면 될 것 같습니다. 이렇게하면 서버에서는 그냥 처리 결과만 뷰에 회신해주면 됩니다.
엄청 간단한건데 이상하게 작동이 안돼서 꽤나 헤맸네요.
일단 버튼을 눌러 동작시키는게 아니기 때문에 Jquery의 "$(document).ready" 를 사용했습니다. 화면 구성이 완전히 완료되기 전에 먼저 실행되도록 해준다고 합니다. 아래와 같이 작성하면 순서대로 경고창을 띄우고 확인 버튼을 누르면 리다이렉트 시켜줍니다.
만약 JSTL이나 스클립트릿으로 리다이렉트 코드를 아래 작성한다면 자바스크립트 코드가 실행되지 않고 바로 리다이렉트돼버립니다.
<c:when test="${vo == null}">
<script type="text/javascript">
$(document).ready(function() {
alert("존재하지 않는 게시물입니다.");
location.href = "/board/basicBoardList/${boardName}/1";
});
</script>
</c:when>
여기까지는 찾기가 쉬웠는데 도통 실행이 안되는 문제가 계속 생겼습니다. 한참 헤매다 혹시 몰라 jQuery 라이브러리를 추가하는 코드를 해당 코드보다 윗쪽으로 올리니 실행이 잘 되네요. 원래 자바스크립트 파일은 가장 아랫쪽의 </body> 바로 위에 넣는다고 들어서 아무런 의심을 안했는데 왜인지 모르겠지만 위로 올려야 실행이 됩니다. 그래서 jQuery의 js파일만 <head> 태그 안에 넣어뒀습니다. 언젠가 자바스크립트를 공부하게 되면 원인을 알아봐야겠네요.
어쨌든 아래와 같이 작성하면 잘 작동합니다. 부트스트랩의 모달(Modal)과 연동해도 되는데 간단한 경고창은 모달을 사용하기에는 코드가 너무 길어져서 그냥 기본 경고창을 사용하도록 했습니다. 필요하면 부트스트랩 홈페이지에서 Modal을 찾아 사용하면 될 것 같습니다.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
........
<c:when test="${vo == null}">
<script type="text/javascript">
$(document).ready(function() {
alert("존재하지 않는 게시물입니다.");
location.href = "/board/basicBoardList/${boardName}/1";
});
</script>
</c:when>'▸JSP & Servlet > 프론트엔드' 카테고리의 다른 글
| 게시물 삭제 시 확인창 띄우기 (부트스트랩 Modal(모달)) (3) | 2020.04.12 |
|---|---|
| ajax를 이용한 게시물 공감/비공감 기능 만들기 (Form 데이터 전송) (2) | 2020.04.12 |
| 부트스트랩으로 게시판 만들기_게시물 보기 화면 [3/3] (0) | 2020.03.02 |
| 부트스트랩으로 게시판 만들기_글쓰기 화면 [2/3] (0) | 2020.03.02 |
| 부트스트랩으로 게시판 만들기_리스트 화면 [1/3] (1) | 2020.03.02 |
댓글