첫번째 프로젝트:hacker news(6) 페이징

페이징 처리를 위한 변수 생성

페이징 관련한 정보는 어디에 위치하느냐에 따라 변하는 값이 때문에 상수가 아닌 변수로 관리되어야 하기 때문에 currentPage라는 이름의 변수에 할당한다.

currentPage는 글 목록에서 다음페이지 혹은 이전페이지로 이동할 때 뿐만 아니라 글 상세페이지 내에서 목록으로 이동할 때도 사용되는데, 이처럼 다양한 함수에서 함께 사용되는 경우에는 특정 함수 안이 아니라 함수 바깥, 즉 전역으로 빼놓고 활용하게 된다. 

만약, 여러 함수 함께 사용되는 공유되는 자원 및 변수가 여러 개인 경우 아래와 같이 묶어서 관리를 해준다.

 

const store = {
    currentPage: 1
}

 

페이징 경로 구분 & 라우터 분기

페이징을 추가하기 이전의 코드를 살펴보면, hash 값을 통해 글 상세화면으로 이동하게 되는데

동일한 패턴으로 페이징을 추가할 경우 글 상세화면으로 이동하는 것과 페이지를 이동하는 것 사이의 경로차이가 없어 라우터 함수에서 구분이 불가능 하다. 

따라서 해당 경로를 차이점을 두어 구분하고, 해당 경로에 따라 라우터에서 제대로 분기처리를 해주는 것이 필요하다. 

 

// 목록으로 돌아가기 및 페이징 변경의 경우 /page/
<a href="#/page/${store.currentPage}">목록으로</a>

// 글 상세 이동 /show/
<a href="#/show/${newsFeed[i].id}">
	${newsFeed[i].title}(${newsFeed[i].comments_count})
</a>

// 라우터 분기처리
function router() {
    const routePath = location.hash; 
    
    if(routePath === ''){
        newsFeed(); 
    }else if(routePath.indexOf('#/page/')>= 0){ 		
        store.currentPage = Number(routePath.substr(7));
        newsFeed(); 
    }else {
        newsDetail();
    }
}

 

 페이징에 따른 목록 변경

기존 코드에서는 목록을 표시할때 무조건 처음 10개를 보여주도록 되어있는데, 이를 currentPage 값에 따라서 다음페이지, 혹은 이전페이지의 목록들을 보여주게끔 수정해야한다. 

가져온 데이터들을 뿌려주고 있는  for문을 아래와 같이 수정한다. 

currentPage는 1부터 시작되는 반면, api로 가져온 데이터는 배열이라 0이 가장 앞에 있는 데이터의 값이기 때문에  -1 을 따로 해주어야한다. 

for(let i = (store.currentPage -1) *10 ; i < store.currentPage * 10 ; i++) {
	newsList.push(`
		<li>
		    <a href="#/show/${newsFeed[i].id}">
    			${newsFeed[i].title}(${newsFeed[i].comments_count})
    		</a>
    	</li>
    `)
}

 

 

이전페이지 & 다음페이지 오류 수정 

currentPage는 초기에 1로 설정이 되어있고, 이전페이지 혹은 다음페이지로 변경하는 것은 기본적으로 currentPage에 값을 더하거나 빼는 것으로 동작한다. 따라서 이를 방치할 경우 0이나 데이터가 존재하지 않는 페이지로 이동하는 일이 생길 수 있는데, 이를 방어하는 코드를 작성해 주어야한다. 

아래 코드는  currentPage 값이 1일 때, 또 다음페이지가 존재하지 않을 때 그 값을 유지해주는 역할을 한다. 

const store = {
    currentPage: 1,
    endPage : Math.ceil(getData(NEWS_URL).length / 10)
}

--------------

<div>
  <a href="#/page/${store.currentPage >1? store.currentPage - 1 : 1}">이전페이지</a>
  <a href="#/page/${store.currentPage < store.endPage ? store.currentPage + 1 : store.currentPage}">다른페이지</a>
</div>