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

문자열을 활용한 HTML 다루기

 

UI의 복잡해짐에 따라 (디자인, 기능 등 추가) 마크업 구조가 더 복잡해지는데 현재 코드의 문제점 등을 개선한다.

 

DOM API의 문제점: HTML의 구조와 코드를 보고 서로의 구조를 명확히 알기 힘들다.

 

DOM API를 최대한 사용하지 말자.

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

ajax.open('GET', NEWS_URL, false); // method, Url, async
ajax.send();

const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){
    const id = location.hash.substring(1);
    
    ajax.open('GET', CONTENT_URL.replace('@id', id), false);
    ajax.send();

    const newsContent = JSON.parse(ajax.response);
    const title = document.createElement('h1');

    title.innerHTML = newsContent.title;

    content.appendChild(title);    
});

for(let i=0; i<newsFeed.length; i++){
    const div = document.createElement('div');    

    div.innerHTML = `
    <li>
        <a href="#${newsFeed[i].id}">
            ${newsFeed[i].title} (${newsFeed[i].comments_count})
        </a>
    </li>
    `;    
    
    ul.appendChild(div.firstElementChild);
}

container.appendChild(ul);
container.appendChild(content);

기존의 DOM API 구조를 innerHTML을 통한 문자열 형태로 바꿨다. 이렇게 코드를 변경함으로 HTML구조와 코드의 구조를 알아보기 쉬워지고 기능이 추가되거나 코드의 양이 많아진다 하더라도 복잡도가 늘어난 것이 아니기 때문에 수월하게 내용을 파악할 수 있다.

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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