개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..
개인 프로젝트 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..
Spring/Spring Boot 2021. 6. 3.
Spring Boot + MyBatis + MySQL 연동 방법
📢 들어가기 전에 이번 포스팅에선 Spring Boot + MyBatis + MySql 연동 방법에 대해 알아본다. Intellij Community 에서 진행했다. 다른 IDE를 써도 상관 없다. Spring Boot 가 설치된 환경에서 진행했다. Spring Boot 설치법은 지난 포스팅을 참조. (Nuxt.js + Spring Boot 연동법 포스팅이지만 Spring Boot 설치에 대해서도 다루고 있다.) 🧱 MySQL, MyBatis Dependency 주입 pom.xml의 dependencies에 아래 코드를 추가하자. mysql mysql-connector-java 8.0.16 org.mybatis.spring.boot mybatis-spring-boot-starter 1.3.2 mysql-..
