코드 정리/Spring Framework

8. SpringMVC - 나의 위치 정보 저장

@르르 2023. 1. 29. 14:59

 

구현할 기능 

: 버튼을 눌렀을 경우, 자신의 현재 위치를 데이터 베이스에 저장한다. 

 

사용한 API 

 : geolocation, 카카오 지도 API 

 

전체적인 흐름 

 : gelocation을 통해 사용자가 위치하고 있는 위,경도 좌표를 얻은 후 → 카카오 지도 API를 통해 한글주소로 변환 후 → Ajax통신을 통해 데이터베이스에 반영하도록 한다. 

 

 

▼ geolocation 시 참고사항

크롬 50버전 이후에서는 보안적 이슈로 인해 geolocation은 https 환경 또는 로컬환경에서만 작동됩니다. 

웹 브라우저 크롬, 사파리 등이 사용자의 위치 정보를 수집하는 것도 개인정보를 수집하는 것으로 분류하기 때문에 https 환경에서만 작동 가능하게 하였습니다. 

 

 

JSP 

 

- 나의 정보 저장하기 버튼을 눌렸을 때 실행되는 함수 

- clickBtn() → geolocation을 통해 사용자 권한 요청 후 동의시 위경도 값을 얻어낸다. 

- getAddr() → 전달받은 위경도 값을 통해 한글주소로 변환한다. 

- sendAddr() → address를 가지고 서버에 POST 방식으로 요청한다. → 컨트롤러로 address를 가지고 요청하게됨 

 

- Ajax 통신 후 가져온 결과가 1일 경우 → 위치 저장 완료 , 결과가 2일 경우 → 로그인이 필요한 서비스 로직 수행 

 

function clickBtn(){
	window.navigator.geolocation.getCurrentPosition(function(position){
		
		var lat = position.coords.latitude;
		var lng = position.coords.longitude;
		
		console.log('address.jsp clickBtn');
		
		
		// 카카오 api test
		getAddr(lat,lng);
		
		//document.getElementById('target').innerHTML=lat+","+lng;
		console.log(lat+","+lng);
		console.log(position);
		// document.write(lat +","+ lng);

	},
	function(error){
		switch(error.code){
		case error.PERMISSION_DENIED:
			str="사용자 거부";
			break;
		case error.POSITION_UNAVAILABLE:
			str="지리정보 없음";
			break;
		case error.TIMEOUT:
			str="시간 초과";
			break;
		}
		document.getElementById('target').innerHTML=str;
		
// 		document.write(lat);
// 		document.write(lng);
	});
}

function getAddr(lat,lng){
     let geocoder = new kakao.maps.services.Geocoder();

     let coord = new kakao.maps.LatLng(lat, lng);
     let callback = function(result, status) {
         if (status === kakao.maps.services.Status.OK) {
				console.log(result[0].address.address_name);
				sendAddr(result[0].address.address_name);
         }else {
			//console.log('통신 실패');
			alert('위도 경도를 불러오는데 실패하였습니다.');
		 }
     }
     geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
 }
 
function sendAddr(address) {
	console.log('sendAddrfunction in');
	 $.ajax({
		 type: "POST",
		 url: "/member/sendAddr",
		 data: {
			 "address" : address
		 },
		 success: function(result) {
			 console.log(result);
			 if(result == 1) {
				 alert("위치 정보를 저장하였습니다.");
				 location.href('/member/mypage');
				 // location.href='/member/mypage
			 }
			 
			 if(result == 2) {
				 alert("로그인이 필요합니다.");
				 location.href('/member/login');
			 }
		 },
		 error : function(request, status, error) {
			 alert('서버 에러 발생');
		 }
	 })
	 
	 
 }

 

 

 

 

Controller

 

- Ajax 통신 요청시 address 정보를 가져와 데이터베이스에 반영하도록한다. 

- MemberVO객체를 생성하고 address를 저장한다. 

- session의 사용자 아이디가 존재할 경우, MemberVO에 사용자 아이디를 저장한다. 

     → Ajax 통신의 응답의 결과로 1을 리턴 (데이터베이스 반영 완료)

- session의 사용자 아이디가 존재하지 않을 경우

     → Ajax통신의 응답의 결과로 2를 리턴 (로그인 필요) 

 

@ResponseBody
@RequestMapping(value="/sendAddr", method=RequestMethod.POST)
public int sendAddr(@RequestParam("address") String address, HttpSession session, HttpServletResponse response) throws Exception {
				
					
	MemberVO vo = new MemberVO();
	vo.setRoadFullAddr(address);
					
	if(session.getAttribute("user_id") != null) {
		vo.setUser_id(session.getAttribute("user_id").toString());	
	} else {
			return 2;	
	}
					
	service.saveAddr(vo);
			return 1;
}

 

 

 

 

Service, Impl & DAO, Impl

 

 

// Service 
public int saveAddr(MemberVO vo) throws Exception;

// ServiceImpl
@Override
public int saveAddr(MemberVO vo) throws Exception {
									
	return dao.saveAddr(vo);
}

 

 

// DAO
public int saveAddr(MemberVO vo) throws Exception;

//DAOImpl
@Override
public int saveAddr(MemberVO vo) throws Exception {
	return sqlSession.update(NAMESPACE+".saveAddr",vo);
}

 

 

 

 

mapper

 

- update 쿼리 구문 작성 

 

<update id="saveAddr" >
		update mfg_member set roadFullAddr=#{roadFullAddr}
		where user_id=#{user_id}
</update>

 

 

 

 

 

▼ 로그인 하지 않았을 때

 

 

 

▼ 로그인 후