시간 순서대로 댓글을 정리하는 코드

게시판에서 사용자가 댓글을 달면 관리자가 답글을 다는 기능을 만들었다.

 

원래는 댓글, 답글 개념이 정확하게 있다. 댓글은 특정 글에 대해 작은 코멘트를 다는 것이고 답글은 또 다른 글을 적는 것이다. 그런데 내가 만든 것에서는 그렇게까지 안하고 사용자는 댓글, 관리자는 답글 개념으로 해서 쭉 소통할 수 있게 했다. 한마디로 다 댓글인 것이다. 

 

중요한건 댓글들을 달 때 시간 순서대로 표출해야 한다. 그래야 흐름을 볼 수 있으니깐. 

그런데 문제가 있었다. 테이블을 한개로 했으면 그냥 데이터 불러와서 시간순으로 표출하면 되는데 DB에는 댓글 테이블 따로 답글 테이블 따로 만들어져 있었다. 데이터도 있고 뒤집기가 어려워서 지금 상황에서 구축해야 했다.

 

요약하자면 이렇다. 일단 각각의 테이블에서 데이터를 불러온다. 답글 데이터 따로, 댓글 데이터 따로. 그러면 답글 데이터만 쭉 나열되고 댓글 데이터만 쭉 나열된다. 이걸 바꿔야 한다. 아래코드는 그것을 구현했다.

 

1. 표출된 엘리먼트들을 클래스로 선택하여 변수 unitArr에 담는다(클래스는 댓글이든 답글이든 동일하다).

2. 빈 배열 선언(makeArr).

3. unitArr을 맵을 돌리면서 각 요소의 id, date(작성날짜)를 객체에 담고 그 객체를 makeArr에 넣는다. 

중요한 점은 date를 substr로 일부 자르고 new Date()를 이용해 날짜 형식으로 바꾸는 것이다.

4. makeArr를 sort함수를 이용해 순서를 조정한다. 매우 편리했던 건 Date형식의 데이터가 마이너스(-)연산이 적용된다는 것이었다. 그래서 간단하게 오름차순으로 재배치할 수 있었다. 결과적으로 makeArr에는 작성 시간순으로 데이터가 담기게 된다.

5. unitArr을 forEach돌리면서 makeArr의 요소와 같은 요소에 custom attribute를 주었다(같은 요소를 판단하는 건 id로). data-no라는 이름으로 주었고 이제 엘리먼트에는 자신의 순번이 적히게 되었다.

6. 화면에 표현된 엘리먼트의 순서를 바꾸었다. 제이쿼리의 insertAfter라는 함수를 이용하여 k가 k-1 뒤에 오게 했다. 즉 2가 1뒤에 오고 5가 4뒤에 오게 하는 것이다. 

 

let unitArr = document.querySelectorAll(".ptTextUnit");
let makeArr = [];
unitArr.forEach((i)=>{
    let obj = {};
    obj["id"] = i.id;
    obj["date"] = new Date(i.innerText.substr(14,19));
    makeArr.push(obj);
})
makeArr.sort(function(a,b) {
    return a.date - b.date;
})
unitArr.forEach(i=>{
    for(j=0; j<makeArr.length; j++){
        if(i.id == makeArr[j].id){
            i.setAttribute('data-no',j);
        }
    }
});
for(k=0; k<unitArr.length; k++){
    $("[data-no="+k+"]").insertAfter("[data-no="+(k-1)+"]");
}

 

사실 전체적인 구조나 로직을 봤을때 좋은 예는 아니다(DB 구성부터). 하지만 지금 처해진 상황에서 어떻게든 기능을 만들어야 하는게 개발자의 입장이다(크게 바꾸지 않고 시간은 맞추면서). 성공적으로 코드가 실행되는 것을 보고 뿌듯했다.

그리고 이걸 짜면서 새롭게 배운것이 많아 그것도 수확이었다.