Vue 에서 replace() 사용 시 오류

Vue 에서 str.replace() 사용 시 다음과 같은 오류가 난다.

mounted hook: "TypeError: str.replace is not a function"

str.toString().replace("," , ""); 이런 식으로 써야 에러가 해결된다.

[Tips] 위와 같이 replace()를 사용하면 첫 번째 콤마만 빈 칸으로 변환된다.
모든 문자열의 콤마를 변환하려면 정규표현식을 사용해야 한다.
ex) str.toString().replace(/,/gi , "");

Spring Boot, Vue.js deserializer 오류 해결법

Java, MariaDB, Spring Boot, Vue.js 사용 중 났던 에러이다.
프론트 엔드에서 input 타입이 time 인 입력 폼으로 시간을 입력받아 저장하고 불러 올 때 시간의 형식 때문인지 다음과 같은 에러 문구가 떴다.

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.converter.HttpMessageConversionException: Type definition error: [simple type, class java.sql.Time]; nested exception is com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `java.sql.Time`, problem: null
 at [Source: (PushbackInputStream); line: 1, column: 88] (through reference chain: com.upffice.model.ScheduleDto["sche_start_time"])] with root cause

JSON 파싱할 때 시간 형식이 달라서 생기는 문제 같았다. 여러 블로그들을 떠돌다가 해결법을 찾았다.

* 참고 사이트 : https://stackoverflow.com/questions/38777194/jackson-and-java-sql-time-serialization-deserialization/47688916

1. 다음과 같은 클래스를 생성한다.

public class SqlTimeDeserializer extends JsonDeserializer<Time> {
    @Override    public Time deserialize(JsonParser jp, DeserializationContext ctxt) throws IOException {
        return Time.valueOf(jp.getValueAsString() + ":00");    }
}

2. 데이터 model 부분에서 Time 타입의 컬럼에 해당하는 부분에 다음과 같이 annotation을 추가한다.

@JsonFormat(pattern = "HH:mm")
@JsonDeserialize(using = SqlTimeDeserializer.class)
@Column(name = "sche_start_time")
private Time sche_start_time;