반응형
외부에서 가져온 날짜 API를 호출
- 출처: https://youtu.be/5fAMu2ORvDA [노마드 코더 Nomad Coders]
- 우선 디바이스의 위치정보를 불러온다.
- 가져온 위치 정보를 로컬 디바이스에 저장하고 이를 이용 날짜 정보를 가져온다.
키워드1. Navigator 인터페이스
- 사용자 에이전트의 상태와 신원 정보를 나타냄
- Navigator.geolocation : 디바이스 위치에 접근을 허용하기 위한 객체를 반환
키워드2. fetch API
- 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스
- IE 에서는 지원하지 않음 [polyfill 이용]
- Promise를 기반으로 되어 있음
기본구조
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});전체코드
weather.js
'use strict';
const weather = document.querySelector('.js-weather');
const COORDS = 'coords';
const API_KEY = '21a1aa875d2b483d359b8c44fbe2d5ab';
function getWeather(lat, lng) {
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`)
.then(function (response) {
return response.json();
})
.then(function (json) {
const temperature = json.main.temp;
const place = json.name;
weather.innerHTML = `${temperature} @ ${place}`;
});
}
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
function positionCallback(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude: latitude,
longitude: longitude
};
saveCoords(coordsObj);
getWeather(latitude, longitude);
}
function errorCallback(error) {
console.log(error);
}
function askForCoords() {
navigator.geolocation.getCurrentPosition(positionCallback, errorCallback);
}
function init() {
const loadCoords = localStorage.getItem(COORDS);
if (loadCoords === null) {
askForCoords();
} else {
const parseCoords = JSON.parse(loadCoords);
getWeather(parseCoords.latitude, parseCoords.longitude);
}
}
init();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Something</title>
<link rel="stylesheet" href="index.css" />
<script defer src="clock.js"></script>
<script defer src="greeting.js"></script>
<script defer src="todo.js"></script>
<script defer src="bg.js"></script>
<script defer src="weather.js"></script>
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>
<span class="js-weather"></span>
</body>
</html>'javascript' 카테고리의 다른 글
| 23. Callback & Callback Hell 콜백함수와 콜백 지옥 (0) | 2020.07.13 |
|---|---|
| 22. Function 심화학습 (2) | 2020.07.07 |
| 20. Momentum 만들기 8 - 배경이미지 랜덤출력 (0) | 2020.06.30 |
| 19. Momentum 만들기 7 - todolist 만들기3 (0) | 2020.06.30 |
| 18. Array APIs (0) | 2020.06.30 |