[TIL][23.10.27] 영화 리뷰 기능에서 더보기 기능에 대한 고민

요약

 영화 리뷰 기능에서 더보기 버튼을 넣는데, 구현에 대한 고민

---

 

고민한 내용

 

기존엔 리스트를 다 뿌린 다음, class를 줘서 숨겨놓은 다음 원하는만큼 보여주는 형식으로 작업을 많이 했었는데

데이터 자체가 무겁진 않지만 html 상 데이터를 미리 뿌려주는 작업 자체가 무겁게 만들 수가 있어서 더보기를 누를 떄마다 html을 뿌려주고 싶었다.

여기서 지금 작업 중에 문제되는 점은 영화 리뷰 기능에는 수정, 삭제 기능이 있기 때문에 수정이나 삭제할 시 리스트를 재리로드를 하게끔 작업이 되있었다. 안그러면 페이지를 새로고침해야만 확인할 수 있기 떄문에.

근데 그렇게 되면 더보기를 눌렀다가 수정했는데 리뷰 목록이 리로르되면서 다시 더보기 누르기 전 화면으로 돌아가게 되는 문제가 발생한다.

 

생각한 해결 방법

 

일단 먼저 리로드의 형태를 바꾸는게 제일 맞을거 같아서 코드 수정이 있었다

그래서 생각한 방법은 아래와 같다

 

1. 전체 리로드가 아닌 해당 내용만 업데이트

선택된 element를 찾아내서 업데이트된 내용만 덮어쓰고 해당부분만 업데이트하는 형식으로 가는게 맞을거 같다.

만약 삭제가 될 시엔 해당된 부분 찾아내서 그 부분만 splice 되는 형태로 작업했다. 

 

const max = 8; // 최대 8개
	
// 처음 리스트 데이터
for( let i = 0; i < max; i++) {
    if(comments[i] == undefined) return 
    let listItem = document.createElement('li');
    listItem.innerHTML = commentHtml(comments[i],i);
    commentList.appendChild(listItem);
}

// 마지막 리스트 도달시
let cnt = 1; // 버튼클릭수 
if(comments.length <= max) return;
moreBtn(comments.length,max).addEventListener('click',function(e){
    // 클릭수
    cnt++;

    // 다음 리스트 그리기
    for( let i = max * ( cnt - 1 ); i < max * cnt; i++ ){
        // 보여질 데이터 초과시 
        if(comments[i] == undefined) {
            e.target.remove();
            return;
        }
        let listItem = document.createElement('li');
        listItem.innerHTML = commentHtml(comments[i],i);
        commentList.appendChild(listItem);
    }
});

2. 최초 리스트를 뿌려줄 때 8개만 먼저 뿌리고 더 있을시 더보기로

최초 8개만 뿌리고 더 있을시 더보기 버튼을 표시하면서 누르면 +8개씩 보여주고, 다 보여줬을시 버튼을 제거했다.

더보기 버튼은 그대로두고 없을시 alert창으로 대체해도 될 듯하다.

---

회고

 

기존에 class로 숨겼던거에 비해서 생각할 사항들이 확실히 많았다. 좀 더 개발자 입장으로써 생각하다보니 역시 쉽지 않았지만 이번껀 데이터가 크지 않아서 필요하진 않은 작업이었지만 다음에 html로 실시간으로 뿌려주는 작업이 꼭 필요할 떄 활용하면 좋을거 같다.

그리고 리스트의 갯수 파악과 더보기를 눌렀을 때, 기존 보여준 갯수를 파악하면서 뿌려주는 계산이 쉽지 않았다. 화면상 작업이 아닌 코드적으로 좀 더 고민하면서 작업할 필요를 느꼈다.