2020년 04월 15일, 선거 투표를 하기 전 블로그 포스팅을 하고 있었습니다.
"이클립스에서 Port 오류로 인해 톰캣 서버 실행이 안되는 경우" 라는 글을 적고 있었는데, 글을 다 적고 작성 버튼을 눌렀는데...

이미지를 보시면 아시겠지만 목록 버튼이 왼쪽, 작성 버튼이 오른쪽에 있는데, 자연스럽게 마우스를 왼쪽 버튼으로 이동한 뒤 클릭을 해버렸습니다...

아침부터 열심히 적고 있던 글이 전부 사라지더라구요... 아...
그래서 오늘은 목록 버튼을 눌렀을 때와 같이 페이지를 벗어나는 경우 팝업을 통해 한번 더 확인을 할 수 있도록 수정하였습니다.

이 팝업만 떠줬더라면, 헛고생을 하는 일은 없었을텐데...
코드 자체는 크게 어렵지 않습니다.

 

<script>
    $(window).on("beforeunload", function() {
        return "작성중인 글이 존재합니다. 페이지를 나가시겠습니까?";
    });

    $("#admin_post_write_form").on("submit", function() {
        $(window).off("beforeunload");
    });
</script> 

beforeunload 이벤트는 페이지를 벗어나기 전 확인 메시지를 출력하는 이벤트입니다.
크롬의 경우 "변경사항이 저장되지 않을 수 있습니다."라는 메시지가 고정으로 뜨지만, 익스플로러에서 확인 시 입력한 메시지가 출력되는 것을 확인할 수 있습니다.

#admin_post_write_form는 글쓰기 화면의 폼이 가지고 있는 ID입니다.
아래는 Post Write 화면을 이루는 코드입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="${contextPath}/js/plugin/ckeditor/ckeditor.js"></script>
<section id="admin_post_write" class="post admin">
    <h3 class="section_subject">Post Write</h3>
    
    <form id="admin_post_write_form" action="${contextPath}/admin/post/${formAction}" method="post">
        <c:if test="${post != null}">
            <input type="hidden" name="postNo" value="${post.postNo}">
        </c:if>
        
        <div class="kre_writing">
            <div>
                <select class="kre_inp" name="categoryId">
                    <option value="">Uncategorized</option>
                    
                    <c:forEach var="category" items="${categories}">
                        <option value="${category.categoryId}" ${post.categoryId eq category.categoryId ? "selected" : ""}>${category.categoryName}</option>v
                    </c:forEach>
                </select>
            </div>
            
            <div>
                <input type="text" id="postSubject" class="kre_inp" name="postSubject" value="${post.postSubject}" placeholder="제목">
            </div>
            
            <div>
                <textarea name="postContent" id="postContent" placeholder="내용" rows="10" cols="80">${post.postContent}</textarea>
                <script>
                    $(function() {
                        CKEDITOR.replace("postContent", {
                            filebrowserUploadUrl: '${contextPath}/admin/file/upload/post',
                            uploadUrl: '${contextPath}/admin/file/upload/post?responseType=json',
                            contentsCss: "${contextPath}/css/plugin/ckeditor.css",
                            height: '500px',
                        });

                        CKEDITOR.instances["postContent"].on('fileUploadResponse', function( evt ) {
                            // Prevent the default response handler.
                            evt.stop();

                            // Get XHR and response.
                            var data = evt.data,
                                xhr = data.fileLoader.xhr,
                                response = xhr.responseText.split( '|' );

                            var responseData = JSON.parse(response[0]);

                            if(responseData.uploaded !== 1) {
                                // An error occurred during upload.
                                data.message = response[ 1 ];
                                evt.cancel();
                            } else {
                                data.url = responseData.url;

                                $("#admin_post_write_form").prepend($("<input>", {
                                    "type": "hidden",
                                    "name": "fileNos",
                                    "value": responseData.fileNo
                                }));
                            }
                        });
                    });
                </script>
            </div>
            
            <div>
                <label><input type="checkbox" name="postView" value="TRUE" ${post.postView=="TRUE"?"checked":""}> 공개</label>
            </div>
            
            <div>
                <label><input type="checkbox" name="postPublish" value="TRUE" ${post.postPublish=="TRUE"?"checked":""}> 예약발행</label>
            </div>
            
            <div>
                <label>예약일시 <input type="text" class="kre_inp" name="postReservationTime" value="<fmt:formatDate value="${post.postReservationTime}" pattern="yyyy-MM-dd HH:mm:ss" />"></label>
            </div>
        </div>
      
        <div class="kre_btn_list">
            <ul class="kre_btn_list_left">
                <li><a href="${contextPath}/admin/post/list" class="kre_btn">목록</a></li>
                <li><button id="post_submit" type="submit" class="kre_btn">${formSubmit}</button></li>
            </ul>
        </div>
    </form>
</section>
<script>
    $(window).on("beforeunload", function() {
        return "작성중인 글이 존재합니다. 페이지를 나가시겠습니까?";
    });

    $("#admin_post_write_form").on("submit", function() {
        $(window).off("beforeunload");
    });
</script>

#admin_post_write_form이 submit 되는 경우 beforeunload 이벤트를 제거하기 때문에 작성 버튼을 누르는 경우에는 확인 메시지가 나타나지 않게 됩니다.

이 몇 줄로 몇 시간을 아낄 수 있으니 혹시 글쓰는 기능을 개발하시는 분은 반드시 추가해주시기 바랍니다.
저와 같은 일이 벌어지지 않기를 바랍니다.