Spring을 이용한 첫 타임어택 테스트
구현사항
- textarea에 입력한 내용을 상단에 표시해주기
- 저장여부를 확인하는 alert창 띄우기
구현방법
- spring에서 POST, GET method 만들기
➔ domain, controller, repository로 구분해서 코드 작성후 arc를 이용해 잘 구동되는지 확인하였다(PUT method는 구현사항에 없어서 service는 만들지 않았다) - 미리 제공된 html파일을 이용하여 javascript 코드 작성하기
➔ 저장여부를 확인 후 저장을 해줘야하기때문에 confirm()이라는 함수를 처음 사용해 보았다.
confirm() // boolean자료형으로 true 또는 false 반환true가 반환되면 db에 저장될 수 있게 ajax를 호출했는데 status 400 에러가 뜨면서 저장이 되지 않았다
400 Bad Request : 요청의 syntax가 잘못되어서 발생하는 에러ARC에서 테스트 할 때는 문제없이 200 OK가 뜨면서 실행되었고, 400 에러는 request의 문제이기 때문에 자바스크립트를 수정해보았다.
이거저거 바꿔가며 시도해보았지만 계속 status 400이 나왔고, 완성하지 못하고 제출했는데...
평소랑 다르게 뭔가 조금 더 알아보면 해결 할 수 있을 것 같은 기분이 들어서 제출후에도 여러가지를 시도해보고 있었다.
그때 귀인이 나타나셔서 같이 코드를 보며 이야기 해본결과!
ajax로 데이터를 넘길때 JSON.stringify를 해줘야 한다고 알려주셨다.
코드 수정 후 실행했더니 바로 성공 😆
도움을 받았지만 구현해냈다는 것에 너무나 기뻤다.
요즘 나태해진것 같아 스스로를 채찍질하고 있었는데 작은 성공이 큰 기쁨이 되는 경험을 오랜만에 해보니 이맛에 개발하지!!라는 생각이 들었다.
JSON.stringify를 사용하는 이유
그동안 사용한 flask 선생님과는 다르게 우리 spring 친구는 contentType을 꼭 지정해줘야하는데 "application/json"으로 작성해줘야한다. 그리고 data에 정보를 담아 보내면 queryString으로 파싱하게 된다고 한다.(localhost:8080/api/contents?queryString=query)
나는 JSON형식으로 데이터를 전달하고 싶기 때문에 stringify()를 사용하여 JSON 문자열로 변환해주어야 한다. http는 문자열로 통신을 하기 때문에 stringify()로 감싸서 보내줘야 json 형식으로 잘 전달된다고 이해했다.(틀린점이 있다면 댓글로 알려주세요)
작고 소듕한 내 코드를 공유해본다
function posting() {
let content = $('#content').val();
let q = confirm("저장된 메세지를 확인하시겠어요?");
let data = {"content" : content};
if(q === true) {
$.ajax({
type: "POST",
url: "/api/comments",
data: JSON.stringify(data),
contentType: "application/json",
success: function (response) {
window.location.reload();
}
});
} else {
$('#content').val('');
}
}오늘의 회고
처음으로 튜터님의 정답코드를 보지않고 구현해냈다는것에 스스로를 칭찬한다. 다른 캠퍼의 도움도 있었고, 구글 선생님의 도움도 있었지만 답지를 보지않고 방법을 찾아낸 기분이 들어서 엄청 뿌듯하다.
예전에 다른 온라인강좌로 spring을 접했을 때는 자세한 설명없이 무조건 코드를 따라 적고 에러가 나오면 검색해서 알아내는 방식이라 반감이 크고 단 한줄도 코드를 작성하지 못했는데, 지금은 느리지만 내가 직접 생각하고 고민해서 코드를 작성할 수 있게 됐다는것에 내 자신을 칭찬하고싶다.
전에는 spring이 개발을 편하게 할 수 있게 도와준다고 한것을 하나도 이해하지 못했는데 지금은 조금이나마 이해하게 됐다. 잠깐이지만 JSP와 Servelet을 경험해본것과 비교해보면 spring은 선녀였다.
오늘보다 더 나아진 내일을 맞이하기위해 더 열심히 해야지 🔥🔥
