개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..
개인 프로젝트 2021. 12. 5.
맛집 지도 만들기(2) - OpenLayers 지도 띄우기
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 개발 환경 설정을 했었다. 이번 포스팅에선 UI 틀을 잡고 OpenLayers를 활용해 지도를 띄워 볼 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 UI 구성 대략적인 UI를 설계해보았다. 전체 화면에 꽉 차는 느낌으로 지도를 띄운다. 좌측엔 맛집에 대한 정보를 기록/출력하는 사이드 바가 있다. 사이드 바는 드래그로 크기를 늘렸다 키울 수 있다. 사이드 바는 버튼으로 최소/최대화가 가능하다. 사이드 바는 지도 위에 띄우고 Opacity(투명도)를 두어 지도 위에 띄운다는 느낌으로 구현한다. 사이드 바 안에 들어갈 구체적인 내용은 추후 생각해볼 예정이다. 원하는 대로 가능할지는 모르겠지만 대략적인 UI 틀은 이렇다. 🍜 Ope..
개인 프로젝트 2021. 11. 27.
맛집 지도 만들기(1) - Spring Boot + Vue.js 설치 및 연동하기
📢 들어가며 이번 포스팅에선 맛집 지도를 개발해볼 것이다! 🤤 작성한 코드는 github에 업로드 해 두었다. 스펙은 다음과 같다. IDE Intellij IDEA Ultimate FrontEnd Framework Vue.js BackEnd Framework Spring Boot DB MySQL(MyBatis) 주요 라이브러리 OepnLayers Bootstrap OS Windows 10 🚨 참고 본 포스팅 프로젝트는 미완된 채 연재 마무리되었습니다. 웬만한 주요 기능은 대충 구현되어 있으나 배포까진 다루지 않습니다. 🍜 개발 환경 설정 본격적인 개발에 앞서, 개발 환경을 설정해보자. (JAVA(v11), MYSQL(v8), Node.js(v14.4.0)은 설치되어 있는 상태에서 진행했다.) Spring..
