[JavaScript] 목록 채우기 - 퍼블리싱이 적용된 템플릿을 복사하여 채우기

- 만들고 싶은 기능 -

게시판에서 게시글 목록을 채우는 기능이다.
페이지를 열면 일단 게시글 목록을 띄운다.
이때 게시글 목록은 비어 있다.
페이지가 모두 완료되면 서버로부터 게시글 목록을 받아온다.
목록을 리스트로 받아와서 반복문을 돈다.
리스트 안에 있는 각 요소들마다 게시글 목록을 하나씩 추가한다.
각 게시글 제목 앞에는 미리보기 이미지도 있다.

 

 

- 구현한 방법 -

이런 경우에 나는 아래처럼 템플릿 패턴(내가 멋대로 지은 이름)을 자주 쓴다.
보통 디자인이나 CSS가 이미 적용돼 있는 경우가 많다.
그러니까 퍼블리싱이 완료된 화면이다.
따라서 구조는 그대로 두고 내용만 채워야 한다.
먼저 퍼블리싱이 적용된 단위 요소 하나를 템플릿으로 먼저 둔다.

나중에 이 템플릿을 복사해서 요소를 새로 만들고 내용만 채워서 요소를 끼워넣는다.
이때 템플릿 요소는 style="display:none;" 으로 지정한다.
나중에 복사해서 쓸 때는 style 속성 자체를 삭제해준다.

 

<ul role="group" class="card-lists" aria-labelledby="card-label" id="cardListContainer">
    <li role="checkbox" class="card-item" aria=checked="false" style="display:none;" id="template">
        <img src="/assets/img/dummy.png" alt="로고" />
        <span>테스트 아이템</span>
    </li>
</ul>



<script>
    function loadListItem(data) {
        const template = document.querySelector("li#template");
        const cardList = data;
        const cardContainer = document.querySelector("ul#cardListContainer");
        cardList.forEach((ele, idx, arr)=>{
            const tempLi = template.cloneNode(true);
            const cardType = ele.itemType;
            const cardName = ele.itemName;
            tempLi.querySelector("span").innerText = `${cardType}(${cardName})`;
            tempLi.querySelector("img").src = "/assets/img/dummy.png";
            tempLi.removeAttribute("style");
            cardContainer.appendChild(tempLi);
        });
    }

</script>

 

> 참고로 ele.cloneNode() 를 사용할 때는 안에 파라미터를 넣어줄 수 있다.
파라미터는 true/false 를 넣어줄 수 있는데
true 를 넣으면 하위 요소들까지 함께 복사하는 기능이고
false 를 넣으면 하위 요소를 제외하고 해당 요소만 복사한다.

 

- 장점 -

이렇게 하면 장점이 몇 가지 있다.
가장 좋은 점은 수정보완이 편하다는 점이다.
보통은 제이쿼리를 통해서 텍스트로 요소를 추가한다.

const newItem = $("<p style='display:none;'>"+ data.mytext + "</p>");

이런 식으로 하면 데이터가 모두 문자열이기 때문에 오타가 나면 잡아주지 않는다.
또 퍼블리싱이 수정되거나 하면 어디 부분을 고쳐야 하는지 바로 보이지 않는다.
반면에 템플릿 요소를 html 로 하나 두면 태그나 속성 등을 모두 html 언어로 인식하고 잡아준다.
퍼블리싱에서 수정된 부분이 있으면 script 가 아니라 html 을 수정하면 된다.
수정 사항이 생겼을 때 script 를 수정하지 않으므로 안정성이 높고 수정보완이 편하다.

 

-241213