Toy Project 005 Weather app using API

🎯 API를 이용하여 Weather app 만들기 도전!

😎 Result

• OpenWeatherMap API사용하기
• 현재 위치 사용 허용 시, 실시간 현 위치의 날씨 알려주기
• 검색창에 도시명 입력하면 실시간 그 지역 날씨 알려주기

🖍 Javascript

1) 현재 위치(위도, 경도)로 API에서 정보 가져오기

2) 도시명으로 API에서 정보 가져오기

🧾 기록하고 싶은 것

• navigator.geolocation: 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 Geolocation 객체를 반환
• navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능
• navigator.geolocation.getCurrentPosition(콜백 함수) : 위치 정보를 얻기에 성공하면 콜백함수가 실행된다. 실패 했을 때 실행되는 함수는 옵션
• position.coords의 속성에는 latitude, longitude, altitude, speed 등이 있다.

💭 What I learned from this..

외부 API를 사용할 줄 알면 다양한 주제로 변형이 가능하기 때문에 꼭 해보고 싶었다.
검색 지향 개발자 되기를 연습하고 있기에 새벽2시가 다 되어서야 다 만들고 이 벨로그에 기록을 남기지만 잠들기 전까지 목표를 달성해서 세상 뿌듯하다.

구현한 것 이외에도 일출, 일몰시간, 미세먼지까지 추가하고 싶었는데, 너무 많은 정보는 안주니만 못할 것 같아 다음번 토이프로젝트에서 하는것으로 결정하고 커밋하였다.

그리고 최근에는 자바스크립트 공부를 시작하면서 페이지를 만들 때 UI보다 기능적인 것에 포커스를 맞췄었는데, 내가 만든 기능이 더 멋있게 보이게 하려면 CSS도 꾸준히 공부해야겠다는 생각도 하게 되었다.

내일은 또 어떤 새로운 것을 배우게 될 지 너무너무너무 설렌다.