코딩 이야기

기상청 날씨정보 api 활용 받아오기 본문

자유게시판

기상청 날씨정보 api 활용 받아오기

별메아리 2023. 5. 26. 11:16
728x90

 

 

날씨 정보를 활용한 일기 예보 사이트를 만들어 볼려고 공공데이터 사이트에서 실시간 단기 예보 정보를 받아와서 웹페이지에 뿌려주는 코드를 작성해보았다.

 

Java Script로 기상청 api 활용하여 날씨 정보 받아오기

<!DOCTYPE html>
<html>
<head>
    <title>Weather Information</title>
    <script>
        function getWeather() {
            var xhr = new XMLHttpRequest();
            var url = 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst'; /*URL*/
            var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'서비스키'; /*Service Key*/
            queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
            queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('1000'); /**/
            queryParams += '&' + encodeURIComponent('dataType') + '=' + encodeURIComponent('JSON'); /**/
            queryParams += '&' + encodeURIComponent('base_date') + '=' + encodeURIComponent('20230526'); /**/
            queryParams += '&' + encodeURIComponent('base_time') + '=' + encodeURIComponent('0600'); /**/
            queryParams += '&' + encodeURIComponent('nx') + '=' + encodeURIComponent('102'); /**/
            queryParams += '&' + encodeURIComponent('ny') + '=' + encodeURIComponent('84'); /**/
            xhr.open('GET', url + queryParams);
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var response = this.responseText;
                    var weatherText = document.getElementById('weather-text');
                    weatherText.textContent = response;
                }
            };
            xhr.send('');
        }
    </script>
</head>
<body>
    <h1>Weather Information</h1>
    <button onclick="getWeather()">Get Weather</button>
    <div id="weather-text"></div>
</body>
</html>

필요한 정보가 있다면 더 추가 하면 되는데 쿼리 파람에 추가하면 된다. 정보형식은 기상청 api 문서를 참조해야 한다.

다음 프로젝트에 짤막하게 날씨 정보라도 넣어 볼까 하여 일단 정리해서 올려놓았다.

 

혹시 제 티스토리를 보시는 분이 계신다면 요새 낮아진 설명 퀄리티에 죄송하단말을 드리겠습니다.

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'자유게시판' 카테고리의 다른 글

의료용품 공급 사이트 프로젝트  (0) 2023.06.26
깃 허브 서버에 호스팅 해보기  (1) 2023.05.25
IOT 실시간 대시보드(라즈베리파이)  (0) 2023.05.21
sns 로그인 (이어서)  (2) 2023.05.09
sns 소셜 네트워크 로그인  (0) 2023.05.09
'자유게시판' Related Articles more
Comments