프로그래밍/자바스크립트
JS : 오늘, 내일 날씨 및 온도 구현하기 (openweathermap 활용)
재우니
2024. 10. 31. 22:01
API KEY
https://home.openweathermap.org/api_keys
API 문서
https://openweathermap.org/forecast5
활용 자료
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘과 내일의 날씨</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.weather-container {
display: inline-block;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
margin: 10px;
}
</style>
</head>
<body>
<h1>오늘과 내일의 날씨</h1>
<div id="today-weather" class="weather-container">
<h2>오늘</h2>
<p id="today-status">날씨 정보를 불러오는 중...</p>
<img id="today-icon" src="" alt="오늘 날씨 아이콘" style="display: none;">
</div>
<div id="tomorrow-weather" class="weather-container">
<h2>내일</h2>
<p id="tomorrow-status">날씨 정보를 불러오는 중...</p>
<img id="tomorrow-icon" src="" alt="내일 날씨 아이콘" style="display: none;">
</div>
<script>
const apiKey = ""; // 발급받은 API 키를 입력하세요
const lat = "37.5665"; // 서울의 위도
const lon = "126.9780"; // 서울의 경도
const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric&lang=kr`;
const weatherDescKo = {
201: '가벼운 비를 동반한 천둥구름', 200: '비를 동반한 천둥구름', 202: '폭우를 동반한 천둥구름', 210: '약한 천둥구름', 211: '천둥구름',
212: '강한 천둥구름', 221: '불규칙적 천둥구름', 230: '약한 연무를 동반한 천둥구름', 231: '연무를 동반한 천둥구름', 232: '강한 안개비를 동반한 천둥구름',
300: '가벼운 안개비', 301: '안개비', 302: '강한 안개비', 310: '가벼운 적은비', 311: '적은비', 312: '강한 적은비', 313: '소나기와 안개비',
314: '강한 소나기와 안개비', 321: '소나기', 500: '약한 비', 501: '중간 비', 502: '강한 비', 503: '매우 강한 비', 504: '극심한 비', 511: '우박',
520: '약한 소나기 비', 521: '소나기 비', 522: '강한 소나기 비', 531: '불규칙적 소나기 비', 600: '가벼운 눈', 601: '눈', 602: '강한 눈',
611: '진눈깨비', 612: '소나기 진눈깨비', 615: '약한 비와 눈', 616: '비와 눈', 620: '약한 소나기 눈', 621: '소나기 눈', 622: '강한 소나기 눈',
701: '박무', 711: '연기', 721: '연무', 731: '모래 먼지', 741: '안개', 751: '모래', 761: '먼지', 762: '화산재', 771: '돌풍', 781: '토네이도',
800: '구름 한 점 없는 맑은 하늘', 801: '약간의 구름이 낀 하늘', 802: '드문드문 구름이 낀 하늘', 803: '구름이 거의 없는 하늘', 804: '구름으로 뒤덮인 흐린 하늘'
};
async function getWeather() {
try {
const response = await fetch(forecastUrl);
const data = await response.json();
const today = new Date();
const tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
let todayForecast = null;
let tomorrowForecast = null;
data.list.forEach(item => {
const forecastDate = new Date(item.dt_txt);
if (!todayForecast && forecastDate.getDate() === today.getDate()) {
todayForecast = item;
}
if (!tomorrowForecast && forecastDate.getDate() === tomorrow.getDate()) {
tomorrowForecast = item;
}
});
if (todayForecast) {
const todayDesc = weatherDescKo[todayForecast.weather[0].id] || todayForecast.weather[0].description;
document.getElementById("today-status").innerText = `상태: ${todayDesc}, 온도: ${todayForecast.main.temp}°C`;
document.getElementById("today-icon").src = `https://openweathermap.org/img/wn/${todayForecast.weather[0].icon}.png`;
document.getElementById("today-icon").style.display = "inline";
} else {
document.getElementById("today-status").innerText = "오늘의 날씨 정보를 불러오지 못했습니다.";
}
if (tomorrowForecast) {
const tomorrowDesc = weatherDescKo[tomorrowForecast.weather[0].id] || tomorrowForecast.weather[0].description;
document.getElementById("tomorrow-status").innerText = `상태: ${tomorrowDesc}, 온도: ${tomorrowForecast.main.temp}°C`;
document.getElementById("tomorrow-icon").src = `https://openweathermap.org/img/wn/${tomorrowForecast.weather[0].icon}.png`;
document.getElementById("tomorrow-icon").style.display = "inline";
} else {
document.getElementById("tomorrow-status").innerText = "내일의 날씨 정보를 불러오지 못했습니다.";
}
} catch (error) {
console.error("날씨 정보를 가져오는 중 오류 발생:", error);
document.getElementById("today-status").innerText = "날씨 정보를 불러오지 못했습니다.";
document.getElementById("tomorrow-status").innerText = "날씨 정보를 불러오지 못했습니다.";
}
}
getWeather();
</script>
</body>
</html>
참고 사이트
https://gist.github.com/choipd/e73201a4653a5e56e830
OpenWeatherMap api의 다국어에 한국어 지원을 위한 협업용 파일
OpenWeatherMap api의 다국어에 한국어 지원을 위한 협업용 파일. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com