날씨앱3

위 목록들은 날씨앱2에서 고칠것들을 적어놓은 목록이다.

우선은 2번이 완료되었다.

openweatherAPI의 url을 두개사용하였다.

 

로딩

 

동작

새롭게 추가한것들

초기값은 사용자의 위치의 날씨로 설정하였고, 사이드바의 검색창에 도시를 입력하면 그 이후는 그 도시의 날씨가 렌더링되도록 url을 2개 사용했다.

<datalist>태그를 사용했다.

 

 

시간 1초마다 업데이트

영상은 gif만들기 귀찮아서 다음에 한번에 올리도록하겠다.

    const [time,setTime] = useState('')

    function getClock(){
        const date= new Date();
        const hours = String(date.getHours()).padStart (2,"0");
        const minutes = String(date.getMinutes()).padStart(2,"0");
        const sec = String(date.getSeconds()).padStart(2,"0");
      
        setTime(`${hours}:${minutes}:${sec}`)
      }
    setInterval(getClock,1000);  
    .
    .
    return (
        <WeatherBox>    
            <div className = 'superBigFont clock'>{time}</div>
            .
            .

고칠것:

 

외국도시(ex : new york) 검색해도 한국시간이 나온다. 고치자.

 

포스트맨으로 보니까 openweathermapAPI에 나오는 유닉스시간은 뉴욕시간이 아닌것같은데??

 

나중에 꼼꼼히 확인해보자.

 

 

 

 

 

옆에서 볼 수 있듯 new york을 두번검색하면 목록안에 new york이 2개가 생긴다.

 

중복되는 항목은 추가되지 않도록 해야겠다..

 

이래서 기업들에서 코테를 보나보다.