Weather API를 활용한 Weather-App

1.프로젝트 목표

• Weather API를 활용하여 날씨앱을 만들어보자

2.프로젝트에 사용한 기술

• React
• axios
• API

3.프로젝트 기능설명

• 지역을 입력했을때 날씨와 온도를 표시한다

4.알게된점

• API, React의 이해범위를 넓히는데 도움을줬다

5.제작과정

• API사용을 위한 KEY발급
• creat-react-app (react사용)
• axios라이브러리 install ( 비동기이기때문에(async) API와의 통신을 위해사용 )

시작부터 문제구나..... 30분넘게 머리싸매고 코드만 쳐다봤던것같다

${}사용해서 문자열,변수사용할거면 백틱써야한다는걸 잊고있었다 / 해결

input 박스에 무언가를 입력하고 엔터를 누르면(onKeyDown)

API호출 되도록

정상적으로 호출됨을 console.log로 확인

jsx에서 해당값 접근할수있게 state사용

결과값 보여줄 div인데,

Uncaught TypeError: Cannot read properties of undefined

에러가 출력되서 해결법을 몰라서 며칠 찾아봤는데 ....
api통신을 통해서 값을 가져오기 전에 해당 값들은 undifind인데, 이상태로 렌더링을 했기때문에
그런거였다
해결법 : result가 {} 비어있는 오브젝트가 아닐때 띄워보았다
Object.key(result).length != 0 &&( <div~~~)

해냈다....해냈어....

스타일만 추가하면 될것같다

결과물

뿌듯)