[javascript] Vanilla JS를 이용한 리스트 more처리

요즘 React, Vue, Angular 등 프레임워크/라이브러리를 이용한 SPA(Single Page Application)를 제작을 많이 하게 되는데 리스트를 페이징 보다는 more버튼으로 처리하고 있다. 대다수의 사용자들이 더보기 버튼을 더 선호하기 때문이라는 결과도 있고 페이징보다는 더보기 버튼이 리스트가 더 빠르다고 느끼기도 하는 거 같다.

앞으로도 많이 사용할거 같고, 공부하는 겸 가볍게 만들어본다.

 

[참고] brunch.co.kr/@blackindigo-red/13

무한 스크롤 vs 페이지네이션 vs '더보기' 버튼

 

1. 리스트 조건

실무를 할때엔 개발 document API 받아서 진행하므로 스터디 할땐,  DB 연결이나, 로컬스토어가 아닌 ajax를 사용하여 JSON파일의 데이터를 리스트로 구현해 보자.

 

[preview img]

[ 조건 ]

- 1025px 이상은 리스트 열 안에 4개씩, 8개씩 보이게

- 769px 까지는 리스트 열 안에 3개씩

- 500px 모바일에서는 열 1개씩

- 데이터 JSON으로 넘기기[mokup data]

- 썸네일 이미지는 크기 상관없이 중간에 위치

- 이메일은 한 줄 말줄임 처리

 

JSON 데이터는 아래 사이트에서 더미 데이터로 만들면 된다.
[mokup data] www.mockaroo.com/

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

 

 

2. 코딩

이번 리스트는 javascript를 연습하는 게 목적이고, 나중에 실무를 할 때 많은 데이터들을 동적으로 그려지는 게 유지보수, 운영이나 구축하는 데 있어 핵심이다고 생각하여 HTML 태그를 js에서 그려오는 형태로 제작하기로 했다.

 

<HMTL5>

<div class="wrap">
	<ul class="listWrap"></ul>
</div>

 

<JS>

"use strict";

const dataURL = './data/MOCK_DATA.json';
const _WRAP = document.querySelector('.wrap');
const _UL = document.querySelector('.listWrap');

const list = {
    init:function(){
    	// ajax로 데이터 불러오기
        list.ajax();
    },
    listView:function(data){
    	// Column안에 들어갈 리스트 그리기
        let _LI = document.createElement('li');
        _LI.className = 'list';
        _LI.innerHTML = `<div class="list-thum">
                            <img src="${data.img}" alt="img-${data.id}">
                         </div>
                         <div class="list-user">
                            <span>${data.username}</span>
                            <span>${data.date}</span>
                         </div>
                         <div class="list-email">${data.email}</div>`;
        return _LI;
    },
    more:function(length,max){
        //more button
        let _BTN = document.createElement('button');
        _BTN.className = 'btn-more';
        _BTN.innerText = 'more';
        return length > max && _WRAP.appendChild( _BTN ); 
    },
    ajax:function(){
        $.ajax ({
            type : 'get',
            url: dataURL,
            datatype : 'json',
            success : function(data){    
                const max = 8; // 최대 8개
                let start = 0; // 리스트데이터 시작번호
				
                // 처음 리스트 데이터
                for(let i=start;i<max;i++){
                    _UL.appendChild( list.listView( data[i] ) );
                }
				
                // 마지막 리스트 도달시
                const _P = document.createElement('p');
                      _P.innerText='...List END'; 
                
                let cnt = 1; // 버튼클릭수 
                list.more(data.length,max).addEventListener('click',function(e){
                    // 클릭수
                    cnt++;
                    
                    /***** 
                    * 보여질 데이터 초과시 
                    */
                    // 더보기버튼으로 불러올 리스트 개수
                    // data.length(총 데이터 개수) / max(최대 8개)
                    if( data.length / max < cnt ){
                        const target = e.target;
                        target.after(_P);
                        return false
                    };
					
                    // 다음 리스트 그리기
                    for(let i=max*(cnt-1);i<max*cnt;i++){
                        _UL.appendChild( list.listView( data[i] ) );
                    }
                });
            },
            error : function(err){
                 console.log('err : ',err)
            }
        })
    },
}

//리스트 그려지도록 선언
list.init();

 

 

 

3. 최종 화면단

이미지스러운 걸 넣으려고 인터넷에 떠돌아다니는 https://api.tvmaze.com/search/shows?q=batman 를참고했는데,

데이터 길이가 10개라서 1줄에 4개씩 처리하게 됐다.

 

코드는 위에 작성한 대로 사용했고, 다른  json 데이터를 가져와도 쉽게 고칠 수 있었다. 

다만 뭔가 좀 더 보기 쉽거나 간결하게 작성하는 방법은... object 보다는 함수로 작성하여 불러오는 게 낫나 싶기도 하다.

 

PC버전은 코드펜으로 넘어가서 확인하자 ㅎ.ㅎ