public API

사용자의 위치를 기반으로 해서 날씨 정보를 가져와서 보여주려고 한다. 여기서 사용되는 API의 개념과 사용방법 그리고 사용자의 위치를 가져올 수 있는 JS 메소드에 대해 알아보자.

API는 애플리케이션 소프트웨어를 빌드하고 통합하기 위한 정의 및 프로토콜 세트인 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)이다.

API 역할

API의 역할은 크게 3가지로 나눌 수 있다.

• API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
  데이터베이스에는 소중한 정보들이 저장되어있다. 모든 사람들이 이 데이터베이스에 접근할 수 있으면 절대 안된다. API는 이를 방지하기 위해 사용자가 가진 서버와 데이터베이스에 대해 출입구 역할을 하며 허용된 사람들만 데이터베이스에 접근할 수 있도록 해준다.

• API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
  여기서 애플리케이션이란 우리가 흔히 알고 있는 스마트폰 어플이나 프로그램, 웹을 말한다. API는 애플리케이션과 기기가 데이터를 원활히 주고받을 수 있도록 돕는 중간 다리 역할을 한다.

• API는 모든 접속을 표준화한다.
  API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스(접근 권한)을 얻을 수 있다. 쉽게 말해, API는 범용 플러그처럼 작동한다고 볼 수 있습니다.

API 유형

API의 유형은 3가지로 나누어진다.

1. private API : private API는 내부 API로, 회사 개발자가 자체 제품과 서비스를 개선하기 위해 내부적으로 발행한다. 따라서 제 3자에게 노출되지 않는다. 쉽게 말하면 일반적인 접근이 불가능하다.

2. public API : public API는 개방형 API로, 모두에게 공개된다. 누구나 제한 없이 API를 사용할 수 있다. 여기서 사용할 API도 이에 해당한다.

3. partner API : partner API는 기업이 데이터 공유에 동의하는 특정인들만 사용할 수 있다. 비즈니스 관계에서 사용되는 편이며, 종종 파트너 회사 간에 소프트웨어를 통합하기 위해 사용된다.

사용 방법

먼저 API를 불러오기 위한 URL 이 필요하다. https://openweathermap.org/ 에 나와있는 API Call URL은 다음과 같다.

https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API_KEY}

여기서 우리는 lat, lon, API ket 값들을 조정해줘야 한다. 이는 사용자가 위치한 위도, 경도와 사용자의 KEY 값이다.

위도 경도는 마지막에 JS 메소드를 통해 불러올 수 있고 KEY 값은 openweathermap 홈페이지의 프로필 정보에서 알 수 있다.

실제 코드에 적용해보면 아래와 같다.

const API_KEY  = "9b9260a87f691a3520d48b73e6542aa8";

function onGeoOk(position) {
    const lat = position.coords.latitude; 
    const lon = position.coords.longitude;
  
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&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:last-child");

        city.innerText = data.name;
        weather.innerText =  `${data.weather[0].main} / ${data.main.temp}`;
    });
}

URL을 부른다. 사용자가 링크를 눌러서 직접 URL에 접속하는게 아니라 자바스크립트가 URL을 불러줄거다. 이때 개발자 도구를 이용해 network를 확인해보자

network에 가면 무슨 일이 일어나고 있는지 알 수 있다. 페이지 새로고침을 한 후 사용자 위치를 참조하려고 한다는 알림창에 allow를 해주고 조금만 기다리면 request가 보인다. 누군가 URL로 요청을 했다는 의미이다. 그건 바로 자바스크립트이다. 위 코드에서 알 수 있듯이 fetch 함수를 통해 요청을 보냈다.

fetch
fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다. 참고로 fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다. (이전에 공부했듯 window 전역 객체 -> window 생략 가능)

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

사용자 위치 불러오기

function onGeoError() {
    alert("Can't find you");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError)

브라우저에서 위치 좌표를 준다. 인자는 2개가 필요하다. 모든게 성공적으로 잘 됐을 때 실행될 함수와 뭔가에 의해 막혀 에러가 생겼을 때 실행될 함수, 보통 alert를 띄운다.