페이징의 역할
현재 페이지가 몇번째 페이지인지 알아야한다.
페이지의 역할은 무엇일까?
계속해서 변화하면서 변화값을 기억하고 작동해야한다.
다만 여기서 페이지값을 지역변수로 선언해버리면 다른 상세 페이지에 들어갔다가 나올때 페이지를 기억할 수 없는 문제가 생긴다.
그러므로 페이지값은 페이지 안에서만 제한적으로 사용될 수 있는 값이 아니라는 것이다.
그런데 이것을 전역변수로 하나만 선언하면 전역변수로 사용될 자원이 늘어나거나 유동적으로 사용할 수 없으므로 공유되는 자원들을 하나로 묶어놓으면 보기 더 편한 뜻이 있어서, 공유되는 자원이라는 뜻의 Store를 선언한다.
const store = {
currentPage: 1;
};다만 여기서 문제가 있다.
라우터의 관점에서 currentPage로 해시값을 사용해 이동하다보면 라우터의 입장에서 이건 글 내용을 보는 해시값인지, 글 페이징을 하는 해시인지 구분을 해줘야 한다.
그래서 구분하는 구조를 추가한다.
if (routePath === '') {
newsFeed();
} else if(routePath.indexOf('#/page/') >= 0){
store.currentPage = 2;//테스트용 임시 값
newsFeed();
}else{
newsDetail();
}이러면 정상적인 페이징이 이루어진다.
그러면 이제 불러오는 데이터도 변경이 필요하다.
for(let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {};이제 위에서 제대로 연결되지 않아(미싱 링크) 임시로 넣었던 테스트용 임시 값을 제대로 연결해줘야한다.
store.currentPage = routePath.substring(7);다만 여기서 문제가 생긴다.
substring은 string 형을 반환하기 때문에 =(대입 연산자) 때문에 뒤에 달라붙어 버리는 문제가 발생한다.
그래서 강제로 숫자형임을 지정해줘야한다.
store.currentPage = routePath.substring(7);이제 비어있는 결함점을 수정할 것이다.
- 페이지를 이동해서 목록으로 갔다가 글을 누르면 에러가 난다.
아이디를 추출하는 부분이 1로 되어있다.
이부분을 /page/가 추가되어있으므로 수치를 수정해줘야한다.
- 리스트 페이지로 페이지 상태를 기억하며 돌아가지 못한다.
또한 이렇게되면 귀환할때도 페이지를 그대로 전달해야한다.
그래서 a링크에 추가해야한다.
<a href="#/page/${store.currentPage}">목록으로</a>3.존재하지 않는 페이지에 접근할려고 할때 막는 방어코드가 없다
이전 페이지로 갈때, 1보다 크면 -1을 해야하는 식으로 동작을 제한해줘야 한다.
이전 페이지는 없는 페이지로 접근하는걸 막는게 쉬운데, 다음 페이지는 좀 어렵다.
