Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 7일차

#패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #7일차

 

문자열을 활용한 HTML 다루기

UI를 만들기 위해 DOM객체를 사용하였다.목록을 위해 <ul>를 만들어서 글 전체를 감싸고 각각의 글은 <li>안에 그리고 링크를 위해 <a>를 만들었다.이처럼 DOM api를 이용해서 UI(HTML)를 만들면 이해하기 불편하다. 게다가 디자인적인 스타일을 위해 혹은 기능이 추가되거나 확장 되면 사용방법이 복잡해지고 이해하기 어렵다.

그래서 이를 해결하기 위해 문자열로 태그를 작성해서 사용하는 것으로 개선해보자.

아래는 문자열을 활용하여 기존의 DOM Element를 수정한 것이다.

for (let i = 0; i < 10; i++) {
  // const li = document.createElement('li');
  // const a = document.createElement('a');
  const div = document.createElement('div');

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

  // li.appendChild(a);
  // ul.appendChild(li);
  ul.appendChild(div.firstElementChild);
}

다음으로 반복적으로 사용하고 있는 ajax사용을 함수로 만들어 개선해 보자.

function getData (url) {
  ajax.open('GET', url, false);
  ajax.send();

  return JSON.parse(ajax.response);
}

위에서 만든 getData 함수를 사용해서 newsFeed와 newsContent를 가져오는 부분을 수정해보자.

/* newsFeed를 수정 **/
// ajax.open('GET', NEWS_URL, false);
// ajax.send();

// const newsFeed = JSON.parse(ajax.response);
const newsFeed = getData(NEWS_URL);

/** haschange 이벤트 내부의 newsContent 수정 **/
window.addEventListener('hashchange', function () {
  // ajax.open('GET', CONTENT_URL.replace('@id', id), false);
  // ajax.send();

  // const newsContent = JSON.parse(ajax.response);
  const newsContent = getData(CONTENT_URL.replace('@id', id));
  
  //...
 }

 

이번시간에 작성한 전체 소스이다.

const container = document.getElementById('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';

function getData (url) {
  ajax.open('GET', url, false);
  ajax.send();

  return JSON.parse(ajax.response);
}


const newsFeed = getData(NEWS_URL);
const ul = document.createElement('ul');

window.addEventListener('hashchange', function () {
  const id = location.hash.substr(1);

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

  title.innerHTML = `${ newsContent.title }`;

  content.appendChild(title);
});

for (let i = 0; i < 10; 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);

 

7일차 ch03_04. 문자열을 활용한 HTML 다루기