OPEN API와 API Key

아직 구체적인 방법은 실습을 해봐야 알겠지만 서버에 데이터를 요청해서 받는 방법을 처음으로 알았다! API, API 하던 것이 무엇인지 이제야 어렴풋이 알 것 같다.

API란 하나의 응용 프로그램이 다른 응용 프로그램에 서비스를 요청하는 방식을 일컫는다. 이걸 웹 개발에 적용하면 클라이언트와 서버가 서로 통신할 수 있게 하는 매커니즘이라고 볼 수 있겠다.

9월 말 Nomad Coder - 바닐라 JS로 크롬 앱 만들기를 수강할 때, 마지막 챕터에서 브라우저가 현재 위치 파악해서 OPEN API로 현재 날씨 정보 가져와 화면에 보여주는 걸 했었다. 이때는 코드를 따라치면서도 뭐가 뭔지 하나도 모르고 그냥 그대로 따라치니 화면에 날씨 정보가 뜨고 신기해 하기만 했다. 이걸 지금 다시 보니 모든 코드가 이해가 되는 매직....

const API_KEY = "...";

function onGeoSuccess(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`;
  fetch(url).then((response) =>
    response.json().then((data) => {
      const weather = document.querySelector("#weather span:first-child");
      const city = document.querySelector("#weather span:nth-child(2)");
      city.innerText = data.name;
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    })
  );
}

function onGeoError() {
  alert("Sorry. We can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);

API_KEY는 personal 한 거라 그 부분만 가렸고, 나머지는 js 파일의 전체 코드이다. 참고로 API key를 발급 받으려면 OpenWeatherMap 사이트에서 회원 가입을 해야 한다. 회원 가입 후 이메일 인증을 하면 몇 시간 뒤 활성화가 되어서 발급 받은 API key를 쓸 수 있다.

9월 말에는 첫 번째 라인에서 API_KEY 변수 지정하는 것 외에는 단 한 줄도 이해하지 못했던 위의 코드를 지금 이해하는 바대로 적어보면 :

• OpenWeatherMap의 Open API를 통해 현재 위치(도시)를 기준으로 한 날씨 정보를 받아올 수 있다.
• 브라우저의 최상위객체인 window의 하위 객체로 document, location, history, navigator 등이 있다.
• 브라우저의 콘솔에 window.navigator를 찍어보면 navigator 객체를 살펴볼 수 있다. (document와 마찬가지로 window. 없이 navigator만 쳐도 진입 가능하다)
• navigator.geolocation에 getCurrentPostion 내장 메소드가 있으며, 해당 메소드의 syntax는 아래와 같다.

navigator.geolocation.getCurrentPosition(success, error, [options])

• 다시 말해 getCurrentPosition 메소드는 성공했을 경우의 콜백 함수와 실패했을 경우의 콜백 함수를 인자로 받는다. 이때 success 콜백 함수의 매개변수는 장치의 현재 위치이며, 유일한 매개변수이다. (마치 이벤트 핸들러 함수에서 event 객체가 자동으로 주어지는 것과 같다)

위의 코드의 success 콜백 함수인 onGeoSuccess 함수의 내부를 이해하기 위해서는 OpenWeatherMap에서 제공하는 아래의 API 호출의 예시를 먼저 살펴보는 것이 좋다.

// 20221202132225
// http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=3c17c5ce0a99e5e1762a0151f268f4c0

{
  "coord": {
    "lon": -0.1257,
    "lat": 51.5085
  },
  "weather": [
    {
      "id": 701,
      "main": "Mist",
      "description": "mist",
      "icon": "50n"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 277.61,
    "feels_like": 276.43,
    "temp_min": 276.48,
    "temp_max": 278.91,
    "pressure": 1025,
    "humidity": 95
  },
  "visibility": 3900,
  "wind": {
    "speed": 1.54,
    "deg": 330
  },
  "clouds": {
    "all": 100
  },
  "dt": 1669954917,
  "sys": {
    "type": 2,
    "id": 2075535,
    "country": "GB",
    "sunrise": 1669967112,
    "sunset": 1669996494
  },
  "timezone": 0,
  "id": 2643743,
  "name": "London",
  "cod": 200
}

• fetch 로 API url을 넣어 데이터를 요청한다. 보다 정확히는 URI라고 할 수 있겠다. query parameter에 데이터를 받아오기 위해 필요한 큐가 될 수 있는 정보(이 경우에 위도, 경도, API key)를 넣는다.
• fetch로 데이터 요청을 하면 Promise가 반환되고, 이를 then 메소드를 통해 promise의 resolve 메소드의 데이터 값을 받아온다. (정확한 표현이 아닐 수 있음. 대략 흐름이 이렇다는 것)
• 이때 위의 API call 예시를 보면, 응답으로 온 JSON 데이터에서 도시명(.name), 날씨 정보(.weather[0].main, main.temp, main.humidity) 등을 꺼내어 쓸 수 있는 것이다.
• fetch가 비동기로 작동하기 때문인지 날씨 정보가 브라우저 화면에 로딩하는 즉시 바로 뜨는 것이 아니라 몇 초 후에 뜬다.

지난 주에 벽에 머리 박으면서 비동기를 배웠는데 이게 이렇게 쓰는 거구나 이제서야 알게 되었다 ㅋㅋㅋ 그리고 OPEN API라는 것, 너무 멋있잖아... 데이터를 막 공짜로 주잖아... (모든 OPEN API가 데이터를 공짜로 주는 것은 아니다)

나중에 공공데이터 받아온 다음 데이터 시각화해서 가시적이고 보다 유용한 정보를 보여주는 프로젝트를 해보고 싶은데, 공공데이터포털에서 OPEN API를 제공한다. 아직 뭐가 뭔지는 잘 모르겠지만 시험 삼아서 '서울특별시교육청_평생학습강좌정보'를 살펴봤더니 OPEN API 활용 가이드를 다운로드 받을 수 있었다. 한국 정부 사이트에서 hwp 문서가 아닌 word 문서 제공하는 것은 처음 봤다 ㅋㅋㅋㅋㅋㅋ

가보고 싶은 destination을 향해 한 걸음씩 항해하고 있는 이 기분이 너무 짜릿하다.