애니리스트 페이지 - 장르 필터링 추가하기

 

주어진 페이지를 다하고 이제 검색 쿼리문 작성하고 프론트 페이지만 만들면 끝~ 이러고 휴가를 하루 냈는데

..! 휴가낸날에 페이지의 구성이 바뀌어버렸다......

7월3일까지 다 해야하는데 힘내본다.

 

일단 장르별로 무엇을 카테고리를 가져오고 애니 목록의 장르id들과 결합하여 장르별로 애니메이션이 보여지도록했다.

장르 선택시 보여질 애니메이션 컨트롤
let selectedGenres = [];

function filterAnimations() {
    let animations = document.querySelectorAll('.ani-info-container');

    // If no genres are selected, show all animations
    if (selectedGenres.length === 0) {
        animations.forEach(function(animation) {
            animation.style.display = 'block';
        });
        return;
    }

    animations.forEach(function(animation) {
        let genreId1 = animation.querySelector('h4:nth-of-type(1)').textContent.trim();
        let genreId2 = animation.querySelector('h4:nth-of-type(2)').textContent.trim();

        let showAnimation = selectedGenres.includes(genreId1) || selectedGenres.includes(genreId2);

        if (showAnimation) {
            animation.style.display = 'block';
        } else {
            animation.style.display = 'none';
        }
    });
}

// 장르 체크박스 클릭 시 호출
document.addEventListener('DOMContentLoaded', function() {
    let genreCheckboxes = document.querySelectorAll('.genre-list');

    genreCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            let genreId = checkbox.id.replace('genre-', '');
            let index = selectedGenres.indexOf(genreId);

            if (checkbox.checked) {
                if (index === -1) {
                    selectedGenres.push(genreId);
                    // 여기에 페이지 네이션 함수를 넣어야한다.
                }
                console.log("선택된 장르 : " + selectedGenres);
            } else {
                if (index !== -1) {
                    selectedGenres.splice(index, 1);
                    console.log("선택 해제후 남은 장르 : " + selectedGenres);
                }
            }

            filterAnimations();
        });
    });
});

 

작업을 하다보니 페이지네이션이 이상하다는걸 깨달았다.

그냥 버튼을 누르면 요소가 바뀌게 설정했더니 8페이지에서 상세리스트로 들어가고 돌아나올때 다시 1페이지로가는 문제가 있었다.

그래서 임의로 url에 파라미터를 주어서 페이지네이션 처리함..ㅎ( 잔머리만 돌아가는 나..) 

/* @ 페이지 네이션 */
let currentPage = 1;
let totalAni;
let totalPages;

function updateURL(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    history.replaceState(null, '', url);
}

function renderPage(page) {
    const aniListContainer = document.getElementById('ani-list-container');
    const animations = aniListContainer.querySelectorAll('.ani-info-container');
    const buttonWrapper = document.getElementById('button-wrapper');

    currentPage = page;

    updateURL(page);

    buttonWrapper.innerHTML = '';

    for (let i = 1; i <= totalPages; i++) {
        const pageButton = document.createElement('li');
        pageButton.className = 'page-number page-btn';
        pageButton.innerText = i;
        pageButton.onclick = () => changePage(i);

        if (i === currentPage) {
            pageButton.style.backgroundColor = '#ff8b00';
            pageButton.style.color = 'white';
        }

        buttonWrapper.appendChild(pageButton);
    }

    animations.forEach(animation => {
        animation.style.display = 'none';
    });

    const start = (page - 1) * 12;
    const end = page * 12;
    for (let i = start; i < end && i < animations.length; i++) {
        animations[i].style.display = 'block';
    }
    window.scrollTo(0, 0);
}

function nextPage() {
    if (currentPage < totalPages) {
        renderPage(currentPage + 1);
    }
}

function prevPage() {
    if (currentPage > 1) {
        renderPage(currentPage - 1);
    }
}

function changePage(page) {
    renderPage(page);
}

document.addEventListener("DOMContentLoaded", function () {
    const aniListContainer = document.getElementById('ani-list-container');
    totalAni = aniListContainer.querySelectorAll('.ani-info-container').length;
    totalPages = Math.ceil(totalAni / 12);

    const urlParams = new URLSearchParams(window.location.search);
    const pageParam = parseInt(urlParams.get('page'), 10);

    if (!isNaN(pageParam) && pageParam > 0 && pageParam <= totalPages) {
        currentPage = pageParam;
    }

    renderPage(currentPage);
});

 

