개발조각

드디어 JavaScript 간단한 날씨 웹 만들기를 마무리하였습니다. 일주일에 5시간정씩 투자하면서 만들다 보니 3주나 걸리네요... (js가 꼴랑 135줄인데;;;;) 이번 토이프젝을 만들면서 함수 분할을 신경을 쓰다 보니 생각보다 더 걸린 것 같아요. 이번 기회에 자바스크립트 함수 사용에 대해 많이 익숙해진 것 같아 뿌듯합니다. 최종적으로 코드 올리고 마치겠습니다. 날씨 API : https://openweathermap.org/api 날씨 아이콘 : https://darkskyapp.github.io/skycons/ 그 외 아이콘 : https://fontawesome.com/ 구현하고자 하는 기능 시계 구현 현재 위치 현재 온도 현재 날씨 정보 날씨 정보 토대로 스카이콘 띄우기 바람 습도 일출, ..

드디어 마지막!! (다음 편에 마무리 정리 글을 올릴 예정이지만) 이제 날씨 아이콘만 적용하면 끝납니다. (왼쪽부터) "clear-day", "clear-night", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog” OpenWeather에서 이렇게 적용되는 날씨가 많았지만 아이콘이 제 취향이 아니라서 스카이 콘을 적용해서 만들기로 했습니다. 그러나 OpenWeather와 스카이콘에서 제공하는 아이콘이 똑같으면 참 좋으려만... 많이 달라서 무엇을 적용할지가 참 고민됐습니다. 어떻게 만들지 고민 좀 하다가 날씨 메인에 있는 설명은 종류가 많고, 돌고 돌아 결국 OpenWeather의 ico..

이번에는 일출, 일몰 데이터를 가지고 밤, 낮을 구현 해보려고 합니다. 이렇게 낮일 때 밤일 때 css를 다르게 적용해보려고 합니다. 원래는 새로고침 안 해서 자동으로 낮이면 낮 스타일로, 밤이면 밤스 타일로 구현하고 싶었는데, 제 능력의 한계도 있지만 그럴 경우에 전체를 1초마다 업데이트를 해줘야 돼서 컴퓨터에 약간에 부담이 가지 않을까...? 해서 포기를 했습니다. 구현하기 전 간단하게 설명을 하자면 낮과 밤의 시간 낮 : 일출시간 ≤ 현재시간 < 일몰시간 밤 : 그 외의 시간 필요한 값 현재 시간 유닉스 시간을 일반 시간으로 변경한 일출, 일몰 시간 정확한 낮과 밤의 시간을 구하기 위해 현재시간, 일출시간, 일몰시간을 초단위로 변경하여 작업을 했습니다. 현재 시간 기존에 시계기능을 만들었을 때 현재..

이번 날씨 웹을 만들 때 skycons을 사용해보려고 합니다. 스카이콘이 이뻐서 사용해보고 싶더라고요. 그렇지만 설명이 묘하게 불친절해서 사용방법을 헤매다가 드디어 해결했습니다. 스카이콘 링크 Skycons (darkskyapp.github.io) Skycons Skycons Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They’re easy to use, and pretty lightweight, so they shouldn’t rain on your parade: var skycons = new Skycons({"color": "pink"});..

제목은 간단한 날씨 웹 만들기인데 점점 간단해지는 느낌은 아니네요😂 일주일에 하루 엘리스 시간 제외하고 만들려고 하는데 시간이 없어서 못 만들고 있습니다. 이러다가 3주... 4주동안 붙잡을 것 같은 안타까운 예감이 들어요... 저번 블로그에서 현재 위치 날씨 데이터를 가지고 왔는데요. 비동기를 저렇게 두기에 좀 그래서 깔끔하게 async/await로 바꿔보았습니다. 이 기회에 async/await를 써보면 좋을 것 같아서 바꾸기도 했고, 이번에 코드 짜면서 최대한 분리하면서 짜 보려고 노력하고 있습니다. 기존 코드 // 위도, 경도 navigator.geolocation.getCurrentPosition(function(position) { let lat = position.coords.latitude..

자바스크립트로 현재 날씨 API를 가지고 와 보겠습니다. 날씨 API는 아래 사이트를 사용했습니다. 날씨 앱, 웹 만든 사람들 보니까 대부분 openWeather를 사용해서 저도 한번 사용해보았습니다.😊 Сurrent weather and forecast - OpenWeatherMap Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast ..

본격적으로 자바스크립트로 작업을 시작했습니다.😁 디자인 작업에서 줄 친 부분을 보시면 날씨 웹이기도 하지만, 시간도 표시해줍니다. 날씨 API 끌어다가 넣는것보다 시계를 만드는게 빠르겠다고 생각이 들어 시계부터 만들어주었습니다. 구현해야 할 기능 (예시 : 오후 01 : 03) 무슨 요일인지 구현 시, 분 구현 "시"일 경우 오전, 오후 구분하기 시, 분이 10보다 작을 경우 0 붙이기 시계 기능은 아래 블로그를 참고해서 만들었습니다. https://mengkkoit.tistory.com/6 자바스크립트 시계 만들기(현재 시간 가져오기 getDate) 자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는 실시간 시계를 만들어 보겠습니다. 아주 간단합니다 Date Object를 가져와서 시간 분 초를 뽑..

이번에 간단하게 javascript로 날씨 웹을 만들어볼 예정입니다.😊 이번 날씨 웹은 간단하게 만드는거라 반응형으로 안만들었고, 한눈에 보이기 위해 모바일 크기로 제작하였습니다. 저는 디자인 작업 안하면 못만드는 병이 있어서...😅 디자인 작업을 해주었습니다. 디자인 작업은 처음 피그마를 써봤는데 처음 써봐서 좀 버벅거리긴 했지만 그동안 써온 디자인 툴(포토샵, xd)와 유사해서 금방 익숙해졌습니다. (디자인은 핀터레스트를 참고해서 간단하게 디자인해보았습니다.) HTML 서울, 강서구 날씨 아이콘 맑음 바람 습도 container로 모바일 크기를 만들고 top, middle, bottom (3구역)으로 나누어 구성해주었습니다. (svg는 fontawesome에서 가지고 왔습니다.) https://fon..