UI
상세설명
- 앱이 실행되자마자 유저는 현재 위치의 날씨를 볼 수 있다. (지역, 온도, 날씨 상태)
- 유저는 다른 도시의 버튼을 볼 수 있다. (현재 도시, 4개 도시)
- 유저는 다른 도시 버튼을 클릭하면 해당 도시의 날씨 정보를 볼 수 있다.
- 유저는 데이터가 로딩될때 로딩 스피너를 볼 수 있다.
- 현재위치버튼을 누르면 다시 현재위치 기반의 날씨가 나온다.
Teck Stack
React, JavaScript, CSS
코드정리
현재 위치불러오기
Geolocation API는 사용자의 현재 위치를 가져오는 API로 getCurrentPosition()매서드를 통해 사용자의 위치를 가져온다. 날씨 api를 불러오기 위해선 경도와 위도 정보가 필요하여 변수 lat과 lon을 생성해 각각 위도와 경도 정보를 넣어주었다. 성공적으로 불러와졌는지 확인하기 위해 새로고침하고 console을 보았다.
성공적으로 불러와졌다. 이제 해당 정보를 이용해 현재 위치의 날씨도 불러와보자.
현재 위치의 날씨 불러오기
먼저 api를 불러오기 위해 API호출 개념을 알아야했다.
공부한 내용을 참고해 OpenWeather사이트에 들어가서 API를 받아왔다.
(참고! OpenWeather의 Current Weather Data API를 이용, 해당 api는 무료이며 회원가입시 본인의 api키값을 받아서 함께 써야한다.) 현재위치 매서드에 lat과 lon값을 getWeatherByCurrentLocation()매서드에 보내줌으로써 현재 위치에서의 날씨를 불러올수있다. 이번에도 확인을 위해 console창을 열어보았다.
현재 위치 부산, 날씨 맑음 성공적으로 나왔다!
이제 이것들을 기반으로 다른 나라 도시의 날씨를 불러와야한다.
여러 나라 도시의 날씨 불러오기
먼저 내가 불러올 도시들을 cities 객체에 배열로 담아뒀다. (이 도시들은 배열함수(map())를 써서 한꺼번에 출력해줄수 있도록 했다.)
그리고 선택한 도시가 정보가 뜰수 있도록, 실시간으로 변화하는 날씨를 담을 수 있도록 useState를 호출하고 초기값은 null로 설정한다. (도시를 선택하지 않았을때는 현재 위치의 날씨가 뜨기위함)
이제 사용자가 도시를 선택할 수 있도록 버튼을 생성하기위한 WeatherButton컴포넌트를 만든다.
WeatherButton은 cities와 setCity를 받아오고 버튼을 클릭했을시 cities의 배열이 선택된 아이템(city)을 불러올수있도록 map()를 사용했다. 버튼을 클릭하여 선택된 아이템(city)를 setCity()안에 매개변수로 넣고 이것을 이용할 것이다.
getWeatherByCity매서드안의 도시 날씨를 불러오는 api도 OpenWeather에서 구했다.
본인은 도시이름을 넣을 것이기에 첫번째 코드를 복사하였고 q={city}로 수정하였다.
&units=metric //사용자가 보기 편리하도록 섭씨온도로 불러오는 방법. url주소에 붙여준다.
화면에 보여줘야할 데이터들에 대한 api호출을 위해 useEffect를 이용한다. if문을 사용하여 city가 비어있을 시 현재위치호출매서드인 getCurrentLoation()를 호출하고 그렇지않다면(사용자가 city를 선택했을 시) 선택한 도시의 날씨 api를 가져오는 매서드인 getWeatherByCity()를 호출한다.
위의 WeatherButton컴포넌트 코드를 보면 Current Location버튼에 클릭이벤트를 주었다. 현재 위치를 불러오는 것인데 이를 위해 handleCityChange매서드를 생성하여 city가 "current"일때 setCity를 초기값으로 만들어 getCurrentLoation()매서드를 불러오게 하였다. 이것을 통해 사용자가 Current Location을 눌렀을때 클릭이벤트로 handleCityChange에 "current"을 보내주어 현재위치와 그 곳의 날씨 정보를 불러오게되는 것이다.
조건부 렌더링
사용자가 원하는 도시를 선택하여 해당되는 정보를 보기위한 UI를 그려줘야한다. 이를 위해 weatherBox컴포넌트를 생성했다.
자바스크립트에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다.
OpenWeather Api가 주는 정보를 살피면 기온을 소수점으로 주는 것을 확인했다. 아무래도 사용자한테 (영하가 아닌 때) 정수형태로 보이는 것이 좋을 것같다고 판단하여 삼항연산자를 이용해 weather의 main에 있는 temp(기온)값이 0초과할 때는 소수점을 잘라서 값을 반환할수있도록 Math.floor()함수를 이용하였다.
결과물