이제 페이지네이션과 장르별 필터링함수를 연결해야하는데  흠..

// 전체 페이지네이션과 장르별 페이지네이션
let selectedGenres = [];
let currentPage = 1;
const animationsPerPage = 12;
let totalPages = 0;

function updateURL(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    history.replaceState(null, '', url);
}

function filterAnimations() {
    let animations = document.querySelectorAll('.ani-info-container');
    let filteredAnimations = [];

    if (selectedGenres.length === 0) {
        filteredAnimations = Array.from(animations);
    } else {
        animations.forEach(function(animation) {
            let genreId1 = animation.querySelector('h4:nth-of-type(1)').textContent.trim();
            let genreId2 = animation.querySelector('h4:nth-of-type(2)').textContent.trim();

            let showAnimation = selectedGenres.includes(genreId1) || selectedGenres.includes(genreId2);
            if (showAnimation) {
                filteredAnimations.push(animation);
            }
        });
    }

    animations.forEach(animation => animation.style.display = 'none');

    let startIndex = (currentPage - 1) * animationsPerPage;
    let endIndex = startIndex + animationsPerPage;
    filteredAnimations.forEach((animation, index) => {
        if (index >= startIndex && index < endIndex) {
            animation.style.display = 'block';
        }
    });

    renderPagination(filteredAnimations.length);
    window.scrollTo(0, 0);
    updateURL(currentPage);
}

function renderPagination(totalAnimations) {
    let pageNumberBox = document.querySelector('.page-button-wrapper');
    pageNumberBox.innerHTML = '';

    totalPages = Math.ceil(totalAnimations / animationsPerPage);

    for (let i = 1; i <= totalPages; i++) {
        let pageButton = document.createElement('li');
        pageButton.textContent = i;
        pageButton.classList.add('page-number', 'page-btn');
        if (i === currentPage) {
            pageButton.style.backgroundColor = '#ff8b00';
            pageButton.style.color = 'white';
        }
        pageButton.addEventListener('click', function() {
            currentPage = i;
            filterAnimations();
        });
        pageNumberBox.appendChild(pageButton);
    }
}

function changePage(page) {
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        filterAnimations();
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        filterAnimations();
    }
}

function nextPage() {
    if (currentPage < totalPages) {
        currentPage++;
        filterAnimations();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    let genreCheckboxes = document.querySelectorAll('.genre-list');

    genreCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            let genreId = checkbox.id.replace('genre-', '');
            let index = selectedGenres.indexOf(genreId);

            if (checkbox.checked) {
                if (index === -1) {
                    selectedGenres.push(genreId);
                }
            } else {
                if (index !== -1) {
                    selectedGenres.splice(index, 1);
                }
            }

            currentPage = 1;
            filterAnimations();
        });
    });

    // 이전페이지 기억용
    const urlParams = new URLSearchParams(window.location.search);
    const pageParam = parseInt(urlParams.get('page'));
    if (!isNaN(pageParam) && pageParam > 0) {
        currentPage = pageParam;
    }

    filterAnimations();
});

 

두개의 함수를 합쳐야서 블로그에 글 써놓고 비교하면서 붙여넣고 안되는부분은 콘솔을 찍으며 수정하였다.

 

 

됐다!! 배열을 하나 더만들어서 하니까 편안~

장르 선택이 안되었을때에는 모든 애니메이션이 나오고 장르를 여러개 선택했을때 페이지네이션이 생성되지 않은 문제도 해결!

 

이제 장르테이블에서 체크박스말고 장르 리스트를 눌렀을때도 바뀌게 해야지~

// 체크박스 리스트 클릭시 체크박스 활성화
function checkGenre(element) {
    const genreCheckbox = element.querySelector('input[type="checkbox"]');
    genreCheckbox.checked = !genreCheckbox.checked;
}

