본문으로 바로가기

티스토리의 댓글 및 방명록을 디자인할때 겪을 수 있는 유의사항을 살펴봅니다.

댓글 및 방명록 스크립트

티스토리에서 댓글과 방명록 폼에 입력된 내용을 처리하는 스크립트는 아래와 같다.

function addComment(caller, entryId) {
    var oForm = findFormObject(caller);
    if (!oForm)
    return false;
    var request = new HTTPRequest("POST", oForm.action);
    request.onSuccess = function () {
        if(entryId == 0)
            window.location = blogURL + "/guestbook";
        else {
            document.getElementById("entry" + entryId + "Comment").innerHTML = this.getText("/response/commentBlock");
            if(document.getElementById("recentComments"))
                document.getElementById("recentComments").innerHTML = this.getText("/response/recentCommentBlock");
            if(document.getElementById("commentCount" + entryId))
                document.getElementById("commentCount" + entryId).innerHTML = this.getText("/response/commentView");
            if(document.getElementById("commentCountOnRecentEntries" + entryId))
                document.getElementById("commentCountOnRecentEntries" + entryId).innerHTML = "(" + this.getText("/response/commentCount") + ")";
        }
        if(typeof window.needCommentCaptcha !== "undefined"){
            captchaPlugin.init('complete');
        }
    }
    request.onError = function() {
        var description = this.getText("/response/description");
        if (description) { alert(description); }
    }
    var queryString = "key=tistory";
    var captchaInput = document.getElementById('inputCaptcha');
    if (oForm["name"])
        queryString += "&name=" + encodeURIComponent(oForm["name"].value);
    if (oForm["password"])
        queryString += "&password=" + encodeURIComponent(oForm["password"].value);
    if (oForm["homepage"])
        queryString += "&homepage=" + encodeURIComponent(oForm["homepage"].value);
    if (oForm["secret"] && oForm["secret"].checked)
        queryString += "&secret=1";
    if (oForm["comment"])
        queryString += "&comment=" + encodeURIComponent(oForm["comment"].value);
    if (captchaInput) {
        if (!captchaInput.value) {
            alert('그림문자가 입력되지 않았습니다.');
            return false;
        }
        queryString += "&captcha=" + encodeURIComponent(captchaInput.value);
    }
    request.send(queryString);
}
.....

폼에 입력된 내용을 전송하고 내용을 갱신시키기 위해 페이지를 새로고침시키는 일반적인 방식과는 달리 서버측과 통신하기 위해 AJAX를 사용하고 페이지 전체를 새로고침하지 않고 입력된 댓글들을 갱신시키고 있다.

AJAX 요청으로 응답받는 내용은 아래 그림과 같이 XML문서이고 이 곳에 정의된 <commentBlock> 은 스킨제작시 삽입되는 댓글영역 치환자 <s_rp> 가 정의하고 있는 영역이다.

댓글 및 방명록 이벤트연결

다시말하자면 댓글을 입력하고 전송버튼을 누르면 위의 스크립트들이 실행되고 AJAX로 응답받은 내용들로 댓글 및 방명록 영역이 교체된다. 일반적인 디자인을 염두에 두고 있다면 문제발생 소지가 적지만 스크립트를 이용해 이벤트를 연결하고 어떤 행동을 부여하는 등의 디자인을 구상하고 있다면 이는 원하는데로 작동하지 않아 당황스러울지도 모른다. 어떠한 추가적인 에러메세지도 노출되지 않을테니.....

사실 동적으로 생성된 구조에는 동적인 이벤트연결을 부여해야한다. jQuery를 사용하고 있다면 .on() 의 사용에 익숙할 것이다.

on( events [, selector] [, data], handler(eventObject))
  • events : 공백으로 구분된 하나 이상의 이벤트 형식으로 click, keydown, focus 등이 있다.
  • selector : 이벤트가 발생할 자식요소들을 찾을 선택자로 일반적인 경우에 이를 생략하여 선택된 요소에만 이벤트를 적용하지만 동적 이벤트연결엔 필요하다.
  • data : 이벤트가 발생할 때 핸들러에 전달할 데이터
  • handler(eventObject) : 이벤트가 발생하면 실행될 함수

일반적인 경우라면 전자와 같이 이벤트를 연결하겠지만 동적인 연결은 후자와 같다.

$('.focus-target').on('focus', function(){
    $(this).closest('.focus-wrap').addClass('focus');
});

$(document).on('focus', '.focus-target', function(){
    $(this).closest('.focus-wrap').addClass('focus');
});
스킨을 제작하면서 댓글폼을 전송시 동적으로 생성되는 구조를 모르고 있다가 당황스러웠다. 그런분들이 또 있을까 싶어 기록을 남겼다.


신고

댓글을 달아 주세요

  1. BlogIcon 미스손 2016.04.13 23:51 신고

    어떤 블로그(http://gokal1222.tistory.com/) 가니 방명록이며 댓글에 다 "그림문자가 입력되지 않았습니다" 라며... 등록을 거부하드라구요. 위에 설명해주신 것 처럼 ajax를 쓰기 때문일까요?

    • BlogIcon 흉내쟁이 2016.04.13 23:57 신고

      음... 저도 그랬지만 스킨제작자가 자동입력방지와 관련된 플러그인의 사용을 고려하지 않았을 수도 있습니다.

      그런이유로 자동입력방지 문자가 보여야 할 부분이 정상적으로 보이지 않기에 등록을 할 수 없는 부분일 수 있습니다.

  2. Lutherlig 2017.07.07 13:57 신고

    We sell the sale of iPhones 7 directly from Apple warehouses unofficially for 30% of the market value. Always available and in large quantities:
    1. New Apple iPhone 7 Plus 256 GB (Jet Black) (FACTORY UNLOCKED) International Version no warrants - $ 303
    2. New Apple iPhone 7 Plus 256GB Factory Unlocked CDMA / GSM Smartphone - Black (Certified Refurbished) - $ 307
    3. New Apple iPhone 7 PLUS (5.5-inch) A1661 128GB Unlocked Smartphone for GSM + CDMA Carriers - Rose Gold - $ 303
    We work all over the world and only on an advance payment, we accept only bitcoin. Attention!!! We do not work with Russia and the CIS countries. When ordering from 10 pcs. The price is 20% of the market value. We have a priority in wholesale customers. If you do not trust us, or you do not like something, you pass by, we will not respond to stupid reports. To receive the details for payment, please write to the e-mail: apple@apple-cheap-iphone.xyz

티스토리 툴바