개인 프로젝트 2022. 11. 17.
맛집 지도 만들기(9) - 검색 기능 구현 (like, full text search)
📌 공지 본 포스팅 시리즈는 '맛집 지도 만들기' 라는 토픽으로 연재하고 있었으나, 개인적인 사정으로 더 이상 연재하지 않습니다. (변명을 좀 하자면... 최근에 부서이동을 하였는데, 현 부서에선 JAVA, Spring을 사용하지 않아 다른 언어나 기술 공부에 시간을 써야할 것 같습니다. 그리고... 바빠서 허둥대는 사이에 Vue2에서 Vue3로 버전업이 되면서 본 프로젝트 진행 메리트가 사라지게 되었습니다...) '맛집 지도 만들기' 프로젝트는 CRUD + 파일 첨부 + 페이징 + 검색 + 지도 기능 구현을 끝으로 마무리 되었습니다. 읽어주셔서 감사합니다. 질문과 피드백은 언제나 환영입니다. 😇 📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 페이징을 구현하였다. 이번 포스팅에선 ..
개인 프로젝트 2022. 10. 13.
맛집 지도 만들기(8) - 리뷰 목록 페이징 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 파일 업로드 기능을 구현하였다. 이번 포스팅에선 주니어 개발자의 필수코스... 페이징 및 무한 스크롤을 이해하고 구현해볼 것이다. 사이드 바에 페이징 또는 무한스크롤로 구현된 리뷰 목록을 출력할 것이다. 개선된 코드가 많아 포스팅에서 다소 빠진 부분이 있을 수 있다. 모든 소스코드는 깃헙에서 확인할 수 있다! 🍜 기능 및 코드 보완 본격적인 구현에 앞서, 기존에 구현했던 코드를 살짝 수정했다. 🍥 메소드 명 변경 setInputState 라는 Vuex mutaion 메소드 명을 setIsDisabledInput 으로 수정했다. isDisabledInput 상태를 bool 데이터로 set 해주는 메소드 였는데, InputState 라는 ..
개인 프로젝트 2022. 9. 15.
맛집 지도 만들기(7) - 이미지 파일 업로드 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 적용하고, 지도에 리뷰를 출력하고 오버레이를 추가해 보았다. 이번 포스팅에선 사진 파일 업로드/다운로드(화면에 출력) 기능을 구현해볼 것이다. 참고로, 디테일한 부분은 포스팅에서 다소 빠졌을 수도 있다... 자세한 건 깃헙코드를 참고! 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 파일 저장 위치 선정 이미지 파일을 저장하는데엔 크게 두가지 방법이 있다. 파일 시스템 스토리지(storage) 에 업로드 하는 방법. DB엔 해당 파일 관련 정보(크기, 이름, 업로드 시간 등)를 저장. DB에 바이너리 형식으로 파일 자체를 저장하는 것. 어떤 방법을 선택해야할까 고민하다가 좋은 레퍼런스를 찾았다. 파일 저장 방식은 그 파..
개인 프로젝트 2022. 7. 22.
맛집 지도 만들기(6) - 리뷰 지도에 표시하기 및 리뷰 수정, 삭제
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 구현해보았다. 이번 포스팅에선 구현했던 API를 적용하고 OpenLayers의 overlay 기능을 활용해 지도의 아이콘에 hover 기능을 추가할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 API 기능 모듈화 지도에 맛집 리뷰들을 출력시켜볼 것이다. 이를 위해 지난 포스팅에서 구현했던 /api/review/getReviews API를 활용하려한다. 그런데 활용하려니, 저번에 구현했던 try, catch 부터 스피너용 processingCount 까지 증가하는 코드를 반복적으로 구현해야하는게 보기 좋지 않은 것 같았다. 그래서 나는 이 부분을 모듈화해주기로 했다. frontend/src/common 경로에..
개인 프로젝트 2022. 6. 19.
맛집 지도 만들기(5) - CRUD API 구현하기 (feat. Axios, 함수형 컴포넌트)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 클릭이벤트로 주소를 입력 받거나 출력하는 기능을 구현하였다. 이번 포스팅에선 본격적으로 백엔드 기능을 구현해볼 것이다. Spring Boot + MyBatis + MySQL을 연동하고 주소, 후기 및 별점을 저장하거나 불러오는 API를 만들어볼 것이다. 사진 파일 업로드까지는 이 포스팅에서 다루지 않는다. 파일을 다루는 방식이나 (ex. blob) Vue 의 slot 기능을 구체적으로 알아보기 위해 다음 포스팅에서 자세히 다뤄볼 예정이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 Spring Boot, Mybatis, MySQL 연동 이 프로젝트의 첫번째 포스팅에서 언급했던 것처럼 MySQL 이 설치된 상태로 가정하고 진행한다. ..
개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..
개인 프로젝트 2022. 2. 13.
맛집 지도 만들기(3) - 사이드바 UI 구현 (Font Awesome Icon, 글꼴 적용)
📢 들어가며 그동안 게을러져서 포스팅이 살짝 늦었다... 다시 화이팅해보자! 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 화면에 지도를 띄우고 대략적인 UI 틀을 잡았었다. 이번 포스팅에선 구체적인 UI 를 구현해볼 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 UI 설계 이번에도 대충 그려 설계를 해보았다. 지도에서 특정 위치를 선택하고 나면 좌측 사이드바가 활성화되고 위 이미지와 같은 정보를 입력할 수 있게 된다. 사이드 바에선 음식점의 이름, 이미지, 위치정보, 별점, 평가를 보여준다. 🍜 Bootstrap 설치 본격적인 UI 구현을 위해서 Bootstrap을 사용할 것이다. Bootstrap 을 설치해보자. vue add bootstrap-vue Vue CLI3로 설치를 했기..
개인 프로젝트 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..
