20231201 / open API 서울의 현재 기온 표시

# open API 서울의 현재 기온 넣기 

 

 

 

[문제1] https오류
sparta 사전캠프 강의에서 받은 open API 의 url은 https오류(보안관련)로 사용되지 않았다.

[해결]
다른 open API를 사용하기로 함

---

 

[문제2] 켈빈온도
https://api.openweathermap.org/ 에서 제공되는 API를 Jason으로 실행했더니
온도의 숫자가 우리가 일반적으로 알고있는 '섭씨(Celsius) '표시가 아닌 '켈빈(Kelvin) '온도 형식으로 보여졌다.

[해결]
https://openweathermap.org/current#data 를 보니 제공되는 url 주소 뒤에 &units=metric를 넣으면 섭씨표시가 가능하다는 것을 알았다.

---

 

[문제 3] https오류
github에 배포했는데 역시 문제1에서 발생했던 것처럼 https오류(보안관련)인 동일한 문제로 기온이 나타나지 않았다.

[해결]
개발자콘솔을 열어보니 정확히는 이해하지 못했으나 "http는 https에서 사용하지못한다...............?"는 내용인 것 같았다.

그래서 혹시나 하고 http:// 로 시작하는 url을 https:// 로 변경해 보았다 (약간 도박)
그랬더니 정상적으로 작동했다!! 감격

 

 

# 결론

1. JQuery를 넣고

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

2. 기온을 보여줄 곳을 넣고

<!-- Fetch 현재기온을 보여줄 곳을 설정 -->
    <p style="position:fixed;bottom:-20px;left:10px;"><span id="weatherInfo"></span></p>

 

3. 해당 script를 넣으면 끝!  

•  apiUrl 에서 seoul대신 다른 지역을 넣어도 됨
•  자신의키 는 https://openweathermap.org/에서 회원가입 후 제공되는 My API keys에서 확인할수 있음

<script>
        // OpenWeatherMap API URL
        var apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=자신의키&units=metric";
   
        // API에서 데이터 가져오기
        $.get(apiUrl, function(data) {
            // 온도 추출
            var temperature = data.main.temp;
   
            // HTML에 온도 값을 추가
            $("#weatherInfo").html("서울의 현재 온도: " + temperature + " °C");
        });
    </script>

 

 

 

 

짠!!

 

 

 

 

# 참고자료

https://ksyy.tistory.com/175

날씨 API : OpenWeatherMap

 

https://velog.io/@moonworks/%EA%B8%B0%EC%83%81%EC%B2%AD-%EC%98%A4%ED%94%88-API-%EC%82%BD%EC%A7%88%EA%B8%B0

기상청 오픈 API 삽질기

https://www.youtube.com/watch?v=QxEZCSfUrzs