Weather site 만들기

openweather API를 이용해 날씨 정보를 얻을 수 있는 웹사이트를 만들어 보았다. 사실 API를 사용하는 것에 익숙해지기 위해 시작한 프로젝트였지만 하다보니 쓸데없이 디자인에 꽂혀서 시간을 다 쓴것 같다.. ㅋㅋ 
 
그래도 눈이 내리는 애니메이션과 같은 효과도 찾아볼 수 있었고, API의 사용 등 여러 웹을 풍부하게 만들어주는 방법을 익힌 것 같다. 아 그리고 이번에 만든 사이트를 netilfy에 업로드 했었는데 작년 10월에 만들었던 티스토리 클론 코딩 했던 걸 보게 되었다.
 
그땐 저 정도만 했어도 동네방네 자랑하고 다녔었는데 지금 보니 정말 내가 저걸 왜 자랑하고 다녔을까 하는 창피한 기분도 들고 나름 많이 성장한 것 같아 뿌듯함도 느낄 수 있었다.

---

미리보기
 

weather API에서 받은 날씨 데이터의 종류는 생각보다 엄청 많았다. 예를 들자면 비오는 날도 비 조금, 중간, 많이 와 같이 다양하게 있었고 나는 그걸 총 6가지 기상으로 나누었다. (화창, 구름, 안개, 바람, 비 ,눈) 
 
지금 블로그를 쓰고있는 시간에는 비가 오거나 눈이 오는 지역이 없어서 애니메이션 확인을 위해 일단 버튼으로 대체를 했고 버튼은 지울 생각이다. 
 
또, 그라데이션 배경을 전환할 때에는 트랜지션이 안먹힌다는 것도 알았다. 처음엔 내가 잘못한건가 하고 찾아보니 css에서 지원하지 않아 가상선택자를 이용해 투명도를 조절하는 방법으로 쓰던데 나는 바꿔야 할 색이 다양해서 그 방법은 쓰지 못했다. 
 
아 그리고 문제점이 있는데 비오는 지역을 검색하고 눈 오는 지역을 검색하면 비와 눈 둘 다 내리는 현상이 발생했다. 이건 동영상 다시찍기 귀찮으니 그냥 패스하고 코드에서 다시 고칠 생각이다.
 
진짜 마지막으로 영어 입력만 인식을 하는데 이건 openweather API 가 해외 서버이다 보니 어쩔 수 없는 현상인 것 같다. 보니까 카카오에서 번역 API도 지원하는 것 같던데 그걸 이용하던가 보완할 생각이다. 
 
암튼 사이트 주소는  https://weathercaster-yeonjin.netlify.app/ 이고 고쳐야 할 부분이 있다면 댓글로 알려주세요 감사합니다 ^^