라우터 ? 화면 처리기 만들기

1. 구조 구축

배열을 사용해서 DOM API 제거

빈 배열을 만듬 => 배열에 추가하는 형태의 for문 => 배열을 합쳐서 innerHTML에 적용

• .push() : 배열 추가
• .join() : 배열을 합쳐줌, 괄호 안에는 구분자 사용(구분자가 필요 없을 경우 '')

const newsList = [];

newsList.push('<ul>');

for (let i = 0; i < 10; i++) {
    newsList.push(`
        <li>
            <a href = "#${newsFead[i].id}">
            ${newsFead[i].title} (${newsFead[i].comments_count})
            </a>
        </li>
    `);
}

newsList.push('</ul>');

container.innerHTML = newsList.join('');

함수 분리

적었던 코드들을 호출하기 쉽게 함수로 묶어서 분리

function newsFeed () {
    const newsList = [];
    const newsFead = getData(NEWS_URL);

    newsList.push('<ul>');

    for (let i = 0; i < 10; i++) {
        newsList.push(`
            <li>
                <a href = "#${newsFead[i].id}">
                ${newsFead[i].title} (${newsFead[i].comments_count})
                </a>
            </li>
    `);
    newsList.push('</ul>');

    container.innerHTML = newsList.join(''); // 합쳐주는 함수
    }
};

function newsDetail () {
    const id = location.hash.substr(1);

    const newsContent = getData(CONTENTS_URL.replace('@id', id));
    const title = document.createElement('h1');

    container.innerHTML = `
        <h1>${newsContent.title}</h1>
        
        <div>
            <a href='#'>'목록으로'</a>
        </div>
    `;
};

라우터 작성

라우터

: 화면을 중계하는 중계기, 화면을 전환시켜 줌

• 해시에 아무런 id가 없을 경우와 id가 있는 경우로 나누어 if 사용
• 라우터를 부르는 함수로 만들고 호출

function router () {
    const routePath = location.hash; 

    if (routePath === '') { // 해시에 아무런 id가 없는 경우
        newsFeed();
    } else {
        newsDetail();
    }
};

window.addEventListener('hashchange', router);

router();