// HTML
 <div class="genre-container">
            <h3 class="genre-title">장르</h3>
            <div class="genre-list-container">
              <div th:each="genre: ${genreLists}" class="genre-title-list" onclick="checkGenre(this)">
                <input  type="checkbox" id="genre" class="genre-list" th:id="'genre-' + ${genre.id}"/>
                <label for="genre" class="check-genre" th:text="${genre.name}">
                </label>
              </div>
            </div>
          </div>

 

 

아ㅋ..ㅋㅋㅋㅋㅋㅋ

바로 작동 안되버리는거

설마설마했는데..

또 코드명 하나씩 들여다 봐야해..

 

 

 

 

 

 

 

 

 

 

 

 

 

function checkGenre(element) {
    const genreCheckbox = element.querySelector('input[type="checkbox"]');
    genreCheckbox.checked = !genreCheckbox.checked;

    const genreId = genreCheckbox.id.replace('genre-', '');
    const index = selectedGenres.indexOf(genreId);

    if (genreCheckbox.checked) {
        if (index === -1) {
            selectedGenres.push(genreId);
        }
    } else {
        if (index !== -1) {
            selectedGenres.splice(index, 1);
        }
    }

    currentPage = 1;
    filterAnimations();
}

 

기존에 페이지네이션 하던 코드를 가져와서 적용하니 잘 작동한다.

 

잘 동작하기는 하는데 코드가 너무길다. 줄 일수 있을거같은데

---

근데 갑자기 체크박스 클릭시해도 체크가 안되네 ^^;

---

아..

function sortByAnimationId() {

    // const aniListContainer = document.getElementById('ani-list-container');

    let animationContainer = document.querySelectorAll("#data-animation-id+${animationId}")
    let animationId = animationContainer.replace('data-animation-id','');
    console.log(animationId)
    const aniListContainer = document.getElementById('ani-list-container');
    const arrayAnimations = Array.from(aniListContainer.getElementsByClassName('ani-info-container'));

    arrayAnimations.sort((a, b) => {

        let aAnimationId = parseInt(a.getAttribute('data-animation-id'), 10);
        let bAnimationId = parseInt(b.getAttribute('data-animation-id'), 10);

        return bAnimationId -aAnimationId;
    });


let aniArr = arrayAnimations.map(el => {
    console.log(el)
})


    aniListContainer.innerHTML = '';
    arrayAnimations.forEach(container => aniListContainer.appendChild(container));
}

// 리뷰순 정렬 함수
function sortByReviewCount() {

    const aniListContainer = document.getElementById('ani-list-container');
    const arrayAnimations = Array.from(aniListContainer.getElementsByClassName('ani-info-container'));

    arrayAnimations.sort((a, b) => {
        let aReviewCount = parseInt(a.getAttribute('data-review-count'), 10);
        let bReviewCount = parseInt(b.getAttribute('data-review-count'), 10);
        return bReviewCount - aReviewCount;
    });

    console.log(arrayAnimations.map(el => {
        console.log(el) //92개의 anumation이 다 들어옴
    }))

    aniListContainer.innerHTML = '';
    arrayAnimations.forEach(container => aniListContainer.appendChild(container));
}


let selectedGenres = [];
let currentPage = 1;
const animationsPerPage = 12;
let totalPages = 0;

function updateURL(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    history.replaceState(null, '', url);
}

function filterAnimations() {
    let animations = document.querySelectorAll('.ani-info-container');
    let filteredAnimations = [];

    if (selectedGenres.length === 0) {
        filteredAnimations = Array.from(animations);
    } else {
        animations.forEach(function(animation) {
            let genreId1 = animation.querySelector('h4:nth-of-type(1)').textContent.trim();
            let genreId2 = animation.querySelector('h4:nth-of-type(2)').textContent.trim();

            let showAnimation = selectedGenres.includes(genreId1) || selectedGenres.includes(genreId2);
            if (showAnimation) {
                filteredAnimations.push(animation);
            }
        });
    }

    // 장르에 일치하는 애니가 없을 경우 보여줄 요소
    let emptyContainer = document.getElementById('empty-container');
    let pageBtnBox = document.getElementById('page-btn-box');
    let orderContainer = document.querySelector('.order-container');

    if (filteredAnimations.length === 0) {
        emptyContainer.style.display = "block";
        pageBtnBox.style.display = "none";
        orderContainer.style.display = "none";
    } else {
        emptyContainer.style.display = "none";
        pageBtnBox.style.display = "flex";
        orderContainer.style.display = "flex";
    }

    animations.forEach(animation => animation.style.display = 'none');

    let startIndex = (currentPage - 1) * animationsPerPage;
    let endIndex = startIndex + animationsPerPage;
    filteredAnimations.forEach((animation, index) => {
        if (index >= startIndex && index < endIndex) {
            animation.style.display = 'block';
        }
    });

    renderPagination(filteredAnimations.length);
    window.scrollTo(0, 0);
    updateURL(currentPage);
}

