첫번째 프로젝트:hacker news(5) 라우터

이전 코드에서 한 화면에 모든 것이 함께 표시되는 이유는 root라는 id를 가지고 있는 컨테이너에  appendChild를 통해서 기존의 코드를 유지한 채로 새로운 것을 추가 하고 있기 때문이다. 따라서 한 화면에서 하나의 페이지만 보여주기 위해서는 다른 로직이 필요하다.

appendChild로 데이터를 넣어주는 코드를 사용하지 않고, root 안에 존재하던 하위의 코드를 다 없애버리기 위해서  root 자체에 innerHTML을 이용한다. 

 

const container = document.getElementById('root');

// 기존 코드 
container.appendChild('<h1>TITLE</h1>')

// 변경 코드 
container.innerHTML(`<h1>TITLE</h1>`)

 

목록의 경우 for문을 사용하여 구현하고 있는데, 기존의 코드는 DOM Api를 사용해서 만들었기 때문에 따로 문제가 될 여지가 없었다. 

하지만 이를 문자열 형식으로 변경해서 html 구조처럼 보기 쉽게 만드려고 하면 반복문만으로 쉽게 처리가 어렵고 중간단계가 많이 필요하게 된다. 

 

이럴 경우에는 배열을 이용해서 해결이 가능하다. 

 

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('');

 

먼저 빈 배열을 만들고, push 함수를 사용하여 ul을 배열에 넣은 후에 타이틀을 포함한 li 문자열을 반복문을 통해 배열에 추가하고, 반복문이 끝난 후 마지막으로 닫는 ul 태그를 넣는다. 

그리고 나서 배열을 하나로 합쳐주면 되는데, 이 때 사용하는 함수가  join()이다. 

join은 인자를 따로 넣지 않으면 배열안에 요소들을 합칠 때 구분자로 쉼표를 사용하게 되는데, 우리는 통합된 하나의 문자열을 얻는 것이 목적이기 때문에 따로 구분자를 사용하지 않기 위해 빈 문자열을 인자로 넣어줘야한다. 

 

라우터 

라우터는 화면 전환을 해주는 역할을 한다. 

작성한 코드에서 router의 역할은 hash가 변경될 때 마다 호출되어, 변경된  hash 내용에 따라 다른 화면을 제공하는 것이다. 

 

function router() {
    const routePath = location.hash; 
    
    if(routePath === ''){
        newsFeed(); 
    }else {
        newsDetail(); 
    }
}

window.addEventListener('hashchange', router);

router();