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

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

 

Hacker News 클라이언트 앱 소개 

애플리케이션을 먼저 만들어 보고 프로그램을 익혀보자.

애플리케이션을 만들기 위해서는 여러가지 지식과 기술들을 필요하기 때문에 여기에서는 몇가지 제한사항을 두고

제한범위내에서 애플리케이션을 만들고자 한다.

애플리케이션의 본질은 입력데이터를 출력데이터로 변환하는 것으로 볼 수 있다.

 

데이터: hackernews(https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md)

CSS : tailwindcss(https://tailwindcss.com/)

비동기 기술은 제외

 

12줄의 코드로 시작하기

12줄의 코드로 hackernews 데이터를 new XMLHttpRequest()(https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest)를 사용하여 가져와서 페이지에 표시할 수 있다.

const ajax = new XMLHttpRequest();

const NEWS_URL ='https://api.hnpwa.com/v0/news/1.json';

ajax.open('GET', NEWS_URL, false); //동기적으로 처리하겠다.
ajax.send();

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

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

  li.innerHTML = `<li>${newsFeed[i].title}</li>`;

  ul.appendChild(li);
}

document.getElementById('root').appendChild(ul);