근처 게시글 조회 - 개발과정

[ 구현한 화면 PNG 파일 ]

https://user-images.githubusercontent.com/84488007/129732122-04af51b5-d7c9-4446-8f44-b1f1d1e06f07.gif

 

[ 설명할 로직 순서 ]

 

1.회원가입시 회원의 주소를 위도,경도로 변환하여 controller로 값 전달

 

1-1) 도로명 주소 API로 주소 sourcefile을 project에 저장 (인증키 적용)

1-2) 주소찾기 버튼에 이벤트 할당 -> 클릭시 API호출후 주소 input태그안에 저장

 

1-3)form 태그 제출시 kakao지도 API기능을 응용 - > 시군구 + 시도의 주소를 위도,경도값으로 변환

mainAddr은 문자열 형태로 주소의 값을 담고 있습니다.

 

1-4) x,y (위도,경도)의 값을 form으로 전달될 input태그에 각각 넣어준후 submit();

 

겪은문제

form으로 전달되는 x,y의 값이 null이다 

 

원인

좌표의 값을 구할때 비동기 형식이기 때문에

값을 가져오기전에 다음 코드가 이미 실행된다

 

해결책

setTimout함수를 사용

0.1~3초정도의 딜레이를 줌

 

 

 

 

 

 

2. 회원가입시 전달한 값을 controller에서 받아 db로 저장

 

( 회원가입 부분은 직접 구현하지 않았기 떄문에 생략)

 

 

 

 

 

 

 

 

 

 

 

3. 접속중인 회원의 위도,경도,id값을 controller로 보내는 방법

 

3-1) 회원 로그인시 postHandler에서 session에 id , 위도 ,경도 를 저장

 

3-2) 메인페이지 요청시 회원이 로그인 중이라면

   JSTL사용 > session조회

3-3) 접속중인 회원의 id,위도,경도 값을 ajax형식으로 controller에 전달

 

 

 

 

 

 

 

 

 

 

4. getNearBoard의 ajax요청에대한 DB값(= 근처게시물) 반환

 

요청 형식

 

4-1) controller에게 바로 전달

4-2) service 계층

4-3) DAO계층

4-4) db조회

* slq

 

 

 

 

 

 

 

 

 

 

5. 카테고리 지정후 검색할경우 카테고리 변경할때 마다 db값 조회

 

5-1) 카테고리 변경마다 ajax요청

 

 

5-2) 어떤값 가져와야할지 controller에서 요청 값 처리

유지 보수가 어려워 좋지않은 코드라 생각됨

 

5-3) db조회

 

겪은문제

점과 점사이의 거리를 구하려 했으나 해결되지 않음

 

원인

지구표면상에서의 거리 => 직선이아닌 곡선의 값 요구됨

 

해결책

삼각함수, radians개념 , 호의길이 구하는 공식, arccos 개념 복습후 

구글에 반경 nkm값 구하기 검색!

 

 

 

 

 

 

 

 

 

 

6. 전달받은 data로 게시글 생성하기

 

6-1) js사용 

 

 

 

 

 

 

 

 

7.  kaka 지도에 게시글이 작성된 장소로 marker생성하기

 

6-1) 지도 생성하기

6-2) 반복문 돌면서 maker 지도에 생성하기

 

 

6-3) 카테고리 검색시 기존마커 삭제후 생성하기