프로젝트 코드 변경 사항 및 메모 #10 - fullCalender.js list plugin 사용 2탄 / 자바스크립트 replaceAll

 

org.springframework.validation.BindException:

ajax로 값을 넘기려고 하는데 object형으로 넘어가서 fullCalendar 객체로 의존성 주입이 바로 되지 않음. 

			
			// 일정 추가
			$('#eventBtn').on("click", function() {
				var param = $("#addEventForm").serialize();
				console.log(param); 			
					$.ajax({
						url:'/setak/admin/addEvent.do', 
						type:'POST',
						data:param,
						dataType:'text', //리턴 데이터 타입
						contentType:'application/x-www-form-urlencoded; charset=utf-8',
						success:function() {	
							alert("성공");
						},
						error: function() {
							alert("ajax통신 실패");
					    }
					});	
				
			});

@RequestMapping(value = "/admin/addEvent.do", method=RequestMethod.POST, produces="application/json;charset=UTF-8")
@ResponseBody
public String addEvent(FullCalendar cal) {

}

1의 방식으로 보내고 2의 방식으로 받으려고 했는데 그렇게 되지 않았음.

그래서 따로 따로 받는 방식을 사용하려고 하다가 콘솔에 찍힌 날짜 데이터 모양이 2020-05-29 이런 식인걸 확인하고 20/05/29 이렇게 보내면 제대로 들어가지 않을까? 라는 생각을 하게 됨. 그래서 자바스크립트 단에서 데이터 포맷을 변경해주었다. 

 

그 때 알게 된 것 자바스크립트 replaceAll 메소드를 대신하는 정규식 

> var start = $("input[name=start]").val().replace(/-/gi, "/");

그냥 replace("-","/"); 메소드를 사용하게 되면 가장 앞에 있는 - 만 / 로 변경이 됨.  

 

자바 컨트롤단에서 출력해 본 건데 Date 형식으로 제대로 들어 간 것을 확인 할 수 있었다. 자바스크립트에서는 20/05/29 이런식으로 들어가도 자바에서는 이런 식으로 출력 됨. (Date형식이니까!)

그런데 이제 문제는 날짜가 제대로 저장ㅈ이 되지 않았다. 분명히 저렇게 출력 되는 걸 확인했는데

 

20/05/29 20/05/30 > 31/08/05 30/08/05

이런식으로 들어간다는 것은 뭔가 숫자의 문제 같다. 년/월/일이 아니라 일/월/년 이런식으로 되어야 하는건가. 아니 그렇다면 왜 보이는거는 다 저런식으로 출력이 되냐고. 어이가 방구입니다. 우선 진정하고 재조립한 뒤에 보내보기로 한다. 

변경해서 넣었지만 뭔가 잘 못 되었다는 확신만 줬고 뭐가 잘못 됬는 모르겠음. 

 

	public String addEvent(String title, String start, String end) {
	}

결국 이런 식으로 따로 받아서 해결했음. 의존성 주입을 위한 방식은 더 찾아봐야 할 듯.

여튼 추가하는 방법은 찾았고 추가가 되는 걸 확인 했는데 새로고침 이 외에 다른 방식으로 추가 된거 확인하는 방식을 생각하는게 다른 과제.

 

 

일정을 클릭했을 때 수정 할 수 있도록 하는 것도 다른 문제. 

 

				      eventClick: function(info) {
				    	    
				    	  	if(confirm("수정하시겠습니까?")) {
				    	  		var msg = updateEvent(info);
				    	  		alert(msg);			
				    	  	}else {
				    	  		info.revert(); 
				    	  	}
				    	  }
                          
                       
		function updateEvent(info) {
			var id = info.event.id; 
			var start = info.event.start;
			var send = info.event.end;
			
			var msg = id + ' ' + start;
			return msg; 
		}

이 부분 사용하면 클릭해서 사용하는거 가능. 

 

근데 너무 또 여기에 집착하는 건 벗어나는 행위 같아서 일단 여기서 그만하고 다른 것들 하려고한다. 

일단 프로젝트 코드 수정은 이정도까지 하는 걸로 👍