📅 TIL #30

👉 API는 무엇인가

드디어 내일이면 코드스테이츠 프리코스 한달 과정이 끝난다. 오늘은 마지막 과제이고 내일 H.A 시험을 보면 정말로 끝이난다!!

오늘 주어진 마지막 과제는 날씨 API를 받아와서 현재 날씨를 알려주는 어플리케이션을 만드는 과제가 주어졌다. 그동안 배웠던 스킬들을 전부 활용을 해서 과제를 제출해야만 했다.

그래서 그동안 배웠던 html, css, js, dom까지 배웠던 모든 지식들을 다 활용해서 과제를 진행했다.

먼저 API(Application Programming Interface)란 서버가 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해주는 역할을 하는 것이다.

여기서 서버는 날씨 제공을 해주고, 나 자신 혹은 프로그램은 클라이언트(client)라고 한다. 이때 클라이언트는 웹 브라우저가 될 수도 있고, 만들고자 하는 날씨 앱이 될 수도 있다.

서버는 브라우저 밖의 영역이다.

그렇기에 클라이언트(나 자신)가 서버에 요청을 해서 날씨앱을 제공받는 것이 바로 API이다.

서버에 요청하기

• 일반적으로 서버에게 HTTP (URL) 요청 후, 응답을 처리
• 응답은 다양한 형태로 받을 수 있음 (JSON, HTML, plain text 등등)
• HTTP 요청은 fetch API로 한다.

오늘 배운 코드를 정리하자면

function getData() {

  // fetch 를 활용해서 서버로 요청하고 응답을 받을 수 있게 한다.
  // fetch는 Promise<Response>를 반환하는데 이 상태로는 바로 데이터를 사용할 수가 없다. 
  // 이 중에서 Response를 꺼내고, 서버에서 제공하는 JSON 데이터를 쓸 수 있게 해주는 
  // json() 메서드를 이용하면 사용 가능한 데이터 형태로 만들어, 정보들을 활용할 수 있게된다!
  fetch(openweathermap url)


  // then()은 서버에 요청하고 응답을 받는 과정에서 통신에 성공하는 경우, 콜백함수를 실행시켜주는 역할을 한다.
  .then(function (data) {   // 여기서 data는 주소이다.
    return data.json        // 우리가 자바스크립트에서 활용할 수 있는 객체 혹은 배열의 형태로 변환
  })
  .then(function (json) {
    renderWeatherData(json);
  }
}

오늘 배운 내용을 최대한 간략하게 정리해보았다!

내일이면 기다리고 기다리던 H.A(심화과정 들어가기 전 테스트 시험)를 보게 된다. 배운자들도 어렵다던 이머시브는 얼마나 어려울까…

정말 설렘반 걱정반으로 이머시브에 가게 될 것 같다.

👊 내일의 TIW(today I Will)

H.A 시험, 회고록작성하기