fetch 와 callback 을 이용해 필요한 사이트의 데이터를 json파일로 리턴받고 원하는 정보 출력
const data = fetch("https://api.openweathermap.org/data/2.5/weather?lat=35.158604&lon=126.7956918&units=metric&appid=6edee3c2aa182bc44d18ccb204c98a31");
data.then(callback1).then(callback2);
function callback1(response) {
return response.json();
}
function callback2(response) {
const weather = response.weather;
const main = weather[0].main;
const temp = response.main.temp;
let code = `<h1${main}<h1><h1>${temp}</h1>`;
document.querySelector('body').innerHTML = code;
}
callback 으로 동작하는 함수들은 일반적으로 non blocking 으로 동작한다.
= 순차적으로 동작하지 않는다. (처리 순서가 송수신 속도(네트워크 처리속도)에 따라 다르다.)
kakao developers 에서 지도 api 를 javascript 로 불러와서 구현하기, marker 추가해서 현재 위치한 곳 추가
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=// 본인의 앱키 입력 //"></script>
<script>
navigator.geolocation.getCurrentPosition(run);
function run(position) {
console.log(position);
const coords = position.coords;
const lat = coords.latitude;
const lng = coords.longitude;
console.log(lat, lng);
const data = fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&units=metric&appid=6edee3c2aa182bc44d18ccb204c98a31`);
data.then(callback1).then(callback2);
function callback1(a) {
console.dir(a);
return a.json();
}
function callback2(response) {
const weather = response.weather;
const main = weather[0].main;
const temp = response.main.temp;
const name = response.name; // 지역명
let code = `<h1>${main}</h1><h1>${temp}</h1><h1>${name}</h1>`;
document.querySelector('body').innerHTML += code;
}
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(lat, lng),
level: 3
};
var map = new kakao.maps.Map(container, options);
var markerPosition = new kakao.maps.LatLng(lat, lng);
var marker = new kakao.maps.Marker({
position: markerPosition
});
marker.setMap(map);
}
</script>
</body>
