산책로 공유 서비스 WWW(Walking With World)
내 주변의 산책로를 다른 사람과 공유할 수 있는 서비스
https://github.com/Team5Project/WalkingWithWorld
제공 기능
산책로 검색
검색 결과 조건 필터
회원가입/로그인
리뷰 작성(수정, 삭제)
댓글 작성(수정, 삭제)
산책로 공유글 작성(수정, 삭제)
목표
기존 지도 서비스에서는 제공하지 않았던 나만의 산책로를 생성하고 공유하는 기능 제공
맡은 역할
산책로 검색, 산책로 공유글 작성(수정, 삭제), 검색 결과 조건 필터
ERD
화면 구성
개발 환경
과정
-
카카오맵API를 사용하여 사용자에게 경로를 입력받는 기능이 있다. 입력받은 경로를 산책로 상세보기 페이지에서 다시 보여주어야 하는데 이 부분을 구현하기 위해 DB일부를 수정하였다. map 테이블의 latlngs, course를 coordinateX, coordinateY라는 x좌표와 y좌표를 받는 것으로 변경하고 walking-paths 테이블의 산책로 게시글의 id를 참조하여 좌표 갯수만큼 생성되게 하였다.
지도를 입력받는 기능은 선의 거리 계산 기능을 이용하여 좌표값과 거리, 시간을 함께 입력받게 했다. 입력받은 지도를 보여주는 기능은 선 그리기 기능을 이용하여 좌표값을 선으로 이어 보여주게 하였다. -
산책로 게시글을 검색하고(검색어 없이 전체 조회를 하는 경우도 포함) 사용하는 조건 필터는 Join과 Subquery 중 Join을 활용하였다. 조인과 서브쿼리 비교 링크
-
조건 필터에 사용할 양방향 슬라이더를 만들었다(참고링크). 실제 입력을 받는 range는 두 개가 있고, 사용자가 보고 동작시킨다고 생각되는 양방향 슬라이더를 div 태그로 만드는 원리이다.
-
산책로 게시글 DTO에는 게시글의 정보와 사진 DTO 리스트를 가지고 있다. 게시글은 항상 사진과 함께 보여지기에 사진 리스트를 게시글 DTO에 추가하였는데, 지도 정보의 경우 필요한 경우에만 가져오게 하기 위해 산책로-지도 게시글 DTO를 추가하여 지도 DTO 리스트도 가지게 하였다.
-
산책로 입력폼 제작.
-
페이지네이션(페이지네이션 정리) 진행.
-
게시글 수정/삭제하기에 인증된 사용자만 접근할 수 있도록 수정하였다.
-
게시글 읽기/수정하기에 존재하지 않는 데이터에 접근하지 않도록 수정하였다.
-
컨트롤러에서 사용되는 중복된 코드를 비즈니스 로직을 수행하는 service 컴포넌트로 분리하였다.
-
게시글 작성/수정/삭제 후 사용자에게 보여줄 확인메시지를 추가했다.
구현한 주요 내용
맵 그리기
카카오맵 API를 이용하여 사용자가 입력한 값의 좌표 배열을 컨트롤러에서 받아 DB에 저장하게 하였다. 사용자에게 보여줄 때는 좌표 배열에서 값을 하나씩 꺼내 선을 그려 잇게 하였다.
조건 필터
조건 필터 내용을 받아올 DTO를 새로 만들어 지역/최소 소요 시간, 최대 소요 시간/최소 거리, 최대 거리를 사용자에게 입력받고 해당 조건에 해당하는 산책로 게시글을 받아와 AJAX를 이용해 보여주게 하였다.
배운점
DB update시 주의할 점 : 사용자의 입력 값으로 DB에 있는 데이터를 바로 수정하지 않는다. 해당 프로젝트에서는 사용자가 입력한 값 DTO와 DB에서 꺼내온 DTO를 이용해 수정된 부분만 변경하여 update되게 하였다.
수정/삭제 기능에서 주의할 점 : 예상하지 못한 접근 막기. 해당 프로젝트에서는 사용자의 id를 참조하여 수정/삭제 동작 버튼이 보이게 하였는데 버튼을 이용하지 않고 직접 수정/삭제 하는 부분에 대한 방어 코드가 없어 예상하지 못한 동작이 발생할 위험이 있었다. 수정/삭제 기능 전 인증된 사용자인지 확인하도록 수정하였다.
인덱싱(참고링크1, 참고링크2)을 적용하는 방법에 대해 공부하였다. 해당 프로젝트에 적용하고자 했으나 조금 더 학습이 필요하다.
