📌 위치/날씨를 찾아보자
navigator.geolocation.getCurrentPosition()
이런 놈을 써서 위치를 알아낸다.
근데 getCurrentPosition는 아래와 같이 인수를 2가지 가져야 한다.
getCurrentPosition.(잘 됐을 때 실행될 함수, 에러가 발생했을 때 실행할 함수)
function onGeoOk(position) {
console.log(position);
}
function onGeoError() {
alert("Can't find you. No weather for you.")
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
잘 됐을 땐 onGeoOk라는 함수를 실행시킬 건데, 이 함수는 position을 console에 찍어준다.
오류가 났을 때는 onGeoError라는 함수를 실행시킬 건데, 이 함수는 얼럿을 띄워준다.
그 전에 여기에서 API를 받아 와야 한다.
API란... 간단히 말해서 서버와 이야기를 할 수 있는 부분이다.
저 사이트에 로그인 후 아래 lat(위도), lon(경도)를 알아낸 후 API key를 붙여주면 된다.
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
내 위치의 위도와 경도를 알아내고 이 부분을 붙여넣어주면 된다.
구글 확장 프로그램에서 JSON viewer를 깔아주면 불러온 JS를 가독성 좋게 볼 수 있다.
const API_KEY = "a1e0f2bf28eea68a3797afe32fb91324";
function onGeoOk(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
fetch(url)
.then(response => response.json())
.then((data) => {
const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
const name = data.name;
city.innerText = data.name;
weather.innerText = `${data.weather[0].main} / ${data.main.temp}`
});
}
function onGeoError() {
alert("Can't find you. No weather for you.")
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
좀 길어보이는데 차근차근 해보자.
나의 position을 console에서 확인하고, lat, lon을 구한 후 저 날씨 사이트에서 시키는대로 값을 붙여준다.
fetch가 뭔지 보니... 매우 복잡하고 뭔가 서버랑 관련된 내용이 많은데
결론적으로 네트워크에서 json 파일을 가져와서 data를 매개변수로 object대로 실행하는 코드다.
응답을 받아 오는데 좀 걸리므로 .then()을 쓰면 빠르게 가져올 수 있다고 한다. 이 개념은... 뭘까?
이전에 했던 것처럼 JS에서 HTML을 만져 날씨와 도시 등 정보가 출력될 수 있게끔 자리를 만들어주고,
아까 보여준 날씨 JS에 있던 정보 중 원하는 것을 빼와서 넣으면 된다. (수업에서는 날씨랑 기온을 썼다.)
이렇게...... 끝냈다!
뒷부분이 많이 힘들어서 사실 백퍼센트 내 것이라고 할 수는 없지만...
과제는 이렇게 만들었다!
to do 리스트라는 과제에 맞춰 잊지 말아야 한다를 주 메세지로 너의 이름은 같은 컨셉을 만들었다.
노래도 젠젠젠세, 타이틀 문구나 placeholder도 컨셉츄얼하게 맞췄다!
배경 이미지도 3가지 랜덤인데 모두 영화 이미지...
근데 랜덤으로 맞추려다 보니 레이아웃 맞추기가 쉽지 않아서 ㅠㅠ 마음에 드는 이미지 찾기가 어려웠다.
아무튼... 이렇게 해냈다...
강의를 들으며 FE이 매력적이라는 생각을 계속 했는데 그 이유는 이렇게 만든 게 가시적으로 보여서인 것 같다.
뭐 물론 BE도 그렇겠지만 아직 안 해봐서 ㅎㅎ... 이제 천천히 또 BE도 맛봐야지...
딱 한 달 정도 됐다! 그 사이에 python, html, css, js 을 할짝 핥아보기만 했다.
이번달은 node.js... 와 나머지 배운 것들을 보강하면서 계속 뭘 만들어봐야겠다.
아무튼 니꼬 샘 고마와요...... 다른 것도 들어볼게요...
'👋🏻 JavaScript > 💭 노마드코더 바닐라JS' 카테고리의 다른 글
[노마드코더 바닐라JS로 그림 앱 만들기] #2 Painting Board (1) (0) | 2023.03.21 |
---|---|
[노마드코더 바닐라JS로 그림 앱 만들기] #1 Canvas API (0) | 2023.03.21 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #7.0 ~ #7.8 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #6.0 ~ #6.3 (0) | 2023.03.08 |
[노마드코더 바닐라JS로 크롬 앱 만들기] #5.0 ~ #5.3 (0) | 2023.03.08 |