지금까지 코딩한 내역은 JS를 간단하게 태그들을 집어넣는 방식으로 진행했다.
허나 이런 방식의 코딩은 더 진행될수록 복잡해지면서 어려워지기 때문에 더 간단해져야 할 필요가 있다.
코드만 봤을때 HTML의 구조를 전혀 알 수 없기 때문에,
마크업은 태그들의 위치가 정확하게 보이지만 코드는 태그들의 위치들과 구성요소가 눈에 보이지 않기 때문이다.
짧은 코드도 이렇게 한눈에 구분하기 어려운데 더 나중을 가면 더 어려워질 것이기 때문에 개선 요소를 찾아야한다.
DOM API를 코드에서 제거한다.
그러면 어떻게 UI를 구성할 수 있을까?
바로 문자열만을 사용해서 UI를 구성하는것이다.
그런데 여기서 페이지에 문제가 있다.
바로 ul은 한쌍이고, li가 반복되어야하니 코드 구조상 중간 단계가 필요한것이다.
이걸 해결하기 위해서 배열을 만들어서 만들고자하는 요소를 배열에 넣고 마지막에 합치는 방식을 사용한다.
const newsList = [];
newsList.push('<ul>');
for(let i = 0; i < 10; i++) {
newsList.push(`
<li>
<a href="#${newsFeed[i].id}">
${newsFeed[i].title} (${newsFeed[i].comments_count})
</a>
</li>
`);
}
newsList.push('</ul>');
container.innerHTML = newsList.join();보면서 느낀점이, DOM API가 보기 불편하다고 생각했고 구성이 별로였는데 이 부분을 깔끔하게 변경한게 배울점이였다.
- 화면 전환
목록 화면으로 돌아가고싶은데 지금은 돌아갈 수 없다.
우리는 이런 페이지 전환을 라우터라고 한다.
코드의 구조를 기반으로 페이지가 구성되어야하는데, 함수로 묶여있지 않은 경우에는 정확하게 지시할 수 없게 되므로 다시 재활용해서 호출할 수 없게 되기 때문에 함수로 묶어줘야한다.
function newsFeed() { ~~~~위 내용 ~~~~ }이럴경우, 익명함수도 고려해야하는데 이건 보통 밖으로 빼낸 후 이름을 지어준다.
window.addEventListener('hashchange', ~~~~); -> function Name(){ ~~~~~ }이런식으로 빼낸 후 작성해서 보여주면 돼는데 이것을 지시하는것이 바로 라우터다.
라우터는 화면이 전환해야 할때, 해당 상황에 맞는 페이지를 보여주는 것인데 이것을 지금 우리는 해시값이 바뀌면서 화면의 전환을 위한 트리거로 사용하고있었기 때문에 이걸 해시와 라우터를 연결해서 진행한다.
또한, 라우터의 역할은 해시값을 가져와서 판단하는 역할도 있다.
그리고 라우터는 페이지의 데이터값에는 관심이 없기 때문에 해시값만 가지고있으면 다른 데이터는 필요가 없다.
그러면 라우터는 해시값만을 가지고 그 값을 기반으로 페이지를 판단해주면 됀다.
function router(){
const routePath = location.hash;
if(routePath === ''){
newsFeed(); // 메인 페이지
}else{
newsList(); // 상세 페이지
}
}
window.addEventListener('hashchange', router);