function renderPagination(totalAnimations) {
    let pageNumberBox = document.querySelector('.page-button-wrapper');
    pageNumberBox.innerHTML = '';

    totalPages = Math.ceil(totalAnimations / animationsPerPage);

    for (let i = 1; i <= totalPages; i++) {
        let pageButton = document.createElement('li');
        pageButton.textContent = i;
        pageButton.classList.add('page-number', 'page-btn');
        if (i === currentPage) {
            pageButton.style.backgroundColor = '#ff8b00';
            pageButton.style.color = 'white';
        }
        pageButton.addEventListener('click', function() {
            currentPage = i;
            filterAnimations();
        });
        pageNumberBox.appendChild(pageButton);
    }
    updateNavigationButtons();
}

function changePage(page) {
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        filterAnimations();
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        filterAnimations();
    }
}

function nextPage() {
    if (currentPage < totalPages) {
        currentPage++;
        filterAnimations();
    }
}

// 페이지에 따라 버튼 disabled -> 이게 최선입니까 ????? 아니요
function updateNavigationButtons() {
    let firstPageBtn = document.getElementById('to-first');
    let prevPageBtn = document.getElementById('to-prev');
    let nextPageBtn = document.getElementById('to-next');
    let lastPageBtn = document.getElementById('to-end');

    if (currentPage === 1) {
        firstPageBtn.style.backgroundColor = 'lightgray';
        firstPageBtn.style.color = '#fff';
        prevPageBtn.style.backgroundColor = 'lightgray';
        prevPageBtn.style.color = '#fff';
        firstPageBtn.style.pointerEvents = 'none';
        prevPageBtn.style.pointerEvents = 'none';
    } else {
        firstPageBtn.style.backgroundColor = '';
        firstPageBtn.style.color = '';
        prevPageBtn.style.backgroundColor = '';
        prevPageBtn.style.color = '';

        firstPageBtn.style.pointerEvents = '';
        prevPageBtn.style.pointerEvents = '';
    }


    if (currentPage === totalPages) {
        nextPageBtn.style.backgroundColor = 'lightgray';
        nextPageBtn.style.color = '#fff';
        lastPageBtn.style.backgroundColor = 'lightgray';
        lastPageBtn.style.color = '#fff';
        nextPageBtn.style.pointerEvents = 'none';
        lastPageBtn.style.pointerEvents = 'none';
    } else {
        nextPageBtn.style.backgroundColor = '';
        nextPageBtn.style.color='';
        lastPageBtn.style.backgroundColor = '';
        lastPageBtn.style.color='';
        nextPageBtn.style.pointerEvents = '';
        lastPageBtn.style.pointerEvents = '';
    }
}



document.addEventListener('DOMContentLoaded', function() {
    let genreCheckboxes = document.querySelectorAll('.genre-list');

    genreCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            let genreId = checkbox.id.replace('genre-', '');
            let index = selectedGenres.indexOf(genreId);

            if (checkbox.checked) {
                if (index === -1) {
                    selectedGenres.push(genreId);
                }
            } else {
                if (index !== -1) {
                    selectedGenres.splice(index, 1);
                }
            }

            currentPage = 1;
            filterAnimations();
        });
    });

    // 이전페이지 기억용
    const urlParams = new URLSearchParams(window.location.search);
    const pageParam = parseInt(urlParams.get('page'));
    if (!isNaN(pageParam) && pageParam > 0) {
        currentPage = pageParam;
    }

    filterAnimations();

});

 

무식한 방법이지만 콘솔을 하나씩 찍어가면서 어떻게 랜더링되는지 어떤값을 어떻게 가져오는지를 하나씩 확인하며 수정했다.

