목업과 실제 구현한 화면과의 차이
- 최고온도와 최저온도 => 체감온도 변경
https://openweathermap.org/API 을 통해 받은 API를 이용했다.
예시 :
{"coord":{"lon":126.9778,"lat":37.5683},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"stations","main":{"temp":265.49,"feels_like":257.57,"temp_min":265.15,"temp_max":266.15,"pressure":1023,"humidity":35},"visibility":10000,"wind":{"speed":6.17,"deg":300},"clouds":{"all":0},"dt":1610179428,"sys":{"type":1,"id":8105,"country":"KR","sunrise":1610146022,"sunset":1610181045},"timezone":32400,"id":1835848,"name":"Seoul","cod":200}
이런식으로 데이터를 받아오는데 ' "temp_min":265.15,"temp_max":266.15 ' 부분을 보고 최고온도 최저온도라고 생각하고 구현했다. 캘빈온도로 표기되어 있어서 섭씨온도로 바꿨는데, 현재온도와 최고, 최저온도가 모두 같은 숫자가 되었다.
홈페이지에 들어가서 가이드라인을 보니 해당 데이터는 최고 최저온도가 아니라
측정 순간(현재)의 온도였다. 즉 온도 오차범위로 이해하면 된다.
그래서 체감온도로 변경하게 되었다.
- 버튼추가
목업부분에는 input 박스만 있고, 버튼은 따로 없었다.
페어와 나는 검색어를 입력할 때마다, onkeydown 이벤트를 통해서 결과가 나오게 하려했다.
그런데 막상 이벤트가 잘 실행되는지 console.log 를 통해서 확인하는데, 너무 많은 결과가 출력되어, 쓸데없이 너무 많이 함수를 호출한다고 생각해서 버튼을 추가하자고 의견을 냈다. 심지어 입력된 값을 지울때도 각각 결과가 출력되었다.
이미지변경
맑음과 흐림에 따라서 이미지가 변경되게 만들었다.
(이미지는 내가 직접 찍은 사진이다.)
-
맑을 때
-
흐릴 때
오늘 우리나라 날씨가 전부 맑아서 국외 흐린 곳을 검색했다.
보다보니 내가 만든 계산기와 색감이 비슷하다. 많은 색들 중에 자꾸 하늘색을 고르게 된다.
사실 오늘까지도 해외날씨까지 검색되는지 몰랐다.
생각해보면 당연한건데도, 우리나라 주요도시들만 검색해봤다. ㅎㅎ
흐릴때의 이미지도 보여주고싶은데 오늘 날씨가 다 맑아서 슬퍼하다가 혹시 외국도 되나? 해서 검색해봤는데 데이터를 잘 받아오는 걸 볼 수 있다. 현재 런던은 우리나라보다 따뜻하다.
- 21.03.12 : 아래 코드를 통해 아이콘을 적용시켰다.
document.querySelector('img').src
= `http://openweathermap.org/img/w/${json.weather[0].icon}.png`
검색어를 데이터와 연결
코드스테이츠 강의화면에서는 city id 를 이용해서 데이터를 받아오는 걸로 되어있는데.
사이트 해당부분 바로 위에 city name 으로 데이터를 받아올 수 있는 방법이 명시되어 있다.
사실 함께 과제를 진행한 페어가 알려줘서 알았다. 이걸 몰랐다면, 나는 아마 주요도시들에 대한 id를 다 받아온 후, 도시 이름을 입력받을 때마다 해당 id로 바꾸는 코드를 작성했을 것이다. 역시 홈페이지를 꼼꼼히 읽어봐야 한다.
예시 :
api.openweathermap.org/data/2.5/weather?q=London,uk&appid={API key}
London 부분에 입력값이 들어가게 코드를 작성하면 된다.
느낀점
- 한 달동안의 시간이었지만 엄청난 발전을 했다고 생각한다.
파이썬으로 독학했던 나는 자바스크립트는 왜
function print() {
console.log('hello world')
}{} 를 저런식으로 늘어서 쓰는지 의구심이 들었었다.
하지만 지금은 저렇게 쓰는 방식을 좋아하게 되었다.
- 프로젝트를 잘 해낼 수 있다는 자신감이 생겼다.
요즘 어떤 프로젝트를 진행해야 할지 고민을 하는데, '어떻게 원하는 데이터를 가져올까' 였다.
그런데 이렇게 API 강의와 과제를 통해, 궁금했던 점을 해소했다.
내가 원하는 데이터가 공개되어 있는지는 알아봐야겠지만, 정말 유익한 커리큘럼이라고 생각한다.
