[팀 프로젝트] 24.03.06. 노트

1. 서블릿컨테이너의 라이프사이클

서블릿 컨테이너는 요청을 처리한 후에 응답을 보내고 클라이언트와의 연결을 종료한다.

뷰 페이지에서 컨트롤러의 메서드를 요청했는데 return값으로 페이지 주소가 돌아오지 않으면 오류가 발생할 수 있다.

이번 상황은 자바스크립트로 메서드에 매핑한 경우였다.

		function requestAddrArray(areaName, category){
			let xhr = new XMLHttpRequest();
			xhr.open('POST', '/pet_hug/courses/getAddrArray', true);
			xhr.setRequestHeader('Content-Type', 'application/json');
			
			xhr.send(JSON.stringify({areaName: areaName, category: category}));
		}

 

컨트롤러에서는 페이지 주소가 아니라 배열을 리턴했다.

배열은 model.addAttribute로 반환하고 페이지 주소를 리턴하도록 변경해서 해결했다.

 

 

 

 

2. 필요한 주소 배열을 만드는 건 구현했는데 model.addAttribute()로 넣어놓은 게 jsp에서 출력이 안 된다.............

1)메서드 리턴 주소를 redirect로 변경

Failed to load resource: the server responded with a status of 404 ()

 

그리고 왠지 크롬 콘솔에 주소가 이렇게 나옴

http://localhost:8080/pet_hug/course/map?hotelAddrArray=new+kakao.maps.LatLng%2838.2145816310517%2C128.517376650557%29&hotelAddrArray=new+kakao.maps.LatLng%2838.3065279181742%2C128.489706043833%29&hotelAddrArray=new+kakao.maps.LatLng%2838.5434299458659%2C128.405366557568%29&hotelAddrArray=new+kakao.maps.LatLng%2838.317311%2C128.530966%29&hotelAddrArray=new+kakao.maps.LatLng%2838.3055574830105%2C128.540056628509%29&hotelAddrArray=new+kakao.maps.LatLng%2838.3018415909792%2C128.545238987191%29&hotelAddrArray=new+kakao.maps.LatLng%2838.294008171111%2C128.547432446762%29

 

왜 파라미터로 전달하는 거지...? JSON으로 연결해서?

GET 요청이 있으면 파라미터로 전달된다고 한다..redirect로 하면 GET이 되는 건가...

 

 

 

코드를 받아서 해결했다.

 		function requestAddrArray(areaName, category){
		    $.ajax({
		        url: '/pet_hug/courses/getAddrArray',
		        type: 'POST',
		        contentType: 'application/json',
		        data: JSON.stringify({areaName: areaName, category: category}),
		        success: function(data) {
		        	console.log("data : " + JSON.stringify(data));
		            // 서버에서 응답이 올 경우 이곳에 코드를 작성합니다.
		            console.log(data[0]);
		            
		            
					if(category == 'hotel'){
						console.log("응답성공");
					}
		        },
		        error: function(error) {
		            // 에러가 발생한 경우 이곳에 코드를 작성합니다.
		            // 'error' 변수에 에러 정보가 담겨 있습니다.
		        }
		    });
		}

 

그런데 그 다음에서 또 막혔다. 밑도끝도없이 콘솔에 이렇게 출력된다.

kakao.js:17
Uncaught TypeError: a.e is not a function at ya (kakao.js:17:351) at c.lb (kakao.js:77:101) at c.z (kakao.js:122:304) at c.aa (kakao.js:125:279) at c.Lf (kakao.js:178:270) at $.F (kakao.js:121:240) at setHotelMarkers (getMap:231:27) at Object.success (getMap:169:7) at u (jquery.min.js:2:27457) at Object.fireWith [as resolveWith] (jquery.min.js:2:28202)

a.e가 뭔지도 모르겠고 검색해도 각양각색의 문제들이 나와서 도움이 안 된다...

 

좌표의 배열을 동적으로 생성해서 생긴 문제인 건 분명하다. 배열에 저장되는 값을 그대로 전역변수에서 똑같이 선언해놓으면 마커가 문제 없이 출력된다. 그러면 왜 안 되는 거지......

좌표를 직접 입력하지 말고 검색해서 띄우는 식으로 할까...될까 그게?

노가다해서 if문을 72개 만들면 바로 해결은 되겠지만ㅎㅎ 그러고 싶지는 않다......