document.addEventListener('DOMContentLoaded', function() {
    const orderRecentBtn = document.getElementById('ordered-recent');
    const orderLikeBtn = document.getElementById('ordered-review');

    orderRecentBtn.classList.add('active');

    function handleButtonClick(event) {
        if (event.target === orderRecentBtn) {
            orderRecentBtn.classList.add('active');
            orderLikeBtn.classList.remove('active');
        } else if (event.target === orderLikeBtn) {
            orderLikeBtn.classList.add('active');
            orderRecentBtn.classList.remove('active');
        }
    }

    orderRecentBtn.addEventListener('click', handleButtonClick);
    orderLikeBtn.addEventListener('click', handleButtonClick);
});



// 체크박스 리스트 클릭시 체크박스 활성화
function checkGenre(element) {
    console.log(element)
    const genreCheckbox = element.querySelector('input[type="checkbox"]');
    genreCheckbox.checked = !genreCheckbox.checked;

    const genreId = genreCheckbox.id.replace('genre-', '');
    const index = selectedGenres.indexOf(genreId);

    if (genreCheckbox.checked) {
        if (index === -1) {
            selectedGenres.push(genreId);
        }
    } else {
        if (index !== -1) {
            selectedGenres.splice(index, 1);
        }
    }

    currentPage = 1;
    filterAnimations();
}


// 전체 페이지네이션과 장르별 페이지네이션 + 최신순, 리뷰순 합침
let selectedGenres = [];
let currentPage = 1;
const animationsPerPage = 12;
let totalPages = 0;

function updateURL(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    history.replaceState(null, '', url);
}

function filterAnimations() {
    let animations = document.querySelectorAll('.ani-info-container');
    let filteredAnimations = [];

    if (selectedGenres.length === 0) {
        filteredAnimations = Array.from(animations);
    } else {
        animations.forEach(function(animation) {
            let genreId1 = animation.querySelector('h4:nth-of-type(1)').textContent.trim();
            let genreId2 = animation.querySelector('h4:nth-of-type(2)').textContent.trim();

            let showAnimation = selectedGenres.includes(genreId1) || selectedGenres.includes(genreId2);
            if (showAnimation) {
                filteredAnimations.push(animation);
            }
        });
    }

    let emptyContainer = document.getElementById('empty-container');
    let pageBtnBox = document.getElementById('page-btn-box');
    let orderContainer = document.querySelector('.order-container');

    if (filteredAnimations.length === 0) {
        emptyContainer.style.display = "block";
        pageBtnBox.style.display = "none";
        orderContainer.style.display = "none";
    } else {
        emptyContainer.style.display = "none";
        pageBtnBox.style.display = "flex";
        orderContainer.style.display = "flex";
    }

    animations.forEach(animation => animation.style.display = 'none');

    let startIndex = (currentPage - 1) * animationsPerPage;
    let endIndex = startIndex + animationsPerPage;
    filteredAnimations.forEach((animation, index) => {
        if (index >= startIndex && index < endIndex) {
            animation.style.display = 'block';
        }
    });

    renderPagination(filteredAnimations.length);
    window.scrollTo(0, 0);
    updateURL(currentPage);
}

function renderPagination(totalAnimations) {
    let pageNumberBox = document.querySelector('.page-button-wrapper');
    pageNumberBox.innerHTML = '';

    totalPages = Math.ceil(totalAnimations / animationsPerPage);

    for (let i = 1; i <= totalPages; i++) {
        let pageButton = document.createElement('li');
        pageButton.textContent = i;
        pageButton.classList.add('page-number', 'page-btn');
        if (i === currentPage) {
            pageButton.style.backgroundColor = '#ff8b00';
            pageButton.style.color = 'white';
        }
        pageButton.addEventListener('click', function() {
            currentPage = i;
            filterAnimations();
        });
        pageNumberBox.appendChild(pageButton);
    }
    updateNavigationButtons();
}

function changePage(page) {
    if (page >= 1 && page <= totalPages) {
        currentPage = page;
        filterAnimations();
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        filterAnimations();
    }
}

function nextPage() {
    if (currentPage < totalPages) {
        currentPage++;
        filterAnimations();
    }
}

