무야홍 ~

에러 확인 프로젝트 진행 시 아마 가장 많이 마주쳤던 에러 메세지 였던 것 같다. Uncaught TypeError: Cannot read properties of undefined (reading 'temp') 에러를 살펴보면, {cod: ‘400’, message: ‘Noting to geocode’} 이 에러는 useEffect 관련 에러인데, useEffect 는 처음 렌더링 시 특정 작업을 실행할 수 있도록 하는 Hooks 이다. 코드의 작동 순서는 위에서 아래로 내려가기에 먼저 getCurrentLocation 함수가 실행이 된다. 차순으로 getWeatherByCity 함수가 실행...

에러 확인 변화하는 값을 관리하기 위해 useState Hooks 를 사용할때 발생한 에러이다. 먼저, State 값에 빈 값을 정의하기 위해 null 값을 부여하고 초기 값은 모르기 때문에 null 지정 Weather 데이터를 생성한 컴포넌트인 WeatherBox 에서 보여주어야 하기 때문에 Props 를 사용해 weather 데이터를 WeatherBox 에 보내준다. 여기서, Props 라는 object 안에서 weather 데이터를 가져오기 위해 ES6 문법인 Destructuring 을 사용하여 넘겨준다. 데이터를 확인 해 볼까? 가져온 weather 데이터에서 필요한 정보...

UI 제작 Reference https://bitna-weather.netlify.app 먼저, 각각의 Element 들을 제작하기보다 Bootstrap 을 활용하여 UI 를 제작하려 한다. npm install react-bootstrap bootstrap Bootstrap 과 React-Bootstrap 의 차이 Bootstrap은 상태값과 클래스를 사용하고, React-Bootstrap은 function과 hooks를 사용한다. React-bootstrap 은 리액트에 최적화 되어있으며 컴포넌트에 초점을 맞춰 제작되어 가독성이 좋고 다양한 애니메이션 구현시 더 유용하다. Refere...