fetch, weather API 활용

• 객체 및 배열을 JavaScript로 다루기
• UI를 와이어프레임으로 그린 후, HTML & CSS로 디자인하기
• 특정 도시와 현재 시점에 대한 날씨 데이터 다루기
• 객체로 주어지는 날씨 데이터 값을 특정 element에 DOM을 활용하여 동적으로 렌더링 하기

OPEN API를 사용해서 날씨 데이터 얻어오기

자원(resource)을 제공하는 주체를 서버(server)라고 부른다.
그럼, 자원을 요청하는 사람, 또는 프로그램은 클라이언트(client)라고 말한다.

client는 웹 브라우저가 될수도 있고, 개발자가 만드는 프로그램이 될 수도 있다.

API(Application Programming Interface)란 서버를 클라이언트에게 리소스를 잘 활용할 수 있도록 Interface를 제공해주는 것을 말한다.

server가 resource를 전달하기 위해서는 API를 구축해놓아야 client가 이를 활용할 수 있다. 보통 인터넷에 있는 데이터를 요청할 때는 HTTP라는 프로토콜을 사용하고, 주소(URL, URI)를 통해 접근할 수 있게 된다.

---

API Key

API를 이용하기 위해서는 API Key라는 것이 필요하다.

fetch를 이용해서 서버 요청하기

서버와 클라이언트

• 요청하는 주체: 클라이언트
• 요청에 따른 응답: 서버

서버에게 요청하기

• 일반적으로 서버에게 HTTP (URL) 요청을 하고, 응답을 처리한다.
• 응답은 다양한 형태로 받을 수 있는데 그 종류에는 JSON, HTML 등이 있다.

HTTP 요청 fetch API 사용

fetch('http://serverAddress/weather?q=Jeju')
.then(function(response) {
  // 응답의 형식에 따라 response.text( )가 될 수 있음
  return response.json( );
})
.then(function(json) {
  console.log(json); // { tempature:24 }
});

---

서버에 기록하기

HTTP 요청을 GET이 아닌 POST로 요청하면 내용(payload)와 함께 전달된다.

예를 들어서 id, password를 이용해서 로그인 할 때, 새로운 게시글을 등록하려고 할 때 등이 있다.

let newContent = {
  'userId': 'dotori', 
  'title': '날씨 apit 제대로 한번 사용해볼래요!', 
  'body': '날씨 API를 사용하기 위해서는 우선 가입이 필요하고, 해당 서비스는 유료이기 때문에 사용자마다 고유한 api Key가 존재합니다...........'
};

fetch('http://serverAddress/post1', {
  method: 'POST',
  body: JSON.stringify(newContent)
}).then(function(response) {
  return response.json( );
}).then(function(json) {
  console.log(json); // { id: content1 }
});