Ajax 간단한 팬명록 (로컬에서는 되는데...)

웹개발 종합반 4주차 숙제

위와 같은 간단한 팬명록을 만드는 작업을 진행하였다.

곧 있을 항해 99 시험을 대비하고자 여러 기능들을 추가하는 작업을 진행하였는데 그중 댓글을 삭제하고 수정하는 기능을 추가해보고자 하였다.

 

기능 개발을 위한 작업

1. 삭제 같은 경우에는 삭제를 할 댓글의 이름값을 받아와서 서버에서 해당 값과 동일한 값의 댓글을 삭제하도록 진행하였다.

(삭제는 어렵지 않았다.)

 

2. 수정

수정같은 경우 수정 버튼을 클릭시 새로운 응원남기기 칸을 모달창을 띄우는 방식으로 진행하였다. 수정버튼을 클릭하면 그냥 진행 할 수 있게끔 하려 했는데 같은 팀원분께서 id에따른 수정을 진행하면 좋겠다는 좋은 아이디어를 주셔서 진행하게 되었다. 토큰을 통해서 진행을 하려했는데 너무 어려워서 그냥 댓글을 적을시 id값과 pw값이 같다면 진행 될 수 있도록 하였다.

function modify_display(comment, name,pw) {
            $("#replyModal").modal("show"); // 부트스트랩 모달(만들어진 모달 페이지 보여주기)

            $("#modalModBtn").click(function () {
                let modalName = $('#modalName').val() 
                let modalComment = $('#modalComment').val()
                let modalPw = $('#modalPw').val()
                $.ajax({
                    type: "POST",
                    url: "/homework/modify",
                    data: {name_give: name, comment_give: comment,pw_give: pw, modalName_give: modalName, modalComment_give: modalComment, modalPw_give: modalPw},
                    success: function (response) {
                        //console.log(response["msg"])
                        alert(response["msg"])
                    }
                });
                window.location.reload()
            })
        }

Today Issue : 로컬 환경에서는 되는데...

local에서는 잘 작동을 하던게 배포 환경에서는 alert 메세지가 정상적으로 출력되지 않는 상황이 발생했다.

console 창을 띄어서 정상적으로 메세지가 출력되는지 확인해 보았고, 서버측에서 print문을 통해 삭제버튼을 눌렀을시 메세지 출력이 되는지 확인해 보았으며, 마지막으로 error 반응도 확인해 보았으나 다 반응이 없었다.

그래서 삭제를 진행하였을 경우 ajax 경로가 잘못된줄 알고(삭제는 잘 진행되니 그럴 일 없지만) 확인을 여러번 하였으나 경로는 같았고, local환경에서는 콘솔도 print도 잘 출력이 되었다.

 

해결 : 확인해 보니 위 수정 코드에서 확인해 보는바와 같이 modify_display함수에서

window.location.reload()

가 ajax문 밖에 있었다. 내가 이해하는 선에서 알아보자면 ajax문 밖의 코드가 먼저 실행되고 그 후에 ajax문의 alert문이 실행되기 때문에 화면 새로고침이 먼저 실행되어 alert문이 뜨지 않았던 것 같다. 다만 저렇게 작성을 하여도 로컬환경에서는 정상적으로 alert문이 출력되는데 배포환경에서는 출력이 안된다. 로컬환경에서도 ajax 바깥의 코드가 먼저 실행되고 ajax문의 alert문이 실행되는건 같은데 왜 둘의 차이가 생기는 걸까. 나중에라도 알게되면 다시 작성을 해야겠다.