React과 Spring 사이, Date format

Front와 Back을 나눠서 개발하는 경우 데이터의 자료형이 발목을 잡는 경우가 많다. 

 

자주 사용하는 Int와 String은 자료형이 고정적이라 에러가 자주 발생하지 않지만, API를 자세하게 읽어보지 않은 경우 그리고 API가 친절하게 설명되지 않은 경우 에러가 발생한다.

 

React로 웹 어플리케이션을 만들고 Back에 있는 데이터와 상호작용 할때 date format 이슈에 대해 해결한 방법을 공유하고자 한다.

 

문제상황

---

HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미합니다.

 

React와 axios를 사용하여 Back과 통신하신다면 https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400

400 Bad Request

모질라 공식문서를 확인하여 문제상황을 인지하고 해결 전략을 세우시길 바랍니다.

 

해결방안

---

400에러를 해결할 수 있는 방법은 문제상황에서 알 수 있듯, Bad Request(형식에 맞지 않는 요청)을 Good request(올바른 형식의 요청)으로 바꿔주는 것입니다. 

 

Back에서 요청받는 형식이 YYYY-MM-DD인 형식에 YYYY-MM-DD HH:mm:ss로 POST나 다른 메소드로 요청 한다면?

그렇습니다. 올바르지 못한 요청입니다.

 

중간에 수정하는 구문을 넣어 주던가, data를 변수에 넣어 format을 바꾼 다음 요청에 넣어줘도 됩니다.

        const something = {
        	id:""
            name:""
            phone:""
            address:""
            hireDate:""
            
        };
        axios.put('http://localhost:8080/Appointments/'+k,something);

위와 같이 요청을 보낼때 객체로 보내는 방식을 선택하여 통신하려 했습니다. 하지만 객체는 Back과 형식이 달라 제가 바꿔줘야 하는 상황입니다.

 

이때 저는 moment를 사용해 data format을 Back과 맞춰준 다음 요청해 문제를 해결했습니다. 아래 코드를 보시면 이해가 가실겁니다.

 

 

        const something = {
        	id:"",
            name:"",
            phone:"",
            address:"",
            hireDate:"",
            
        };
        const hireDatestr = moment(something.hireDate).format('맞추려는 형식');
        axios.put('http://localhost:8080/Appointments/'+k,{
            id:something.id
            name:something.name,
            phone:something.phone,
            address:something.address,
            hireDate:hireDatestr
        });​

https://momentjs.com/

Moment.js | Home

더 자세한 메소드 사용방법과 데이터 형식을 보고 싶으시면 위 링크에 자세하게 나와있으니 참고하시면 되겠습니다.

 

이상으로 date형식 400에러 해결 수기였습니다.