fetch、weather APIの使用

JavaScriptでオブジェクトと配列を処理

UIをワイヤフレームとして描画し、HTML&CSSとして設計する

特定都市・現時点の天候データについて

DOMを使用して特定の要素上で所定の気象データ値を動的にレンダリング

OPEN APIを使用して気象データを取得

リソースを提供するエージェントをサーバと呼びます.
では、リソースを要求する人またはプログラムをクライアント(client)と呼ぶ.
Clientは、Webブラウザであってもよいし、開発者が作成したプログラムであってもよい.
API(Application Programming Interface)とは、リソースをよりよく利用するためにサーバをクライアントに提供することです.
サーバがリソースを渡すには、クライアントが利用できるAPIを確立する必要があります.通常、インターネット上のデータが要求されると、HTTPプロトコルが使用され、アドレス(URL、URI)でアクセスされる.

API Key

APIを使用するにはAPIキーが必要です.

fetchリクエストサーバの使用

サーバとクライアント

リクエストの主体:クライアント

応答要求:サーバ

リクエストサーバ

通常、HTTP(URL)要求をサーバに送信し、応答を処理する.

応答は、JSON、HTMLなど様々な形で受信できる.

HTTPリクエストを使用して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要求である場合、コンテンツ(負荷)とともに伝達される.
たとえば、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 }
});