[JavaScript] #3.9 Getting the Weather part One (Geolocation) (#코딩공부)

https://youtu.be/5fAMu2ORvDA

---

<복습>

https://wook-2124.tistory.com/92

[JavaScript] #3.8 Image Background (#코딩공부)

 

<준비물>

https://repl.it/

Online IDE, Editor, and Compiler - Fast, Powerful, Free

 

<코드기록>

// index.html에 <script src="weather.js"></script> 추가 
// weather를 가져오기 전에 geolocation을 가져옴 (coords, 좌표)
// loadCoords === null이면 askForCords가 실행되서 현재 내 위치(getCurrentPosition)를 물어볼 것임
const COORDS = "coords";

function handleGeoSuccess(position) {
  console.log(position);
}

function handleGeoError(position) {
  console.log("Can't access geo location");
}

function askForCoords() {
  navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);
}

function loadCoords() {
  const loadedCoords = localStorage.getItem(COORDS);
  if (loadedCoords === null) {
    askForCoords();
  } else {
    // getWeather
  }
}

function init() {
  loadCoords();
}

init();


// function handleGeoSuccess로 coords(좌표)의 latitude(위도), longitude(경도)를 정의하고 
// SaveCoords로 위에서 나온 값을 LS에 value 값으로 저장함
const COORDS = "coords";

function saveCoords(coordsObj) {
  localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}

function handleGeoSuccess(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const coordsObj = {
    latitude: latitude,
    longitude: longitude
  };
  saveCoords(coordsObj);
}


// https://openweathermap.org/api 가입 후 API keys란에서 Key 복사 
// API(Application Programming Interface)
// 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단


// 최종 코드
const API_KEY = "ded8b1690ab3da1a4ef762795e744b2f"
const COORDS = "coords";

function saveCoords(coordsObj) {
  localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}

function handleGeoSuccess(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const coordsObj = {
    latitude: latitude,
    longitude: longitude
  };
  saveCoords(coordsObj);
}

function handleGeoError(position) {
  console.log("Can't access geo location");
}

function askForCoords() {
  navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError);
}

function loadCoords() {
  const loadedCoords = localStorage.getItem(COORDS);
  if (loadedCoords === null) {
    askForCoords();
  } else {
    // getWeather
  }
}

function init() {
  loadCoords();
}

init();

---

1. weather.js

index.html에 <script src="weather.js"></script> 추가하고, weather에 대한 정보를 가져오기 전에 geolocation을 가져왔다.

 

coords는 좌표로 loadCoords === null이면 askForCords가 실행되서 현재 내 위치(getCurrentPosition)를 물어볼 것이다.

 

위와 같이 내 위치 확인(navigator.geolocation.getCurrentPosition)이 뜬다.

 

X를 누르면 handleGeoError가 실행되어 입력해둔 문구가 console에 출력된다.

 

위치 확인 '허용'을 누르면 handleSuccess가 실행되서 GeoLocationPosition이 console에 출력되어 coords(좌표)로 latitude(위도)와 longitude(경도)가 출력된다.

---

2. latitude(위도), longitude(경도) Local Storage에 저장하기

내 위치 확인 '허용'을 눌러서 실행된 handleGeoSuccess로 coords(좌표)의 latitude(위도), longitude(경도)를 파악하고, 그 값을 SaveCoords로 LS에 value 값으로 object 값을 string 값으로 바꿔 저장했다.

 

latitude(위도)와 longitude(경도)가 key=coords(좌표)의 value로 LS에 저장됐다.

 

이렇게 LS에 한번 저장하고나면 F5를 눌러 화면을 새로고침해도 더 이상 현재 내 위치를 물어보지 않는다.

---

3. openWeather API 가져오기

https://openweathermap.org/api

Weather API - OpenWeatherMap

API(Application Programming Interface)는 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단이다.

 

API Key를 가져오기 위해서 사이트에 가입한 뒤 로그인 하고 API keys 클릭해주자.

 

API keys에 있는 Key를 복사해서

 

API_KEY로 const해주고 다음 시간에 사용해보도록 하자.

 

---

※ 코로나19 조심하세요!!!!