2. 날씨앱 만들기 (5)

https://openweathermap.org/current

Current weather data - OpenWeatherMap

 

 

 

함수를 만든다.

함수 이름이 길긴 하지만 길더라도 정확한 함수 역할을 담을 수 있는 이름을 줘야 한다

복사한 API key를 붙여넣기 한다.

 

getCurrentLocation함수를 통해 lat,long 정보를 가져와서 url에 뿌려줘야 한다!

getWeatherByCurrentLocation()함수를 불러와서 정보 lat,lon를 넘겨줄거야

latitude,longitude 정보를 받은 함수는 ()안에 매개변수로 (lat,lon)을 써줄거야

 

useEffect를 통해서 get~함수가 호출되자마자 navigator를 이용해서 getCurrentPosition을 가져올거고 location받아오자마자 

getWeatherByCurrentLocation함수를 호출해줘서 내가 필요한 (lat,lon)안의 lat,lon을 패스를 해주면 const~의 (lat,lon)이 캐치!! 그리고 그 정보를 url의 {lat}, {lon} 에서 쓴다.

 

다이나믹 value는 $ 을 써주어야 한다.

그러면 const get~에 있는 (lat,lon)의 값이 {lat},{lon}에 각각 들어간다.

 

 

 

 

부를게요. 기다려주세요 url을 fetch,호출해서 데이터를 가져올때까지. 그리고 그걸 response에 저장해주세요

여기서 잠깐! await를 쓰려면 함수가 async(함수)이어야 한다. 

async - 비동기적으로 처리해준다.  어디가 비동기? "let response = await fetch(url)" 여기가! async처리가 되어야 한다.

 

이 response를 통해서 json 파일을 추출해야 한다.

api는 대부분 json이다.

json파일을 추출해야 데이터를 볼 수 있다!

 

response에서 json을 추출하는 것을 기다려주세요

 

console.log를 통해서 데이터를 출력!

 

<data>

cloud name(이름)

coord : coordinate 정보

main - humidity : 얼마나 습한지 / temp : (화씨) 온도

name : 수평동(?)

weather - clear / description(날씨에 대해 설명) : clear sky

이제 해야하는 것: 이 정보를 가지고 UI에 보여주기!! (평생 console.log 쳐다보고 있을 거 아니잖아~)