[js] openweathermap API로 온도 알아내기 & 섭씨 온도로 변환하기

- 글을 쓰기 앞서 이 블로그는 공부 내용들을 정리 & 노출함으로서 공유하기 위해 쓰는 용도라 존댓말을 쓰지 않음을 알립니다. 쿨한 척은 결단코 아닙니다. 단지 이 말투가 편하네요. -

 

유용한 정보를 공유한다는 건 참 좋은 일인 것같습니다. (늘 감사합니다.)

 

 

---

 

유저의 좌표를 알기위해 일단은 navigator.geolocation()을 사용합니다. 

 

navigator.geolocation()이 무엇인 mdn에 검색해보니, 

 

- Navigator.geolocation() 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation 객체를 반환합니다. -

 

라고 합니다. 

 

※ 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻는다고 합니다. 각 브라우저는 자신만의 권한 정책과 요청 방식을 가지고 있으므로 주의해야 한다고 하니 참고해주세요.

 

 

 navigator.geolocation.getCurrentPosition()은 요소 2개가 필요합니다. 첫번째 인자는 조건이 충족될 때 콜백함수이고 두번째 인자는 조건이 충족 되지 않을 때의 콜백함수입니다.

navigator.geolocation.getCurrentPosition(작동할 조건이 충족될 때 실행할 function 이름, 조건이 충족 되지 않을 때 실행할 function 이름);

 

 

조건이 충족될 때 실행할 function을 생성합니다.

function success(position){
	console.log(position);
}

navigator.geolocation.getCurrentPosition(success, 조건이 충족 되지 않을 때 실행할 function 이름);

 

참고로 function success의 소괄호 안은 어떤 이름이 들어가도 괜찮습니다. 그저 첫번째 인자의 이름을 지어주는 것뿐입니다.

 

위의 예시로 들자면 JavaScript가 getCurrentPositionobject를(예를들어서 위치 같은 정보를.) position에(첫 번째 인자) 줍니다.

 

 

function error(){
    alert("error");
}

 

 

조건 충족할 경우를 생성했으니 조건이 충족되지 않을 때 실행할 function을 생성합니다. alert로 데이터를 가져오지 못했다는 문구를 작성하시면 됩니다. 꼭 alert는 아니어도 되긴 하지만 유저에게 알리는 용도라면 alert가 좋을 거라 판단해 alert를 사용했습니다. 

 

/* --- 성공했을 때 --- */

function success(position){
    console.log(position);
}

/* --- 에러 날 때 --- */

function error(){
    alert("error");
}

navigator.geolocation.getCurrentPosition(success, error);

 

이제 저장하고 실행하여 개발자 도구를 열어서 console.log를 보면 getcurrentposition이 있는데, getcurrentposition에서 coords(좌표)를 찾으면 latitude(위도)와 longitude(경도)를 볼 수 있습니다.

 

위치를 알아야 날씨도알고 기온도 알 수 있기 때문에 latitude(위도)와 longitude(경도) 값은 나중에 쓸 것이니 미리 메모장에 복붙 해둡니다.

 

 

latitude와 longitude의 값을 알았으니 이제 openweathermap.org를 검색해서 사이트에 들어갑니다. API KEY가 필요한데 받으려면 가입이 필요합니다. 회원 가입을 마친 다음에 우측 상단에 Support의 왼쪽을 보면 가입할 때 입력한 이름이 적혀있는데 그 메뉴를 누르고 My API keys를 선택합니다.

 

 

 

그러면 key  |  name  | Creat Key가 나오는데 'key'만 메모장에 복붙 해두도록 합니다.

 

이제는 API Call을 복사해야 합니다. 상단에 API 메뉴를 누르면 아래의 화면을 볼 수 있습니다.

 

 

 

 

여기서 우리는 날씨 Data가 필요하기 때문에 Current Weather Data의 API doc를 선택합니다. 참고로 무료인 API이 있기도 하고 유료인 API도 있습니다. 

 

 

 

 

