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

상태를 가져보자. 읽은 글 표시하기

 

현재 해커뉴스 페이지에 열람한 글의 상태를 체크해주는 로직이 없기 때문에 해당 로직을 만들것이다.

 

1) 글의 고유 id를 통해 읽음 처리를 하는 데이터 구조를 만든다.

2) 네트워크를 통해 newsFeed를 가져온 데이터에 새로운 속성을 추가한다.

 

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';
const store = {
    currentPage: 1,
    feeds: [],
}

function getData(url){    
	...
}

function makeFeeds(feeds){
    for(let i=0; i<feeds.length; i++){
        feeds[i].read = false;
    }
    return feeds;
}

function newsFeed(){
    let newsFeed = store.feeds;
    const newsTotalPage = newsFeed.length / 10;
    const newsList = [];
    let template = `
    ...
    `;

    if(newsFeed.length === 0){
        newsFeed = store.feeds = makeFeeds(getData(NEWS_URL));
    }
    
    for(let i=(store.currentPage - 1) * 10; i<store.currentPage * 10; i++){
        newsList.push(`
            <div class="p-6 ${newsFeed[i].read ? 'bg-red-500' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
                <div class="flex">
                    <div class="flex-auto">
                        <a href="#/show/${newsFeed[i].id}">${newsFeed[i].title}</a>  
                    </div>
                    <div class="text-center text-sm">
                        <div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">${newsFeed[i].comments_count}</div>
                    </div>
                </div>
                <div class="flex mt-3">
                    <div class="grid grid-cols-3 text-sm text-gray-500">
                        <div><i class="fas fa-user mr-1"></i>${newsFeed[i].user}</div>
                        <div><i class="fas fa-heart mr-1"></i>${newsFeed[i].points}</div>
                        <div><i class="far fa-clock mr-1"></i>${newsFeed[i].time_ago}</div>
                    </div>  
                </div>
            </div>
        `);
    }

    template = template.replace('{{__news_feed__}}', newsList.join(''));
    template = template.replace('{{__prev_page__}}', `${store.currentPage > 1 ? store.currentPage - 1 : 1}" ${store.currentPage === 1 ? 'style="pointer-events: none;"' : " "}`);
    template = template.replace('{{__next_page__}}', `${store.currentPage + 1}" ${store.currentPage === newsTotalPage ? 'style="pointer-events: none;"' : " "}`);    

    container.innerHTML = template;
}

function newsDetail(){
    const id = location.hash.substring(7);
    const newsContent = getData(CONTENT_URL.replace('@id', id));
    let template = `
        ...
    `;

    for(let i=0; i<store.feeds.length; i++){
        if(store.feeds[i].id === parseInt(id)){
            store.feeds[i].read = true;
            break;
        }
    }

    function makeComment(comments, called = 0){
        const commentString = [];
                
        for(let i=0; i<comments.length; i++){
            commentString.push(`
                <div style="padding-left: ${called * 40}px;" class="mt-4">
                    <div class="text-gray-400">
                        <i class="fa fa-sort-up mr-2"></i>
                        <strong>${comments[i].user}</strong> ${comments[i].time_ago}
                    </div>
                    <p class="text-gray-700">${comments[i].content}</p>
                </div>
            `);

            if(comments[i].comments.length > 0){
                commentString.push(makeComment(comments[i].comments, called + 1)); // 재귀 호출
            }
        }

        return commentString.join('');
    }

    container.innerHTML = template.replace('{{__comments__}}', makeComment(newsContent.comments));
}

function router(){
	...
}

window.addEventListener('hashchange', router);

router();

 

먼저 기존 newsFeed는 getData()를 통해 newsFeed를 호출 할 때마다 ajax로 데이터를 불러 들였기 때문에 공공으로 사용하는 store객체에 feeds라는 배열을 추가하여 store의 안에 있는 feeds 배열로 사용한다. ajax로 불러온 데이터를 store에 저장했기 때문에 전역적으로 데이터를 관리할 수 있으며 데이터의 API 형태나 필요한 데이터 구조를 추가할 수 있다. 데이터 읽음 처리를 위해 makeFeed() 함수를 통해 read라는 boolean값 데이터를 추가하여 글을 조회하지 않았을 시엔 false, 조회 하였을 땐 true 값으로 구분한다.

 

 

https://bit.ly/37BpXiC

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

 

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

 

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