[Javascript] Javascript Date → Java LocalDate/LocalDateTime 변환 오류

프로젝트를 진행하다가 자바스크립트에서 Date 타입 변수를 자바로 보낼 때 typeMismatch 에러가 발생하였다.

사내 프로젝트를 진행하다가 발생한 에러이기 때문에 간단한 예제로 해당 오류를 재연해 보았다.

 

 

에러

Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult

typeMismatch

Field error in object 'reservation' on field 'checkInTime'

Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult: 3 errors
Field error in object 'reservation' on field 'checkInTime': rejected value \;
codes [typeMismatch.reservation.checkInTime,typeMismatch.checkInTime,typeMismatch.java.time.LocalDateTime,typeMismatch];
arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [reservation.checkInTime,checkInTime];
arguments []; default message [checkInTime]]; default message 
[Failed to convert property value of type 'java.lang.String' to required type 
'java.time.LocalDateTime' for property 'checkInTime';
nested exception is org.springframework.core.convert.ConversionFailedException: 
Failed to convert from type [java.lang.String] to type [java.time.LocalDateTime] for value
'2021-08-01T17:27:49.726492'; nested exception is java.lang.IllegalArgumentException: 
Parse attempt failed for value

 

 

원인

자바스크립트에서 보내는 변수의 형식이 자바에서 LocalDate 혹은 LocalDateTime으로 받는 타입과 맞지 않아서 발생하였다. 

 

 

해결

1) @DateTimeFormat(pattern="yyyy-MM-dd") 이용

 DateTimeFormat 어노테이션을 달아주고 pattern에 내가 원하는 데이터 포맷을 입력하면 된다.

 

 

 

 

 나는 LocalDate를 사용했지만, LocalDateTime을 사용하고 싶을 경우 아래 예시와 같이 뒤에 HH:mm:ss를 붙여주면 된다. 초는 필요 없이 시,분 까지만 받고 싶다면 `HH:mm` 까지만 입력해주면 된다.

@DateFormat(pattern='yyyy-MM-dd')
private LocalDate today;

@DateFormat(pattern='yyyy-MM-ddTHH:mm:ss')
private LocalDateTime todayTime;

@DateFormat(pattern='yy-MM-dd HH:mm')
private LocalDateTime tomorrow;