API call에서 첫 번째 줄을 복사합니다. 

 

---

 

jsp에 적용하기 전에 링크를 통해 볼 수 있는 정보를 알아볼 건데, 이 부분은 넘어가도 괜찮습니다.

 

링크 창에 붙여 넣기를 하면 되는데 api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}를 보시면 { }이 부분들이 있습니다. {  } 이걸 수정해야 합니다.

  

 

우선 복붙 해둔 latitude, API key 값을 q={city name}&appid={API key} 부분에 아래와 같이 넣습니다.

 

ex) lat=123455&appid=1314151617

 

그리고 추가로 lon=${lon}도 넣어야 합니다.

 

lat=123455&lon=12222&appid=123451527

 

이렇게.

 

그리고 Enter을 치면 정보가 주르륵 나옵니다.

 

날씨, 위치, 온도.. 등등을 확인할 수 있습니다. 잠시 API를 이용해 어떤 정보들을 알 수 있는지 알아봤습니다. 이제 js로 돌아가겠습니다.

 

---

 

제일 먼저 위치를 알기 위해 복붙 해둔 값들을 함수로 생성합니다.

 

const 상수에 API KEY를 붙여 넣습니다.

 

success function에 const 상수로 let과 lon도 생성합니다. 복붙 한 걸 잃어버렸다 해도 괜찮습니다! 우리는 앞에서 console창을 통해 getCurrentPosition이 담고 있는 데이터들을 확인하면서 우리가 필요한 값인 letitude와 longitude는 coords에 있다는 걸 알 수 있었으니까요. 

 

그런데,

 

값을 let와 lon이라는 상수에 넣어도 되긴 하지만 여러분들도 아시겠지만 알고자 하는 위치가 바뀔 때마다 따로 넣어줘야 하는 번거로움도 있을뿐더러 우리는 여러 사용자의 위치에 관련된 정보들을 제공해야 합니다.

 

그래서 값을 직접 넣지 않고 값을 불러오도록 하겠습니다.

 

jsp가 getCurrentPosition의 데이터를 첫 번째 인자인 position을 통해서 불러와주니까 우리는 이렇게 지정하면 됩니다. 

 

ex) const lat = position.coords.latitude;

 

const lon도 만찬 가지입니다.

 

ex) const lon = position.coords.longitude;

 

그리고 잘 지정했는지 확인할 겸 console.log(lat, lon);을 적습니다.

function success(position){
	const lat = position.coords.latitude;
    	const lon = position.coords.longitude;
    
    console.log(lat, lon);
}

 

새로고침 하면 동의 여부 창이 뜨는데 정보를 알려면 당연히 수락해야 합니다. 수락하고 console창에 가보면 위도와 경도 값이 출력되어있습니다.

 

이제 사용자에게 정보를 전달해야 합니다. 그러려면 링크 창에 주소를 입력해서 확인했던 정보, 그러니까 즉. API가 제공하는 데이터들이 출력되게 해야 하는데 그러기 위해서 링크를 넣습니다. 우리가 원하는 정보만 출력되게 하기 위해서..

 

const link로 생성하고 백틱(``) 안에 주소를 넣으시면 됩니다. 

 

const API_KEY = "12a345c678def9012g34567l8901234m5n"

function success(position){
    const lat = position.coords.latitude;
    const lon = position.coords.latitude;

    console.log(lat, lon);

    const link = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;
    console.log(link);
};

let과 lon 그리고 API KEY는 우리가 위에 상수로 지정했었기에 따로 수정 안 하셔도 괜찮습니다.

 

저대로 넣고 한번 console.log(link)로 확인해보겠습니다. 그러면 우리가 링크 창에 주소를 입력함으로써 보았던 정보들이 출력됩니다. 

 

우리는 response객체를 이용해서 데이터를 가져오게 할 건데 그러려면 json() 메서드가 필요합니다. 경로를 가져올 fetch부터 작성합니다.

 

