AJAX 답변 구현 문제 해결
$.ajax({
type: 'post',
url: url,
data: queryString,
error: onError,
success: onSuccess
}여기에서 onSuccess 부분이 동작하지 않았다. 동작하면 onSuccess 함수에 따라서 답변하기 버튼을 눌렀을때 콘솔에 객체가 String으로 잘 나와야하는데 말이다. 에러메세지도 없어서 어떻게 해야할지 몰랐다. 일단 Getter 때문은 아니었다.
팀원의 도움을 받아 문제가 뭔지 찾았다. @ManyToOne, @OneToMany로 Question 과 Answer를 List<Answer> 로 연결 시켜줬는데 그게 문제였다. 아직까지 그 문제 발생원인을 정확하게 이해하진 못했지만,,팀원이 공유해준 것을 남겨둬야겠다.
- JPA 연관관계에서 양방향 매핑을 선언한 경우 발생
- Jackson lib 의 ObjectMapper 객체에 의해 컨트롤러 단에서 JSON 타입을 변환하는 도중에 변환되는 엔티티의 필드가 다른 엔티티를 참조하고 그 엔티티 클래스의 필드가 또 다른 엔티티를 참조하고 ... 무한루프
출처: https://pasudo123.tistory.com/350 [Contact 1997]
AJAX
이번 AJAX를 이용해서 댓글을 다시 구현하는 과정은 클라이언트에 이벤트가 발생했을때 어떤처리를 할지는 클라이언트에게 위임하는 단계라고 생각하면 된다.
최근의 백엔드의 역할은 동적인 html을 만드는 것을 클라이언트 사이드에 계속해서 넘기고 있다.
과거에는 html과 유사한 XML이 핫했다. XML은 태그를 개발자가 임의로 설정할 수 있었다. 그래서 html이 xml의 일부라고도 할 수 있다.
최근에는 JSON 데이터가 작고 가독성이 좋아서 이걸 사용한다.
JSON은 자바스크립트에서 사용하기위한 표준(?)인데 최근에 자바스크립트가 각광받다보니 JSON 을 쓰면 클라이언트에서 처리하는데 유리한점이 있다.(?)
최근 대부분 백엔드는 JSON 형태로 데이터를 내려준다고 생각하면된다.
AJAX가 왜 등장했나?
화면을 구현할때 댓글을 달면 실제로 화면이 바뀌는 영역은 댓글만 바뀌는거다.
기존 개발방식은 답변에 데이터를 추가하면 답변데이터가 서버쪽에 컨트롤러로날아가서 데이터베이스에 추가되고 데이터베이스에서 데이터상세와 답변의 목록을 모두 조회한 다음에 템플릿 엔진을 통해서 템플릿에 넣어서 html 전체를 동적으로 만든담에 클라이언트에 넘겨주게 된다.
클라이언트 브라우저가 html 전체를 받은담에 화면을 첨부터 끝까지 다시 그리는것이다.
네트워크 상에서 데이터를 많이 주고받으면 데이터 주고받는 비용이 크고 데이터를 조회하는것 자체가 비용이 들고 템플릿엔진을 이용해서 전체 html을 다시만드는데에도 비용이 발생한다.
지금은 컴퓨터가 빠르니까 눈깜짝할사이에 전부 다 되어서 큰문제가 없지만 사용자가 엄청 많으면 이런 미묘한차이가 엄청난 차이를 만들어낸다.
인터넷이 만약에 느리다면. 더 큰 차이를 만들어낼 것이다.
AJAX 기술은 답변을 예를들어서 클릭했을때 화면은 그대로있고 AJAX를통해서 서버에 데이터를 전송하고 서버는 추가된 데이터를 응답으로 JSON 데이터형태로 응답을 준다. AJAX 기능을 이용해서 그응답을 JSON 응답을 받은담에 html을 동적으로 만들어서 그 부분만 다시 그리게 된다. 다른 부분은 원래있떤거만 사용하고.
그래서 최근의 웹어플리케이션 개발은 ajax를 이용해서 웹개발을 많이 사용하는 추세이다.
읽을거리
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
AJAX를 활용해 답변 추가 기능 구현 서버로 데이터 전송까지
답변하기를 누르면 서버로 데이터가 날아가게 되어있는데 그것을 막고 ajax를 이용해본다. ajax라는 기술은 js를 통해서 동작한다.
js에서 본기능을 막은다음에 사용자가 입력한 데이터를 받아서 ajax를 통해서 서버에 전송하는 법을 구현해야한다.
자바쿼리 라이브러리 중에 제이쿼리 라이브러리를 이용해서 이 기능을 구현할것이다. 바로 답변하기에 접근할수있찌만 form에 접근해서 조작하도록 할것이다
'.'은 클래스를 의미한다.
$(".answer-write input[type=submit]").click(addAnswer);
html 태그에 클릭이라는 걸 클릭했을때 addAnswer 함수를 호출해라.
function addAnswer(e) {
}이때 e는 클릭이 발생한 이벤트 정보가 들어오게 돼있다.
function addAnswer(e) {
console.log("hello")
}이렇게하면 inspect해서 console 창에서 hello를 확인할수있는데 페이지를 새로고침하는 과정 중에서 금방사라지게된다.
function addAnswer(e) {
console.log("hello");
e.preventDefault();
}답변하기를 눌렀을때 서버로 데이터가 전송되지 않도록 하는 것은 들어오는 이벤트 정보의 함수중에 preventDefault() 를 쓰면된다.
서버에 데이터를 전송하려면
api를 붙이면 jason이나 데이터만 응답을 준다는걸 인식한다는 뜻으로 많이 적는다
ApiAnswerControoler의 String을 리턴해주는 곳에 Answer정보를 클라이언트에 받고싶은거니까 Answer로 받을수 있다.
[...]
spring boot devtools 를 이용한 개발환경 설정
