3-2 프로젝트 시작

XMLHttpRequest를 사용할건데, 우리는 이것을 알 수 없다.
이런것들을 사용하기 위해서는 먼저 그걸 그대로 검색해야하는데, 검색하면 도큐먼트가 나온다.
거기서 OPEN을 찾아서 내용을 기입한다.

오픈은

메소드 : string / url : string / async : boolean / username? : string...

형태로 되어있어서 이것을 채워넣을것이다.

const ajax = new XMLHttpRequest();
ajax.open('GET','https://api.hnpwa.com/v0/news/1.json',false);
ajax.send();
console.log(ajax.response);

데이터가 콘솔에 정상적으로 출력된다.

거기서 네트워크로 들어간 뒤, preview를 확인할 수 있는데, 제대로 object타입으로 보기 좋게 나온다.
자바스크립트에서도 그렇게 다루기 쉽도록 바꿔볼건데, 객체형태로 바꿔볼것이다.

const newsFeed = JSON.parse(ajax.response);

JSON.parse는 json 형태로 온 데이터들을 JS에서 객체 형태로 바꿔준다.

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 = newsFeed[i].title;

  ul.appendChild(li);
}

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