안녕하세요! 오늘은 기상청에서 제공하는 API를 활용하여 날씨 정보를 보여주는 웹사이트를 만드는 과정을 상세히 알아보겠습니다. 이 프로젝트를 통해 API 호출부터 데이터 처리, 그리고 웹사이트 구현까지의 전 과정을 배울 수 있습니다.
API 호출 및 데이터 파싱
API 요청 파라미터 설명
기상청 단기예보 API를 사용하기 위해서는 다음과 같은 주요 파라미터들이 필요합니다:
serviceKey: 공공데이터포털에서 발급받은 인증키pageNo: 페이지 번호 (기본값: 1)numOfRows: 한 페이지 결과 수 (기본값: 10)dataType: 응답 데이터 타입 (JSON 또는 XML)base_date: 발표 일자 (YYYYMMDD 형식)base_time: 발표 시각 (HHMM 형식)nx,ny: 예보지점의 X, Y 좌표
이 파라미터들을 올바르게 설정하여 API를 호출해야 합니다.
JS를 이용한 API 호출 코드
JavaScript를 사용하여 API를 호출하는 코드는 다음과 같습니다:
const apiKey = 'YOUR_API_KEY_HERE';
const baseDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');
const baseTime = '0600';
const nx = 60;
const ny = 127;
const url = `http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst?serviceKey=${apiKey}&pageNo=1&numOfRows=10&dataType=JSON&base_date=${baseDate}&base_time=${baseTime}&nx=${nx}&ny=${ny}`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
// 데이터 처리 로직
})
.catch(error => console.error('Error:', error));이 코드는 fetch API를 사용하여 비동기적으로 데이터를 요청합니다.
JSON/XML 응답 데이터 파싱
API 응답으로 받은 JSON 데이터를 파싱 하는 예시 코드입니다:
function parseWeatherData(data) {
const items = data.response.body.items.item;
const weatherInfo = {};
items.forEach(item => {
switch(item.category) {
case 'T1H':
weatherInfo.temperature = item.obsrValue;
break;
case 'RN1':
weatherInfo.rainfall = item.obsrValue;
break;
case 'WSD':
weatherInfo.windSpeed = item.obsrValue;
break;
// 기타 필요한 정보 추가
}
});
return weatherInfo;
}이 함수는 API 응답에서 필요한 날씨 정보만을 추출하여 객체로 반환합니다.
날씨 데이터 처리
필요한 날씨 정보 추출
API 응답에서 우리가 필요로 하는 주요 날씨 정보는 다음과 같습니다:
- 기온 (T1H)
- 강수량 (RN1)
- 풍속 (WSD)
- 풍향 (VEC)
- 습도 (REH)
데이터 가공 및 정제
추출한 데이터를 사용자에게 보여주기 좋은 형태로 가공합니다:
function processWeatherData(rawData) {
return {
temperature: `${rawData.temperature}°C`,
rainfall: `${rawData.rainfall}mm`,
windSpeed: `${rawData.windSpeed}m/s`,
windDirection: getWindDirection(rawData.windDirection),
humidity: `${rawData.humidity}%`
};
}
function getWindDirection(degree) {
const directions = ['북', '북동', '동', '남동', '남', '남서', '서', '북서'];
return directions[Math.round(degree / 45) % 8];
}이 함수들은 원시 데이터를 사용자 친화적인 형태로 변환합니다.
웹 사이트 구현
프론트엔드 설계 (HTML, CSS, JavaScript)
HTML 구조:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날씨 정보</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>지역별 날씨 정보</h1>
<div class="location-select">
<label for="location">지역 선택:</label>
<select id="location">
<option value="서울">서울</option>
<!-- 기타 지역 옵션 -->
</select>
<button id="getWeather">날씨 조회</button>
</div>
<div id="weatherResult"></div>
</div>
<script src="app.js"></script>
</body>
</html>CSS 스타일링:
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to top, #a8edea, #fed6e3);
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
/* 추가 스타일 */JavaScript 로직:
document.getElementById('getWeather').addEventListener('click', function() {
const location = document.getElementById('location').value;
// API 호출 및 데이터 처리 로직
});
function displayWeather(weatherData) {
const weatherResult = document.getElementById('weatherResult');
weatherResult.innerHTML = `
<h2>${weatherData.location} 날씨</h2>
<p>기온: ${weatherData.temperature}</p>
<p>강수량: ${weatherData.rainfall}</p>
<p>풍속: ${weatherData.windSpeed}</p>
<p>풍향: ${weatherData.windDirection}</p>
<p>습도: ${weatherData.humidity}</p>
`;
}백엔드 구현 (선택한 웹 프레임워크 소개)
이 예제에서는 백엔드에서 직접 API를 호출하지만, 실제 프로덕션 환경에서는 보안상의 이유로 백엔드를 통해 API를 호출하는 것이 좋습니다. Node.js와 Express를 사용한 간단한 백엔드 예시:
const express = require('express');
const axios = require('axios');
const app = express();
app.get('/api/weather', async (req, res) => {
try {
const response = await axios.get('기상청 API URL');
res.json(response.data);
} catch (error) {
res.status(500).json({ error: 'API 호출 실패' });
}
});
app.listen(3000, () => console.서버 시작 on port 3000');날씨 데이터 시각화
Chart.js를 사용하여 날씨 데이터를 시각화할 수 있습니다:
function createTemperatureChart(data) {
const ctx = document.getElementById('temperatureChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: '기온 (°C)',
data: data.temperatures,
borderColor: 'rgb(255, 99, 132)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: false
}
}
}
});
}이 코드는 기온 데이터를 선 그래프로 표시합니다.
결론
이렇게 기상청 API를 활용하여 날씨 정보를 제공하는 웹사이트를 구현해보았습니다. API 호출부터 데이터 처리, 프론트엔드 구현, 그리고 데이터 시각화까지 전반적인 웹 개발 과정을 경험할 수 있었습니다. 이 프로젝트를 기반으로 더 다양한 기능과 개선된 UI/UX를 추가하여 실용적인 날씨 정보 서비스를 만들 수 있을 것입니다.
앞으로 더 발전된 기능을 추가하거나, 다른 API와 연동하여 더 풍부한 정보를 제공하는 등 다양한 확장이 가능합니다. 여러분의 창의적인 아이디어로 이 프로젝트를 더욱 발전시켜 보세요!
종합된 예시코드는 다음 글에 올리겠습니다. 구독과 뎃글을 써주시면 더욱더 좋은 글이 되도록 노력하겠습니다. ㅎㅎ
'데이터분석 > 탐구' 카테고리의 다른 글
| 탐구 - 기상청 API를 활용한 날씨 사이트 만들기 (1) (1) | 2025.01.12 |
|---|---|
| 탐구 - 기상청 API를 활용한 날씨 사이트 만들기 (3)-최종ㅎㅎㅎ (0) | 2025.01.12 |
