AJAX

AJAX((Asynchronous Javascript And XML)란 js에서 사용할수있는 라이브러리로,웹페이지에서 서버와 비동기적으로 데이터를 교환해 웹 페이지의 일부분만 업데이트 하는 기술이다 . 이를 통해 전체 페이지를 다시 불러오지 않고도 페이지의 특정부분만 변경할수 있다.

나같은 경우는 댓글을 달수있는 게시글 페이지에서 사용자가 댓글 입력시 웹페이지 전체를 불러오는게 아닌 댓글관련 데이터만 서버로부터 받을수 있도록 구현했다.

function handleSubmit(e) {
    e.preventDefault();

    let queryString = $("#reply-form").serialize();

    $.ajax({
        type: 'post',
        url: actionUrl,
        data: queryString,
        dataType: "json",
        error: function () {
            console.log('failure');
        },
        success: function (data, status) {
            const template = replyTemplate.formatUnicorn({
                nickName: data.nickName,
                date: data.date,
                content: data.content,
                articleIdx: data.articleIdx,
                replyIdx: data.replyIdx,
            });
            $("#comment-box").append(template);
            $("textarea[name=content]").val("");
        },
    });
}

이런식으로 ajax를 jquery를 사용하여 구현을 했다. 이때 서버로부터 받은 json데이터를 html에 포멧팅 하기위해 format 메서드를 사용했다.

String.prototype.formatUnicorn = function (replacements) {
    return this.replace(/\{\{(\w+)\}\}/g, function (_, key) {
      //replacements 객체에서 'key'로 찾은 값을 반환한다. 이때 해당값이 없다면 ''(빈문자열)을 반환한다.
        return replacements[key] || '';
    });
};

이런식으로 서버로부터온 json형태의 데이터를 사용하여 동적으로 html을 만들수 있다.

고민한점

$(".reply-delete").on("submit", handleDelete);

처음엔 위처럼 작성을했다. 이렇게하면 id가 reply-delete 의 submit발생시 handleDelete 메서드를 실행시키는데 이렇게 하다보니 새로생긴 댓글에 대해서는 이벤트가 발생하지 않는 문제가 발생했다.

따라서 이벤트 위임을 사용했다.

$("#comment-box").on("submit", ".reply-delete", handleDelete);

.reply-delete의 부모인 comment-box에 handleDelete 이벤트를 바인딩하고

comment-box의 자식중 class가 reply-delete인 자식이 handleDelete함수를 호출하도록 했다.