2021-02-16 TIL

TIL

• web API
• 날씨 위젯 만들기

---

1. API

• Application Programming Interface
• 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해줘야 하며 이것을 API라고 한다.
• 서버가 리소스를 전달하기 위해서는 API를 구축해놓아야 클라이언트가 이를 활용할 수 있다.
• 인터넷에 있는 데이터를 요청할 때에는 HTTP라는 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근할 수 있음.
  

1. http 요청. url의 서버 api에 통신요청을 보낸다.
fetch('url').then(fucntion(data){
  return data.json(); // 2. json 메소드로 자바스크립트가 읽을 수 있도록 변환하는 과정.
}).then(function(json){
  console.log(json)
})

---

2. openweathermap

https://openweathermap.org/

open API 중 하나인 openweathermap 사용해보기

1. 회원가입 후 이메일 인증을 하면 API Key를 사용할 수 있다.
2. 서울의 날씨 정보 받아오기.

fetch('api.openweathermap.org/data/2.5/weather?q=Seoul&appid=이곳에 api key 입력')
    .then(function(resp) {
      return resp.json()
    })
    .then(function(json) {
      도시.textcontent = json.name
     ~~ '원하는 Data를 가져와 textcontent로 화면에 보여줄 수 있다.~~
    })

---

3. enter event

도시를 검색 후 엔터키를 누르면 결과가 나오도록 하고 싶었다.

• querySelector로 input을 받아온다.
• input에 원하는 이벤트가 실행될 때 까지 기다리다, 이벤트가 발생했을 때 등록된 이벤트 리스너가 실행된다.

1.요소의 메소드에 이벤트 리스너를 전달.
input.addEventListener('keyup',function(e){
  if (e.keyCode === 13) {
    원하는 기능(alert, 함수실행 등..)
  }  
});

2.요소에 프로퍼티로 이벤트 리스너 등록.
input.onkeyup = function(){
  원하는 기능(alert, 함수실행 등..)
}

---

REVIEW

API를 이용해 날씨 위젯을 만들었다.
1. HTML로 기본 구조를 만들고 css로 ui 디자인.
2. openweathermap 으로 도시별 날씨 정보를 받아옴.
3. 전달된 객체의 원하는 정보만을 웹페이지에 보여줌.

처음 접근하는 방식이 어려웠다..console창에 fetch와 data, json을 찍어보니 어느정도 이해가 됐고 그 뒤로는 차근차근 진행이 됐다.