[ Javascript ] 2중 Submit 방지 & CRUD작업 후 뒤로가기 방지

흔한 CMS 프로그램에서 글을 업로드 한 뒤에, 뒤로가기 버튼을 누르게되면 제출한 Form 데이터가 그대로 남아있게 됩니다. 

 

백엔드 설계에 따라 다르겠지만, 게시글을 클릭하여 상세보기에서 삭제버튼을 눌러 삭제하는 경우에도, 삭제 후 뒤로가기 버튼을 누르게되면 삭제된 게시글의 내용이 그대로 보이게 됩니다. 

 

이러한, 동작을 방지하기 위해서는 많은 방법들이 존재합니다. 

JS를 통해 방지하는 법, Ajax 통신, GET 방식 등등 

 

2중 Submit을 방지하기 위한 방법

const createForm = document.getElementById("createForm");
let checkSubmit = false;

saveBtn.addEventListener("click", e => {

    e.preventDefault();
    if (doubleSubmitFlag) {

        alert("submit....");
        checkSubmit = false;
    } else {

        checkSubmit = true;
        createForm.submit();
        question.value = "";
        main_cat.options[0].selected = true;
        tinyMCE.activeEditor.setContent('');
    }

});

흔히 사용하는 Form태그가 있고, 제출 버튼을 눌렀을 경우에 제출하는 코드입니다. 

거기에 JS를 통해서 submit을 제출하도록 했고, 그전에 if문을 이용해 체크하는 코드를 추가한 것 뿐입니다. 

 

처음 checkSubmit 변수에 false로 초기화를 했기 때문에, 처음 submit 버튼을 누르게 되면, if 문 false이기 때문에 else문이 동작하게 됩니다. 

 

else문을 자세히 보게되면, checkSubmit은 true로 변경

form의 데이터 submit 실행 

각종 input 타입의 데이터를 초기화 -> 뒤로가기 버튼을 눌러서 돌아왔을 경우 데이터가 유지되지 않도록 초기화

 

그러면, Submit이 정상적으로 실행되어 백엔드에서 작업이 이루어지게 됩니다. 

그런데, 아직 화면 이동이 되지않은 상태에서 다시한 번 submit을 누르게되면 처음 눌렀을 때 checkSubmit의 값이 true로 변경되었기 때문에 if문에서 현재 submit중이라는 alert 알람창이 보여지게 됩니다. 

 

하지만, 실제로 동작을 해보면 워낙 빠르게 동작하기 때문에 alert를 보는 것이 힘들 수 있습니다.

제대로 동작하는지 확인해보고 싶은 경우에는 submit()하는 부분에 setTimeout 함수를 이용해 딜레이를 주고 submit 버튼을 또 한 번 눌러보게 되면, alert를 확인할 수 있습니다. 

 

삭제후, 뒤로가기 방지

JS로 뒤로가기를 방지하는 방법도 여러가지가 존재합니다. 뒤로가기 버튼 자체를 막는 방법, 히스토리를 컨트롤하는 법

이번에는 replace()를 이용해서 간단하게 방지하는 방법입니다. 

 

sendHttpRequest('POST', URL, data)
.then(res => {

    alert('삭제했습니다.');
    location.replace(URL);
}).catch(reason => {

    alert(reason);
});

위의 코드는 실제 사용했던 코드인데, 삭제 버튼이 눌렸을 경우에 위의 코드가 실행되도록 되어있습니다. 

xhr통신을 통해 게시글의 id값을 서버로 보내서 삭제하는 코드인데 

 

삭제에 성공했을 경우에 알림창을 통해서 삭제되었다는 메세지와 replace()를 통해서 페이지 이동을 합니다. 

 

JS에서 페이지를 이동하는 방법중에서 location.href 와 location.replace()가 있는데, 겉모습의 차이는 href는 속성값이고  replace()는 메소드입니다. 

 

동작의 차이로서는 href는 말그대로 페이지 이동하는 방법이라면 replace는 이름에서 알 수 있듯이 페이지를 갈아치우게 됩니다. 

A페이지 -> B페이지 -> C페이지로 이동하는 경우 

B페이지에서 C페이지로 이동하는 경우 href를 사용한 경우, C페이지에서 뒤로가기 버튼을 누르게되면 B페이지로 이동합니다. 

하지만, replace()를 이동해서 변경한 경우에 뒤로가기 버튼을 누르게되면 A페이지로 이동하게 됩니다. 

 

replace는 중간 B페이지의 history를 C페이지로 변경해, 실제로는 A페이지->B페이지->C페이지를 거쳐 이동했지만, 브라우저에 히스토리에는 A페이지 -> C페이지가 된 것 입니다. 

 

따라서, 삭제된 후에 다시 뒤로가기 버튼을 눌러도 해당 게시물로는 이동하지 않게됩니다.