function updateNavigationButtons() {
    let firstPageBtn = document.getElementById('to-first');
    let prevPageBtn = document.getElementById('to-prev');
    let nextPageBtn = document.getElementById('to-next');
    let lastPageBtn = document.getElementById('to-end');

    if (currentPage === 1) {
        firstPageBtn.style.backgroundColor = 'lightgray';
        firstPageBtn.style.color = '#fff';
        prevPageBtn.style.backgroundColor = 'lightgray';
        prevPageBtn.style.color = '#fff';
        firstPageBtn.style.pointerEvents = 'none';
        prevPageBtn.style.pointerEvents = 'none';
    } else {
        firstPageBtn.style.backgroundColor = '';
        firstPageBtn.style.color = '';
        prevPageBtn.style.backgroundColor = '';
        prevPageBtn.style.color = '';

        firstPageBtn.style.pointerEvents = '';
        prevPageBtn.style.pointerEvents = '';
    }

    if (currentPage === totalPages) {
        nextPageBtn.style.backgroundColor = 'lightgray';
        nextPageBtn.style.color = '#fff';
        lastPageBtn.style.backgroundColor = 'lightgray';
        lastPageBtn.style.color = '#fff';
        nextPageBtn.style.pointerEvents = 'none';
        lastPageBtn.style.pointerEvents = 'none';
    } else {
        nextPageBtn.style.backgroundColor = '';
        nextPageBtn.style.color = '';
        lastPageBtn.style.backgroundColor = '';
        lastPageBtn.style.color = '';
        nextPageBtn.style.pointerEvents = '';
        lastPageBtn.style.pointerEvents = '';
    }
}

function sortByAnimationId() {
    let animations = Array.from(document.querySelectorAll('.ani-info-container'));
    animations.sort((a, b) => {
        return parseInt(b.getAttribute('data-animation-id')) - parseInt(a.getAttribute('data-animation-id'));
    });
    updateAnimationOrder(animations);
}

function sortByReviewCount() {
    let animations = Array.from(document.querySelectorAll('.ani-info-container'));
    animations.sort((a, b) => {
        return parseInt(b.getAttribute('data-review-count')) - parseInt(a.getAttribute('data-review-count'));
    });
    updateAnimationOrder(animations);
}

function updateAnimationOrder(sortedAnimations) {
    let container = document.querySelector('.ani-list-container');
    container.innerHTML = '';
    sortedAnimations.forEach(animation => {
        container.appendChild(animation);
    });
    currentPage = 1;
    filterAnimations();
}

document.addEventListener('DOMContentLoaded', function() {
    let genreCheckboxes = document.querySelectorAll('.genre-list');

    genreCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            let genreId = checkbox.id.replace('genre-', '');
            let index = selectedGenres.indexOf(genreId);

            if (checkbox.checked) {
                if (index === -1) {
                    selectedGenres.push(genreId);
                }
            } else {
                if (index !== -1) {
                    selectedGenres.splice(index, 1);
                }
            }

            currentPage = 1;
            filterAnimations();
        });
    });

    const urlParams = new URLSearchParams(window.location.search);
    const pageParam = parseInt(urlParams.get('page'));
    if (!isNaN(pageParam) && pageParam > 0) {
        currentPage = pageParam;
    }

    filterAnimations();
});

 

 

이제 전체 애니메이션을 가지고 정렬이된다!!!!

필터링도 잘 되고 정말 다행이다..

 

---

📝  오늘의 생각

잘작동하는것을 확인하고 쉬고있는데 백엔드 코드 완전 비효율적으로 작성했다는 생각이들었다.

처음에는 통신비용을 생각해서 데이터를 일부분만 넘기는 방식을 생각했는데 

어느순간 최소한의 통신으로 구현해보겠어! 라는 생각으로 바뀌어있었다.

지금이야 데이터가 적으니까 전부 보내도 속도저하가 없었지만 실제 기업이였다면 비용이랑 속도가....ㄷㄷㄷ

 

찾아보니 타임리프로 페이지네이션을 처리하는 방법이 있었다.

이걸 왜 지금 찾아봤을까..

백에서 페이지네이션을 처리하고 프론트에서 그대로 가져와서 사용하면 편했을것을.

오늘도 하나 배워간다.