API란?

application programming interface 약자이다.

서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해줘야 한다.

쉽게생각하면

서버에 요청을 보내는데 GET요청을 보내면

서버에서 데이터를 내려준다

이런 일련의 과정이 api라고 할수있다.

그중에 openAPI는 공공의 목적으로 오픈 말그대로 열어준것이고

모두가 쓸수있게 열어준것이다.

그렇게 데이터를 누적시키는 사이트들도 생기고

여러방면에서 openAPI는 좋을수있다.

Fetch 를 사용했다.

솔찍히 갑툭튀한 fetch.. js 내장 기능이다.

하지만 promise 개념을 필요로하는데

갑자기 튀어나와서 진짜 깜짝놀랬다.

jquery를 사용해서 할수도 있겟지만

약간 레거시한 스택이긴하다.

ajax가 발달하고 우리는 홈페이지가 비동기적으로 동작하는방식으로

웹페이지가 발전해왔다.

그러다보면 ajax요청이 계속 쌓이고 쌓이고 계속 중첩해서 사용하다보면

콜백에 콜백에 콜백에 콜백...

즉 콜백지옥을 맛보게 된다.

그래서 그것을 해결하려고 promise개념이 나온다.

일종의 약속

그리고 then으로 받아서 사용할수있다.

하지만 이렇게 해도

결국 then 지옥이 열린다. (지옥까지는아니지만, 가독성이 떨어지게된다. then이많아지면..)

그래서 async await이 나오게된것이고

배우게되면 가독성좋고 , 그때부터 비동기를 동기로, 즉 데이터 받아올때마다

동기로 처리하는게 옛날엔 독이였다면 (데이터요청하고 클릭도안먹고 하얀화면..)

비동기가 그것을 살렷겟다. 하지만 여전히 개발자들은 불편..

그래서 일부만 개발자가 필요에의해서 동기로 돌려서 사용할수있게만드는것이다.

지금 프로미스, 어싱크,어웨잇에 대해서 다룰수는 없지만.

fetch문법에 대해서 약간 알아가는게 좋다.

get기능

fetch('http://서버주소/weather?q=Seoul')
.then(function(resp) {
  // 응답 형식에 따라 resp.text() 가 될 수도 있다
  return resp.json();
})
.then(function(json) {
  console.log(json); // { tempature: 27 }
});

post기능

let newPost = {
  "userId": 1,
  "title": "새 글을 써봤습니다",
  "body": "안녕하세요?"
}

fetch('http://서버주소/posts', {
  method: 'POST',
  body: JSON.stringify(newPost)
}).then(function(resp) {
  return resp.json();
}).then(function(json) {
  console.log(json); // { id: 123 }
});