2021. 11. 10. (수) TIL - 바닐라 JS로 크롬 앱 만들기 - weather / Finish

# 학습 전 나의 상태

이제 마지막 부분이다. 

물론.. 클론코딩이지만 이것을 통해서 많이 배우게 되고 알게 된다. 

이제는 내가 다시 해보면서 나의 것들로 만들어가는 과정이 참 중요할 것 같다.

다음주부터 바닐라JS 챌린지 과정을 듣는데 자바스크립트를 좀 더 잘 이해하면서 더욱더욱 성장하고 싶다.

어디가서 나 바닐라JS 좀 합니다. 하는 그날까지.. 화이팅..!

 

# 오늘의 학습 내용

// 이렇게 하면 브라우저에서 위치좌표를 받아온다고 한다. WoW
navigator.geolocation.getCurrentPosition(success, error)

// getCurrentPosition - user의 위치정보를 얻는 것

실제로 작성한 코드

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  console.log("I gat you!", lat, lon)
}
function onGeoErr() {
  alert("Can't find you. No weather for you")
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoErr)

위와 같이 나의 좌표를 알 수 있다.

 

 weather.js 완성 코드

const weather = document.querySelector('#weather span:first-child');
const city = document.querySelector('#weather span:last-child');
const API_KEY = '8b4400e8424eb03dac3f2ff4dc6ae6e1'

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를 사용해 얻고자 하는 정보를 받아온다.
  fetch(url)
    .then(res => res.json())
    .then(data => {
      city.innerText = data.name
      weather.innerText = `${data.weather[0].main} / ${data.main.temp}`
    })

}
function onGeoErr() {
  alert("Can't find you. No weather for you")
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoErr)

 

 

 

# 학습을 마치며

자바스크립트 공부가 필요해 시작한 강의인데 얻은 것은 많은 것 같다.

얻은 것을 잘 기억했으면 좋겠고, 잘 활용해 보면서 내 것으로 만들고 싶다.

개발자가 되기 위해 공부하고 있지만 부족함을 많이 느끼는 요즘이다.

그래서 더 정신차리고 하려고 노력중.. (쉽지는 않다..)

이제 기능들을 다 구현했고, 내가 직접 CSS로 꾸미는 작업을 한 번 해봐야 한다.

꾸미는 작업은.. 현재 코코아 클론 챌린지를 하면서 진행해야 할 것 같다. (몇 일 걸린다는 소리..)

자바스크립트를 정말 잘하고 싶다. 끊임없이 보고 따라하고 내 것을 만들기 위해 노력하자!!