패스트캠퍼스 챌린지 10일차

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

 

기존의 웹이라면 현재 화면, 즉 현재 화면을 다른 화면으로 전환시 현재의 화면은 이전 화면이 되고 다른 화면이 현재의 화면이 된다. 하지만 지금 구현한 상태는 목록 화면과 내용 화면이 두개 다 보이는 형태이다.

 

라우터: 중계기, 상황에 따라 맞게 화면을 보여주는 역할을 한다.

 

const container = document.querySelector('#root');
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json';

function getData(url){
    
    ajax.open('GET', url, false); // method, Url, async
    ajax.send();

    return JSON.parse(ajax.response);
}

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

    newsList.push('<ul>');
    
    for(let i=0; i<newsFeed.length; 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('');
}

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

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

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

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

    if(routePath === ''){
        newsFeed();        
    }else{
        newsDetail();
    }
}

window.addEventListener('hashchange', router);

router();

기존의 코드에서 DOM API 방식을 전부 문자열 HTML 형식으로 수정했고 반복되고 재사용되는 코드들을 함수화했다. 기존에 목록 화면과 내용 화면이 공존하거나 내용 화면이 계속 추가되는 상태였는데, 함수화 작업을 통해 목록 화면 부분과 내용 화면 부분을 나눴고 router라는 함수를 통해 hashchange 이벤트 처리 시 목록 화면을 내보낼지 내용 화면을 내보낼지 중계 해주는 작업을 추가했다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential