본문 바로가기

Develop47

OpenWeatherMap API, canvas 사용하기 OpenWeatherMap api 사용해서 네이버 날씨랑 비슷한 인터페이스 만들기 도전! 이번 프로젝트 진행하면서 페이지 마무리 하고 있었는데 그래도 명색이 여행지 추천 사이트인데 날씨 정보가 없는게 이상해서 찾아보다가 마침 같이 학원다니는 문배의 추천으로 날씨 api도 쓰기로 결정! 그래서 도전!! 목표는 네이버 날씨처럼 비슷한 UI 구성하기 Openapi를 자주 써봤기 때문에 쉬울줄 알았다.. canvas를 만나기 전까진.. 많은 오류들을 만났고 해결했기 때문에 오류+해결방법으로 구성하겠습니다~ 처음부터 삐걱대면서 시작! 오류1. API 호출openweathermap api 불러올 때 부터 삐걱댔다. 문배의 꿀팁과 구글링을 통해 var url = https://api.openweathermap.org.. 2024. 10. 24.
구글 지도 API 써서 일정 페이지 만들기 팀 프로젝트 완성도를 채우기 위해 촉박한 일정이지만 새로 페이지를 맡았다!  google map API로 여행 일정 페이지를 만드는 작업이였다.. 일단은 완성했으니 공부겸 정리하기! 일단..완성된 페이지jsp로 작업했고 자바스크립트를 70% 넘게 쓴거 같다.   구성 placeholder 걸어놓은 제목을 입력해주세요 부분에 사용자가 입력할 수 있게 했다. (여행 일정 제목)그 밑에 달력으로 날짜를 받게 했는데 달력은 위 코드의 외부 css를 사용했다! 깔끔하고 쓰기 편한거 같다. 버튼 색깔 css정도만 해줬다. 그 밑으로는 google map API를 써서 지도를 넣었다. (마커와 선으로 경로 표시 예정)   지도 밑에는 DAY라는 카드를 만들어서 정렬했고 기본적으로 2개를 놨다. 우측에 일정 추가 버튼.. 2024. 10. 22.
메인 페이지 정리, 페이지 하나로 DB 총 관리하기 (1) 이제 어느정도 페이지 틀은 잡혔고, 기존에 스크립틀릿으로 만든 기능들도 MVC 패턴으로 바꿔놨다. 오늘부터 메인페이지 부분을 수정했고 까먹기 전에 공부 겸 정리하기!인기 여행지 수정하기 먼저 인기 여행지 부분을 수정했다. 인기 여행지 부분에 DB에서 가져온(공공데이터 API로 저장한 여행지) 값들로 채워넣어야 했다.구현하고 싶었던 큰 기능들은1. DB에서 랜덤으로 계속 바뀌면서 출력하기2. 이미지 클릭 시 해당하는 여행지 페이지로 이동하기 정도였다. 충분히 구현할 수 있다고 생각하고 시작! 내 핫플 페이지에서 DB에 저장된 댓글들을 가져온다고 생각하고 비슷하게 만들어 보려고 했다. 이걸 참고해서! MVC 패턴대로 만들어봤다. Controller@Autowiredprivate HotPlaceService .. 2024. 10. 14.
MVC 이해하기 1차 프로젝트는 리액트로 진행했었는데 2차 프로젝트는 JSTL, EL을 사용해서 JSP 페이지로 한다고 해서 그렇게 진행하고 있었다. JSP 페이지는 스크립트릿 (Scriptlet): 을 사용할 수 있다고 해서 JSP 페이지 안에 자바 코드를 계속 쓰면서 프로젝트를 진행하고 있었다. 그런데... 쌤이 MVC 수업을 하시다가 갑자기 이번 프로젝트는 MVC 패턴을 사용해서 진행해야 한다고 하셔서 머리가 하얘졌다.. MVC 패턴이 뭐지? 부터 시작해서 그럼 자바로 만든 걸 다 바꿔야 하는 건가? 나름 좀 많이 했는데.. 하면서 걱정이 되기 시작했다! 하지만 뭐.. 하라면 하면 되고 바꿔야 한다면 바꾸면 되고 공부도 할 겸 한번 해보자! 하고 바로 시작했다! 일단 MVC패턴 개념부터 잡기 위해 다시 정리하면서 .. 2024. 10. 12.
핫플 페이지 마무리 겸 정리하기 (2) (1)에 이어서 (2)도 시작! 5. 이미지 부분이미지 부분은 공공데이터 API를 사용해서 저장한 firstimage 값들을 가져와서 나오게 했다.근데 이미지를 세로로 나열하면 깔끔하지도 않고 보기도 불편해서 슬라이드 형식으로 꾸몄다. 간단하게 https://swiperjs.com 에서 괜찮은 demo 찾아서 사용했다. 사용법은 엄청 간단하다! 메인 페이지 만들때도 썼는데 편하다. 리액트의 npm install slick slider 같은 느낌?상단의 Core 눌러서 들어가면 소스코드를 다 준다! 근데 이름 바꾸면 안되고 정해진 대로 써야지 되는거 같다.상단에 script도 추가해야지 사용할 수 있다. .. 2024. 10. 6.
핫플 페이지 마무리 겸 정리하기 (1) 오늘로서 맡은 페이지를 95% 정도(?) 마무리했다.지금까지 해오면서 어려웠던 것들이랑 기억해야 할 것들을 정리해야겠다.다 했다고 손 놓고 있으면 나중에 남는 게 없는 거 같다. 아는 것도 한 번 더 정리하다 보면 기억에 잘 남으니까 정리 시작!  전체적인 흐름을 먼저 잡고 가는게 보기도 편하고 이해하기 쉬우니까 흐름 먼저 잡기! 먼저 페이지 구성은 이렇게 되어있다.  1. DB저장 흐름가장 먼저 DB저장 흐름먼저 잡아놓고 가면 편할 것 같다.  모든 API는 공공데이터포털 → 한국관광공사_국문_관광정보서비스_GW를 이용했다.(https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15101578) 나는 여기서지역코드 조회 → 지역기.. 2024. 10. 6.

티스토리툴바