프로그래머가 되는 꿈

[로딩 스피너]weather와 weather, 즉 api와 api 사이에 공백기가 생긴다.이때 로딩 스피너를 주면 사용자 유저에게 약간의 인내심을 필요로 한다. 데이터가 도착하기 전에 나온다! 이 로딩 스피너를 구하려면...? true이므로 계속 돌아가고 있다. 만약 false라면? 돌아가는 스피너가 사라졌다!!!

useEffect(() => { if (city == "") { getCurrentLocation(); } else { getWeatherByCity(); }}, [city]); getCurrentLocation()만 실행되어야 하고 getWeatherByCity()는 실행되면 안된다!따라서 if-else문 사용했다. [최종 코드]App.jsimport { useEffect, useState } from 'react';import './App.css';import 'bootstrap/dist/css/bootstrap.min.css';import WeatherBox from './component/WeatherBox.js';import WeatherButton from './componen..

onClick ~ : 내가 어떤 city를 선택했는지 state에 설정해준다. App에 있는 city가 바뀌는 것! 즉, 은 어떠한 state도 가지고 있지 않다. 아무것도 가지고 있지 않는다. 그냥 App이 주는 것만 쓸것임... 여기서...city값이 바뀐것을 App에서 확인할 수 있을까? 지금 에서 setCity를 했는데...이게 제대로 써진거며, 에 있는 city state 값을 바꾼건지 , 즉 값이 바뀌었는지 확인을 해볼까? useEffect()를 하나 더 추가해준다!useEffect(): 컴포넌트의 업데이트를 담당 city state를 주시하고 있다가 city가 바뀌면 useEffect 함수가 호출된다. +++(App.js일부) const getWeatherByCity= async (..

잠깐! 여기서 의문이 생긴다... Button을 여러개 만들면 되는데 왜 array, {cities}를 사용하나?1. 정보가 1000개라면 언제 치고 앉아있나...2. 오타 발생 가능성따라서 다른 데에서도 쓰일 정보들은 따로 모아서 관리해주는게 좋다!cities = [ ]에서 지역을 추가하면 Button에 자동으로 추가되고...!{ } = 자바스크립트를 사용하겠다!map : array함수 - cities에 있는 정보들을 하나하나 차례로 들고온다.버튼의 style : variant 아이템이 천개가 있던 만개가 있던...{item}딱 한줄로 정리가 된다!