ex) fetch(link)

 

fetch의 뜻은 범위입니다. 

 

fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다고 mdn에 나와있습니다.

 

위의 설명도 그렇고 mdn의 정보글을 아예 복붙 한 것이긴 하나 더 자세히 알고 싶다면 직접 사이트에 가서 검색해보는 걸 추천합니다. 왜냐하면 필요한 부분만 가져왔기 때문에 mdn에 나와있는 응용법들이나 뭐와 연관되어있는지..등등은 이 글에서는 mdn보다 또는 mdn만큼이라도 알 수 없기 때문입니다.

 

각설하고, fetch(link);를 지정했다면 아래와 같이 합니다.

 

fetch(link)

    .then((response) => response.json())

    .then((data) => {

        const temp = Math.floor(data.main.temp - 273.15);

        weather.innerText = `${temp}℃`;

    });

}

 

＊ 다시 한번 말하자면 이 블로그는 공부 정리할 겸 노출을 통해 공유가 목적입니다..... 더 알고 싶다면 mdn 또는 google 검색을 추천드립니다.

 

 

 

fetch를 통해 link에 담긴 정보들을 불러온 걸 - 정상적으로 동작할 경우 - json으로 response 하게 합니다. 

 

그리고 json()한 데이터를 받아와 temp 함수에  Math.floor(data.main.temp - 273.15); 연산한 값을 넣습니다.

 

Math.floor는 소수점 이하를 버립니다. 주어진 수보다 작거나 같은 가장 큰 정수를 반환하는데 예를 들어서 MAth.floor(45.05);는 45를 반환합니다. 

 

main.temp은 link 안에 포함된 정보에서 알 수 있습니다.(위에서 처럼 position을 console.log 하면 확인이 가능합니다.)

 

"main.temp" 필드에 지역 온도가 켈빈 온도로 표시되어있는데 이를 섭씨온도로 변환하기위해 273.15을 뺀 것입니다. (google에 'openweathermap로 온도' 라고 치시면 섭씨 온도로 변환하는 방법이 나와있는 날씨 정보 JSON가 뜹니다.)

 

참고로, ${temp} 옆의 ℃는 윈도우 기준으로 ㄹ + 한자를 치면 있습니다. 또, 따로 const 상수로 temp를 생성해서 값을 넣은 이유는 가독성도 좋고 간편하기 때문입니다. 

 

브라우저 화면에 출력을 위해 html에 <div id="weather"> <span></span> </div>를 만들어준 다음 js 파일에서 html 태그를 담을 함수에 document.querySelector('');로 태그를 불러 넣습니다.

 

const weather = document.querySelector('span');

 

그리고, weather.innerText();로 태그 안에 출력할 값을 넣습니다.

 

function success(position){
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    console.log(lat, lon);

    const link = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;
    console.log(link);

    fetch(link)
    .then((response) => response.json())
    .then((data) => {
        
        /* ------- html 태그 불러온다. id인 weather의 첫번째 span. ------- */
        
        const weather = document.querySelector('#weather span:first-child');
        
        /* ------- 켈빈온도를 섭씨로.------------ */
        
        const temp = Math.floor(data.main.temp - 273.15);
        
        /* ---------- 해당 태그에 값을 넣는다. & 출력. -------- */ 
        
        weather.innerText = `${data.weather[0].main} / ${temp}℃`;
    });
};

 

이렇게 하면 섭씨를 사용자에게 제공할 수 있습니다. 온도 외에도 정보를 보면 알 수 있듯이 날씨, 지역.. 등등 도 가능합니다.

 

 

/*추가로 더 알고 싶다면 노마드코더 '바닐라 JS로 크롬 앱 만들기' 강의를 추천드립니다. 이 글은 해당 강의에서 배운 부분을 정리한 겁니다..! 그리고 감사하게도 강의는 무료입니다.  */