기상캐스터가 되어보자
Openweather API 를 이용한 기상정보가져오기
https://openweathermap.org/ 오픈웨더 사이트에 먼저접속후
요 로고를 확인해줍니다
오픈웨더 사이트 접속 -> GUIDE 옆에 API 에 들어가면 여러 결제구독 Subscribe가 나온다
여기서 Current Weather Data 에 가서 대문짝 만한 Free 라고 써있곳에 get API key
를 눌러서 가입해줍니다 ~
그리고 나서 오른쪽 맨위에 내가 Sign up 한 아이디를 클릭 -> My API keys로 들어가서
내키를 제너레이트 해준다! 여기서부터 이제 JSON 형식으로 받아와야하는디
다시 GUIDE 옆 API 로 들어가 아래로 쭉내려 Current weather data 를 눌러
보면 여기에 ~
굳이 안들어가셔도 되니 내가 쓰겠다
https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
내가 제너레이팅한 키를 저기있는 {API key} 에 넣어준다
내키는 보여주지 않겠다
우선 날씨 데이터는 겟✈ 했다
그다음엔
저기 보이는 lat => latitude 와 lon => longitude 위도,경도를 알아야하는데
어떻게 아냐 ... 는
크롬에서 f12를 눌러 이녀석을 찍은뒤 위치정보 허용 때려주자
navigator.geolocation.getCurrentPosition((position) => { console.log(position); });
coords를 눌러서 쭉내리면 여기있다 주황색표시 저두녀석을 위에 {lat} {lon} 에 중괄호 없애고
넣어주자
그러면 내 위치의 날씨정보가 JSON 형식으로 나온다.
이제 VISUAL STUDIO CODE로 가자
자 이제 위도경도를 불러와주자
먼저 latitude,setLatitude 를 useState()로
다음 lonitude,setLongitude를 useState()로 선언해주자 초기값은 없다
트라이 캐치문이 있는데 이것은 에러를 잡아주는것이다 .
크롬에 작성했던
navigator.geolocation.getCurrentPosition((position) => { console.log(position); }를 이용해
setLatitude와 setLongitude에 위도와 경도를 객체로 넣어주자
다음 useEffect로 지금 위에서 getGeolocation을 화면에 렌더링 해주자
그리고 useEffect는 한번만 쓰는게 아니라고 한다 .
콘솔로 크롬 디벨롭툴에서 한번 확인하자 위도경도가 잘나오는지
찾아오진말자
날씨데이터를 불러오자 🛴🚲🛵
weather Data 와 setWeatherData 를 useState 로
그다음
getWeatherData 함수를 만들어서 비동기화 해준다
비동기화 해줄것은 rest API 인 AXIOS로 get 해준다
바로 우리가 아까 가져온 사이트 뒤에 API key는 삭제처리했다
그리고 뒤에 &units&metric 화씨를 섭씨로 변경해준다 안그러면 내가 아래에 도 써놨는데
276도 된다 ㅋㅋ
그리고 지금 get한 Openweather 사이트를 response에 넣어준뒤
setWeatherData에 response.data를 이렇게 객체로 넣어준다
그리고나서 useEffect로 다시 렌더링시켜준다 .
아래 return 반환 이후에 CSS 는 WeatherData 출력을 삼항연산자로
위에 함수가 렌더링되면 이미지를 렌더링 되지않으면 아래 Loading을 띄운다
개노가다 시작
https://react-icons.github.io/react-icons 리액트 아이콘샵
이제 쇼핑과 함께 노가다가 시작되는시간
react icon 에가서 icon 쇼핑을 시작한다
쓰는법은 여기 자세히 나와있다
npm i react-icons나같이 귀찮음이 많은사람은 줄여서 쓰길바랍니다 뒤에 --save는 쓰지않아도 된다 .
터미널에 써야하는거 알죠 ??
다음은 import 다
각각 왼쪽 사이드바에 여러가지 컨셉의 아이콘이 있는데 들어가서 구경한뒤
지금 react icons가 깔려있다면 임포트한뒤 골라서 쓰면된다~!
weathericon을 weatherdata에서 받아오는 icon에 우리가 import한 icon과
textcolor를 넣어준다 .
아 지금 너무 급해서 그냥 집어넣엇는데 sustiring이 아니라 substring이고
첫째 컬러 들어가는 클래스네임에 [ 대괄호 하나 빼야한다 ..
그리고 노가다 ..
임포트와 함께 Openweather 사이트에 나와있는 번호별 날씨icon에 맞게 변경해주면 끝이다 ...
