(Spring) fetch 절을 이용한 데이터 보내기 (GET / POST)
오늘도 공부한 내용을 까먹지 않기 위해 기록하기.
지금은 연장 근무 신청 시, 작성 모달창이 뜨고 제출하기 누르면 서버(db)로 보내지는 것 까지 됐다.
(쿼리문은 로그인과 연동해야 하기에 수정 해야함. 일단 잘 동작한다.)
최초 작성을 위한 모달창이 뜰 때 fetch로 서버에 있는 데이터를 가져와야 하고,
반대로 제출 버튼을 누를 때 fetch로 서버에 보내야 한다.
추가로 서버로 보내진 데이터가 제대로 insert / update 등 transaction 됐는지에 따라 얼러트 문구를 띄우기 위해
다시 js로 정보를 보내야 한다.
나중에 코드가 길어질 걸 대비해, 주석을 꼼꼼하게 달아 놓는다.
아 서론이 길었지만, 오늘 포스팅 하는 이유는 다시 서버로 보낼 때 method 방식에 대해 기록 목적?이다.
결론적으로 위의 GET 방식으로 서버에 데이터를 보내는 방법은 잘못 되었다.
이전에 method 방식을 단순히 GET 방식으로 작성한 적이 있다.
그때도.. .스크린샷을 찍지는 못했지만 모든 데이터를 잘 담았고, 이상 없는 코드라 생각했지만 제출 버튼 자체가 눌리지 않았다.
뭔가 문제가 있는 게 분명...
단순히 get과 post의 방식은 url에 노출되냐 아니냐의 차이로만 인식하고 있었지만 fetch를 통해 주고 받을땐 나름의 법칙? 같은 게 있다.
1. 특징
- GET
1. 주로 데이터를 요청할 때 사용. 서버에서 정보를 가져오는 데 적합
2. URL에 쿼리 문자열을 통해 데이터를 전달.
- POST
1. 주로 서버에 데이터를 전송할 때 사용. (예 폼 제출이나 데이터 생성 요청에 적합)
2. 요청 본문(body)에 데이터를 포함하여 전송.
2. 데이터 전송 방식
- GET
1. 데이터는 URL의 쿼리 문자열로 전송. (예 https://example.com/api?name=John&age=30와 같이 URL에 포함)
2. URL 길이에 제한이 있어, 전송할 수 있는 데이터 양이 제한적.
- POST
1. 데이터는 요청 본문에 포함되어 전송. 따라서 URL에는 데이터가 포함되지 않음.
2. 전송할 수 있는 데이터 양에 제한이 없으며, 대량의 데이터를 전송 가능.
찾아 본 결과, 서버에 데이터를 전송할 때엔 POST를 사용하는 게 맞고, 서버에서 가져올 때엔 GET 방식 적합하다.
또한 서버로 보낼 때 GET방식은 url에 기록이 남는 특징이 있는데, 데이터 양이 많으면 제한적이고, 보안에 취약하기 때문이다.
컨트롤러는 아래와 같이 구성했다.
OverTimeApplicationDTO 형태로 묶어서 데이터를 보내줬고,
JS에서 서버로 받을 때에도 동일한 DTO로 묶어 받았다.
또한 추가로 @ResponseBody 어노테이션을 달아서, 제출 성공/실패 여부를 반환하기 위해 Map으로 다시 js로 보내줬다.
① 사용자가 입력한 값을 묶어서 서버로 보내줌
② map에 있는 key를 꺼내어 등록 여부 얼러트로 반환
다시 POST로 제대로 수정하고 나니 제대로 작동한다.
지금은 완료 메시지를 얼러트로 설정해놨는데, 기한이 얼마 안 남았으므로 모달 창은 나중에 디벨롭 예정..
오늘의 기록 끝..