21. 04. 12.

17.4 JavaScript 준비

• JavaScript의 모듈화

관련 있는 함수들을 하나의 모듈처럼 묶음으로 구성하는 것.
JavaScript의 클로저를 이용하는 것이 가장 대표적인 방법.

클로저: 함수를 리턴. 리턴된 함수를 통해 재호출. 파라미터과 리턴을 함수로 보냄. 클로저의 예술은 익명함수를 리턴하는 데에서 온다.

 

src/main/webapp/resources/js/reply.js

 

get.jsp에 <script src="/resources/js/reply.js"></script> 넣어주기.

 

❓ var replyService = (function() {})();
익명함수를 호출한 replyService의 타입은 ?
함수를 호출한 결과인 리턴 타입이 아무 것도 없기 때문에 언디파인드!!!

• reply.js 등록 처리

var replyService = (function() {
    return {
        add: function(reply, callback) {

        }
    };
})();

 

🔶 replyService의 데이터 타입은 오브젝트 타입이고, replyService.add의 데이터 타입은 function 타입이다.

 

reply.js

var replyService = (function() {
    return {
        add: function(reply, callback, error) {
            console.log("reply.add().........");

            $.ajax({
                type : "post",
                url : "/replies/new",
                data : JSON.stringify(reply),
                contentType : "application/json; charset=utf-8",
                success : function(result, status, xhr) {
                    if(callback) {
                        callback(result);
                    }
                },
                error : function(xhr, status, er) {
                    if(error) {
                        error(er);
                    }
                }
            });
        }
    };
})();

 

🔶 reply.js 내에 add 함수는 Ajax를 이용해 POST 방식으로 호출하는 코드 작성.
🔶 add()에서 데이터 전송 타입 방식과 파라미터로 callback과 error를 함수로 받는다는 것.
🔶 Ajax 호출에 성공하고, callback 값으로 적절한 함수가 존재하면 해당 함수를 호출해서 결과를 반영하는 식이다.

 

get.jsp에서 replyService.add() 호출

var bno = <c:out value="${board.bno}"/>;
replyService.add({bno:bno, reply:"JS테스트 글", replyer:"테스트맨"}, function(result) {
    alert(result);
});

 

🔶 파라미터로 reply(객체 타입), callback(함수 타입)을 갖는다.
🔶 모든 EL에는 <c:out> 처리를 해 줘야 함.

 

 

• 댓글의 목록 처리

reply.js 일부

getList: function(param, callback, error) {
    var bno = param.bno;
    var page = param.page || 1;
    var url = "/replies/pages/" + page + "/" + bno;

    $.getJSON(url, function(result) {
        if(callback) {
            callback(result);
        }
    }).fail(function(xhr, status, er) {
        if(error) {
            error(er);
        }
    });
}

🔶 page 변수는 param.page가 있으면 그 값을 쓰고 없으면 1을 기본 페이지로 하겠다는 뜻.

 

get.jsp 일부

replyService.getList({bno:bno, page:1}, function(list) {
    console.log(list);
    for(var i in list) {
        console.log(list[i]);
    }
})

 

 

• 댓글 삭제와 갱신

reply.js 일부

remove: function(rno, callback, error) {
    var url = "/replies/" + rno
    $.ajax({
        type: "delete",
        url: url,
        success: function(result) {
            if(callback) {
                callback(result);
            }
        },
        error : function(xhr, status, er) {
            if(error) {
                error(er);
            }
        }
    })
},

 

 

get.jsp 일부

replyService.remove(121, function(result) {
    alert(result);
}, function(err) {
    alert("삭제 실패")
});

 

 

• 댓글 수정

reply.js 일부

update: function(reply, callback, error) {
    var url = "/replies/" + reply.rno
    $.ajax({
        type : "put",
        url : url,
        data : JSON.stringify(reply),
        contentType : "application/json; charset=utf-8",
        success : function(result, status, xhr) {
            if(callback) {
                callback(result);
            }
        },
        error : function(xhr, status, er) {
            if(error) {
                error(er);
            }
        }
    });
}

🔶 주의할 부분: rno는 파라미터가 없으니 reply.rno로 하고 타입은 put, data에 reply(댓글 내용).

 

get.jsp 일부

replyService.update({rno:64, reply:"ajax로 수정 댓"}, function(result) {
    alert(result);
});

 

• 댓글 조회

reply.js 일부

get: function(rno, callback, error) {
    var url = "/replies/" + rno
    $.getJSON(url, function(result) {
        if(callback) {
            callback(result);
        }
    }).fail(function(xhr, status, er) {
        if(error) {
            error(er);
        }
    });
}

 

 

get.jsp 일부

replyService.get(64, function(result) {
    console.log(result);
});

 

🔶 딱 하나 조회할 땐 굳이 파라미터에 객체 타입으로 안 써도 됨. 대신 alert대신 콘솔 로그로 찍기.

---

 

17.5 이벤트 처리와 HTML 처리

 

get.jsp 일부

<script>
    var bno = <c:out value="${board.bno}"/>;
    var replyUL = $(".chat");

    showList(1);

    function showList(page) {
        replyService.getList({bno:bno, page:1}, function(list) {
            console.log(list);
            var str = "";
            replyUL.html("");
            for(var i in list) {
                str += '<li class="list-group-item" data-rno="' + list[i].rno + '">';
                str += '    <div class="header">';
                str += '           <strong>' + list[i].replyer + '</strong>';
                str += '          <small class="float-right">' + replyService.displayTime(list[i].replyDate) + '</small>';
                str += '    </div>';
                str += '    <p class="mt-2">' + list[i].reply + '</p>';
                str += '</li>';
            }
            replyUL.html(str);

        })
    }
</script>

🔶 댓글 개수가 있는 게시물이면 그만큼 <li>가 생기는 것을 확인할 수 있다.

 

• 댓글 목록에서 시간에 대한 처리

moment js 라이브러리 사용.
cdn 주소를 header.jsp에 붙인 후 사용한다.

reply.js 일부

displayTime: function(timeValue) {
    //var today = moment(new Date());
    //var dateObj = moment(timeValue);

    //return today.diff(dateObj, 'days') < 1 ? dateObj.format("hh:mm:ss") : dateObj.format("yy/MM/DD")
    return moment(timeValue).fromNow();
}

🔶 주석대로 하면 댓글 작성한 지 하루가 지나지 않으면 시간으로, 지났으면 날짜로 보이도록.
🔶 fromNow는 유튜브 댓글처럼 ㅇ분 전, ㅇ초 전, ㅇ일 전 이런 식으로!

 

• 새로운 댓글 처리

모달 방식으로 댓글을 등록(수정, 삭제)할 것.

$(function() {
    $("#addReplyBtn").click(function() {
    $("#myModal").find("input").val("");
    $("#replyDate").closest("div").hide();
    $(".ac").hide().eq(2).show();
    $("#myModal").modal("show");
})

    $("#modalRegBtn").click(function() {
        var reply = {bno:bno, reply:$("#reply").val(), replyer:$("#replyer").val()};
        replyService.add(reply, function(result) {
            alert(result);
            $("#myModal").modal("hide");

            showList();
        });
    });
})