[API] openWeatherMAP을 통해 주간날씨 구현하기

나는 이번 프로젝트에서 open api를 통해 주간날씨를 구현하고 싶었다. 

구글 주간날씨

네이버 주간날씨

 

위는 구글과 네이버의 주간날씨의 예시이다. 

해당날짜, 아이콘, 온도에 대해서 보여주고있다. 한칸에 하루치를 보여주고, 가로로 여러날짜의 결과를 보여준다.

 

 

날씨를 구현하고자 api 를 찾아봤다. 일반적으로 많이들 이용하는 사이트가 openweathermap.org였다.

회원가입을 하고, 각자가 받은 api key 값을 주어진 링크에 넣어 json형태로 데이터를 받을 수 있다. 

 

 

공짜로 얻을 수 있는 데이터의 종류는 다음과 같았다. 

현재날씨, 3시간마다의  5일치의 날씨.

보통 찾아본 결과, 현재날씨 데이터로 많이들 구현하던데 나는 주간날씨를 원했기 때문에, 3시간마다 5일치의 날씨 정보를 사용하기로 했다. 

 

• 위치 설정하기

해당 사이트에서 제공하는 api call 링크는 다음과 같았다.

api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API key}

 

위도경도에 원하는 지역의 값을 넣으면 된다. 

서울의 경우 다음과같이 기입하면 된다. 

lat=37.5665&lon=126.978

위도 경도가 아닌 도시명도 가능하다. 

하늘색으로 하이라이팅 칭 부분에 다음과같이 도시명을 넣으면 된다. 예시는 서울로 했다.

q=Seoul

 

나라별 날씨를 얻을 수있는 방법은 없었다. 굳이 그러고 싶다면, 주요 도시들의 날씨를 조회하여 정보를 종합하는 방법을 택해야 했다. 

 

&units=metric&lang=kr

이걸 링크 후반부에 추가해주었다. 

섭씨, 한국어로 변환해주는 조건이다.

 

---

주어진 데이터를 가공하는데 고민되던 점이 한 가지 있었다. 

 

온도(평균, 최저, 최고)는 하루 내내의 온도에서 충분히 계산식으로 돌려 도출해낼 수 있는데, 

아이콘과 날씨설명은 무얼 기준으로 하는지 였다. 

 

1. 중간 시간대, 혹은 정오 

대개 오전 10시에서 오후 2시 사이의 날씨를 기준으로 합니다. 이 시간대는 하루 중 기온이 상대적으로 안정적이기 때문에 일반적으로 사용됩니다.

많은 날씨 서비스는 오후 12시(정오)의 날씨를 기준으로 아이콘을 표시합니다. 이 시간은 대개 날씨가 가장 안정적이기 때문입니다.

2. 평균 날씨

하루 전체의 평균적인 날씨를 기준으로 아이콘이 설정되기도 합니다. 예를 들어, 하루 종일 흐린 날씨가 예상된다면, 그 날의 날씨 아이콘은 흐림을 나타낼 것입니다.

3. 특정 시간대

일부 서비스는 사용자가 설정한 특정 시간대의 날씨를 기준으로 아이콘을 제공할 수도 있습니다.

 

마침 메이져 사이트(내 기준 구글, 네이버, 다음)에서도 정오즈음을 기준으로 아이콘을 표시한다고하고, 

내가 받아온 json 데이터에도 낮 12시마다의 정보가 담겨있었다.

 

 

+ 그렇다면 여기에 꼬리를 무는 고민점

오늘이미 예를들어 오후 5시인경우 이미 낮 12시를 지난 시간일경우

오늘의 아이콘과 설명은 어떻게 해결하는것이 좋을까?

 

1. 오늘의 날씨 기준 시간 조정
오늘 날짜에 대해서는 낮 12시가 지나더라도 가장 최근의 데이터를 기준으로 아이콘과 설명을 업데이트하는 방식입니다. 예를 들어, 오후 3시에 데이터를 불러올 때 낮 12시 데이터를 사용할 수 없다면, 오후 3시 또는 그 이후의 가장 가까운 시간의 데이터를 사용하도록 합니다.
2. 전날 밤의 데이터를 기준으로 사용하는 방식
3. 날씨 예보 API의 적응
4. 여러 시간대 평균 사용

결론
지금 상황에서는 첫 번째 방법을 권장드립니다. 이 방법을 사용하면 낮 12시 이후에도 오늘의 날씨를 안정적으로 표시할 수 있습니다. 다른 사이트들도 이와 비슷한 방식으로 시간을 기준으로 데이터를 표시하며, 특정 시간이 지나더라도 오늘 날씨가 잘 반영되도록 관리합니다

 

5일치 서울의 날씨 출력

---

https://rebornbb.tistory.com/entry/API-openweathermap-API%EB%A5%BC-%ED%86%B5%ED%95%B4-%ED%98%84%EC%9E%AC-%EB%82%A0%EC%94%A8-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0

[API] openweathermap API를 통해 현재 날씨 출력하기

https://icedhotchoco.tistory.com/entry/OpenWeatherMap-%EB%82%A0%EC%94%A8-API

[OpenWeatherMap] 날씨 API 사용해보기

 

https://velog.io/@yeonsubaek/JavaScript-%EB%82%A0%EC%94%A8-API-%EC%97%B0%EB%8F%99%EC%9D%B4-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%89%BD%EB%8B%A4%EA%B3%A0-ft.-OpenWeatherMap

[JavaScript] 날씨 API 연동이 이렇게 쉽다고? (ft. OpenWeatherMap)

https://peter-codinglife.tistory.com/71

날씨 API - OpenWeather 사용하기(2)