[TIL] Getting the Weather (API)
✏️ TIL
- Location 좌표 정보를 읽어내 저장합니다.
- 만약 이미 저장된 값이 없다면 요청하고, 저장한 값이 있다면 저장된 값을 표시합니다.
- JS에 API 주소를 호출해서 데이터를 가져오고, 데이터를 화면에 출력합니다.
💡about API
API 는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것 = api에는 디자인이 필요 없음. JS에서는 API를 이용해 새로고침 없이 데이터를 가져올 수 있음.
JS는 웹사이트로 request를 보내고 응답을 통해 데이터를 얻을 수 있는데, 이 데이터를 적용시키는 과정에서 refresh가 필요 없음. JS가 보이지 않는 곳에서 끊임없이 데이터를 가져오고 있음 (이메일창도 같은 원리)
📚 Algorithm
1. HTML에 아래와 같은 요소를 만들어줍니다.
💡about API
API 는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것 = api에는 디자인이 필요 없음. JS에서는 API를 이용해 새로고침 없이 데이터를 가져올 수 있음.
JS는 웹사이트로 request를 보내고 응답을 통해 데이터를 얻을 수 있는데, 이 데이터를 적용시키는 과정에서 refresh가 필요 없음. JS가 보이지 않는 곳에서 끊임없이 데이터를 가져오고 있음 (이메일창도 같은 원리)
1. HTML에 아래와 같은 요소를 만들어줍니다.
< span class = "js-weather" >
2. 1에서 만든 요소를 JS로 불러옵니다.
const weather = document.querySelector("js-weather");
3. 저장된 코드가 있다면 불러오는 함수를 생성합니다.
- localStorage에서 key에 저장된 value를 가져옵니다.
- 만약 value가 null 이라면 코드를 요청합니다.
- 아니면 가져온 코드를 JSON으로 변환합니다.
function loadCoords(){
const loadCords = localStorage.getItem(COORDS);
if (loadCoords === null) {
askForCoords();
} else {
const parseCoords JSON.parse(loadCoords);
// localStorage에는 string 형태로 저장되어 있기 때문에 JSON으로 변환
}
}
4. 저장된 코드가 없을 때 코드를 요청하는 함수를 실행합니다.
navigator.geolocation.getCurrentPosition
메서드를 실행, 브라우저가 실행중인 장치의 위치정보를 조사해 객체로 반환합니다.
navigator.geolocation.getCurrentPosition()
💡 naviatgor :
navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니다.
https://developer.mozilla.org/ko/docs/Web/API/Navigator
💡 geolocation :
Geolocation 인터페이스는 장치의 위치를 가져오는 방법을 나타냅니다. Geolocation을 사용하면 웹 사이트나 웹 앱이 위치 정보를 활용해, 현재 위치에 대해 맞춤 콘텐츠를 제공할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Geolocation
💡 geolocation.getCurrentPosition() :
Geolocation.getCurrentPosition() 메서드는 장치의 현재 위치를 가져옵니다.
https://developer.mozilla.org/ko/docs/Web/API/Geolocation/getCurrentPosition
-
getCurrentPosition을 실행하면 성공과 실패 두가지 경우의 수가 있고, 그 외 옵션이 존재합니다. 기본적으로 성공과 실패 시의 함수를 필수로 요구 하기 때문에 함수를 각각 작성해줍니다.
-
포지션을 가져오는 데 성공한 경우, 포지션의 위도, 경도값을 배열에 입력합니다.
// 포지션을 가져오는 데 성공한 경우
function handleGeoSucess(position){
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude
};
💡 배열은 보통 key : value를 매치하는게 기본이지만,
const coordsObj = { latitude : latitude, longitude : longitude };
key값과 value의 변수 값이 같다면 아래와 같이 저장할 수 있습니다.
const coordsObj = { latitude, longitude };
- 포지션을 가져오는 데 실패한 경우, 콘솔에 로그를 띄웁니다.
// 포지션을 가져오는 데 실패한 경우
function handleGeoError(position){
console.log('Cant acess geo location');
}
5. 받아온 정보값을 로컬스토리지에 저장합니다.
- 받아온 정보값은 JS Object이기 때문에
JSON.stringify
를 이용, 문자열로 변환하여 저장합니다.
function saveCoords(coordsObj){
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
6. API 키를 가져옵니다. (at Open Weather map)
- API키를 변수선언합니다.
const API_KEY = "~"
7. 날씨 데이터를 불러옵니다.
- API에 사용자의 위치정보를 삽입하기 위해 함수에 매개변수를 입력합니다.
- API 데이터를 얻기 위해
fetch
메서드를 사용합니다.
function getWeather(lat, lng) {
fetch (`API 주소 `); // 데이터를 얻기 위해 fetch를 사용해준다.
}
8. API 키에 위치정보를 Load합니다.
- localStorage에 위치정보가 저장되어 있지 않은 경우
function handleGeoSucess(position){
// 포지션을 가져오는 데 성공한 경우 처리 함수
};
saveCoords(CoordsObj);
getWeather(latitude, longitude);
// 코드배열을 localStorage에 저장하고 날씨데이터에 위도, 경도 삽입
}
- localStorage에 위치정보가 저장되어 있는 경우
function loadCoords(){
const loadCords = localStorage.getItem(COORDS);
if (loadCoords === null) {
askForCoords();
} else {
const parseCoords JSON.parse(loadCoords);
// localStorage에는 string 형태로 저장되어 있기 때문에 JSON으로 변환
getWeather(parseCoords.latitude, parseCoords.longitude);
// 날씨데이터에 위도, 경도 삽입
}
}
9. 받아온 날씨 정보를 HTML에 띄워줍니다.
- fetch한 api주소의 JSON을 반환합니다.
- JSON 데이터가 준비되면 JSON에서 날씨, 온도 등을 가져와 html에 출력합니다.
function getWeather(lat, lng) {
fetch (`API 주소 `);
.then(function(response){
return response.json(); //response에는 network정보만 보이므로 JSON(javascript Object)를 가져오도록 한다.
})
.then(function(json) { // 그리고 JSON Data가 준비되면 Json에서 이것저것을 가져온다.
const temperature = json.main.temp;
const place = jsom.name;
weather.innerText ``${temperature} @ ${place};
});
}
Author And Source
이 문제에 관하여([TIL] Getting the Weather (API)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yunji0614/TIL-Getting-the-Weather-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)