javascript hacker new app 문자열을 활용한 html 다루기

 

 

 

 

 

 

현재 코드를 보면 구조가 명확하지 않아

구별하기 힘들다.

li 하위에 a 태그가 있구나라고 

코드를 살펴보면 진행 과정들을 읽어봐야 파악할 수 있다.

 

DOMAPI를 최대한 사용하지 않기

문자열만을 가지고 UI를 만드는 방식 활용

 

innerHTML 

문자열을 넣고 문자열 안에 html 태그가 있으면

domapi로 즉, html로 실제로 변환하는 것으로 자동으로 처리

 

chlidren(배열)이라는 속성을 이용

//xmlhtpp을 저장 할 저장소 생성
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'
const container = document.getElementById('root');



ajax.open('GET', NEWS_URL, false);
ajax.send(); // 데이터 가져오기



//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){    
    const id = location.hash.substr(1); //id 값 가져오기

    ajax.open('GET', CONTENT_URL.replace('@id', id), false); //replace 값을 대체해주는  함수
    ajax.send();

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

    title.innerHTML = newsContent.title;
    content.appendChild(title);
});

for(let i =0; i< 10; i++){  
    const div = document.createElement('div');
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');

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

    
    li.appendChild(div.firstElementChild); //첫번째 자식
}



//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
container.appendChild(ul);
container.appendChild(content);

 

반복되는 코드를 제거

코드를 묶는 단위로서의 구조물로 함수의 역활이 중요하다 

 

//xmlhtpp을 저장 할 저장소 생성
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'
const container = document.getElementById('root');


function getData(url){
    ajax.open('GET', url, false);
    ajax.send(); // 데이터 가져오기

    return JSON.parse(ajax.response);
}




//responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다.
// 객체로 변환 json형식만 변환 가능
const newsFeed = getData(NEWS_URL);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function(){    
    const id = location.hash.substr(1); //id 값 가져오기
    
    const newsContent = getData(CONTENT_URL.replace('@id', id));
    const title = this.document.createElement('h1');

    title.innerHTML = newsContent.title;
    content.appendChild(title);
});

for(let i =0; i< 10; i++){  
    const div = document.createElement('div');
    const li = document.createElement('li');
    //타이틀에 a태그 추가하기
    const a = document.createElement('a');

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

    
    ul.appendChild(div.firstElementChild); //첫번째 자식
}



//1.json은 실제 내가 보고싶은 페이지 데이터 주소도 바뀔 수도 있다. 따로 변수로 뺴야한다.
container.appendChild(ul);
container.appendChild(content);

 

중복된 데이터나 코드를 줄이는 행위를 리팩토링이라고 한다.