게시판 만들어보기 15일차

오류 수정

이전에 발생한 댓글 삭제 부분에서 잘못된 id 값 설정으로 제대로 기능하지 않았다.
내가 클릭한 부분의 정확한 댓글의 id 값을 가져올수 있는 방법이 필요하다

댓글의 id값을 가져오기위해서 삭제버튼에 name 속성을 걸어주어서 해당 name이 클릭이 된다면 클릭된 개체의 부모를 가져오고 부모의 attr()함수를 사용해서 reply_id 속성 값을 가져오게 작성했다.

let replyHtml = "";
                for (let i = 0; i < replyList.length; i++) {
                    replyHtml += "<div reply_id='" + replyList[i].id + "'>";
                    replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
                    replyHtml += "<h4> 댓글 내용 : " + replyList[i].content + "</h4>";
                    replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
                    replyHtml += "<button style='float: right' class='btn btn-danger'  name='deleteReply'>삭제</button>";
                    replyHtml += "<button style='float: right' class='btn btn-warning' name='modifyReply'>수정</button>";
                    replyHtml += "</div>";
                }
                $("#locReplyList").html(replyHtml);

 $(document).on('click','[name=deleteReply]',function(){
                let data = {
                    boardId: $("#boardId").val(),
                    replyId: $(this).parent().attr("reply_id")
                };

                $.ajax({
                    url: "/reply/delete",
                    type: "POST",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    //dataType : "json", //디폴트 값으로 알아서 맞춰서 해준다
                    success: function (replyList) {
                        alert("댓글 삭제 완료");
                        takeReplyList(replyList);
                    },
                    error: function (req, status, error) {
                        alert("에러가 발생했습니다");
                        console.log(req);
                    },
                });
            })

consol.log 를 사용해서 찍어보니 replyId에 올바른 id 값이 들어간는 것을 확인했다.

$(document).on('click','[name=deleteReply]',function()를 쓴 이유

원래는 $([name=deleteReply]).on('click',function(){});
를 사용해서 작성하였지만 버튼을 클릭했을때에 아무런 이벤트도 발생하지 않아서 왜 아무런 이벤트도 발생하지 않는지 알아보았다.
출처
알아보니 $(document)를 사용하는 의미는 'html문서의 로딩이 다 끝나면' 을 의미한다.
문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다.

$([name=deleteReply]).on('click',function(){}); 를 사용하게된다면
컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 처리합니다.
만약 script문이 길다면 페이지 로드가 중단되는 시간이 길어지고, 사용자가 웹페이지를 기다리는 시간이 길어집니다. 이때 [name=deleteReply] 이부분을 제대로 인식하지 못하고 오류가 발생했던 것입니다.
이를 해결하기위해서 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하는 코드를 사용합니다.
그게 바로 $('document').ready(function){} 입니다.

수정하는데에 많은 시간일 걸렸지만 많은 것을 알게되었습니다!

 <div reply_id='" + replyList[i].id + "'>

내가 reply_id 처럼 속성값을 지정해줄 수 있고 attr()을 사용해서 가져올 수도 있다는 것

replyId: $(this).parent().attr("reply_id")

$(this) 가 무엇을 가르키는지와 parent() 함수의 사용법을 알게되었다.

$('document').ready(function){}

document 코드를 사용해야되는 때를 알게되었다.