🏃♂️What I learned
1. JSON(Javascript Object Notation)
데이터 저장과 교환을 위한 데이터 형식- 중괄호 안에 위치
- K : V 값의 형태를 가짐
예시
{
"이름" : "홍길동",
"나이" : 20,
"성별" : "남자"
}
2.API(Application Programming Interface)
프로그램 간 상호 작용할 수 있도록 만든 인터페이스.
3. openweather api를 이용한 날씨 정보 만들기
1. html<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/api/weather.css">
<title>Weather</title>
</head>
<body>
<div class="container">
<div>
<div id="weatherInSeoul">서울날씨</div>
</div>
<div>
<div id="weather">날씨 테스트</div>
</div>
</div>
<script src="/api/weather.js"></script>
</body>
</html>
2.css
.container{
display: flex;
}
.container > div > div{
margin: 0 10px;
font-size: 15px;
}
.container > div{
display: flex;
}
3.javascript
const weatherInSeoul = document.getElementById('weatherInSeoul');
(function getWeatherSeoul(){
fetch(`https://api.openweathermap.org/data/2.5/weather?q=seoul,kr&appid={키값}`)
.then(response => response.json())
.then(data => {
weatherInSeoul.innerHTML += `<br>${Math.round(Number(data.main.temp) - 273.15)}°C`;
weatherInSeoul.innerHTML += `<br>${data.weather[0].main}`;
});
})();
//--------------------------------------------------------------
let num = 0;
let region = 'seoul';
let korRegion = '';
const weather = document.getElementById("weather");
function getWeather(){
weather.innerHTML = '';
switch (num) {
case 0: korRegion = '서울'; break;
case 1: korRegion = '부산'; break;
case 2: korRegion = '대전'; break;
case 3: korRegion = '제주'; break;
case 4: korRegion = '광주'; break;
case 5: korRegion = '원주'; break;
case 6: korRegion = '인천'; break;
};
weather.innerHTML += `${korRegion}날씨`
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${region},kr&appid={키값}`)
.then(response => response.json())
.then(data => {
weather.innerHTML += `<br>${Math.round(Number(data.main.temp) - 273.15)}°C`;
weather.innerHTML += `<br>${data.weather[0].main}`;
});
num++;
switch (num) {
case 1: region = 'busan'; break;
case 2: region = 'daejeon'; break;
case 3: region = 'jeju'; break;
case 4: region = 'gwangju'; break;
case 5: region = 'wonju'; break;
case 6: region = 'incheon'; break;
case 7: region = 'seoul'; num = 0; break;
};
}
setInterval(getWeather, 3000); 결과값
- 두번 째 날씨는 3초마다 변경
