[TIL] 3월 23일

AJAX란?

Ajax - 위키백과, 우리 모두의 백과사전

Asynchronous JavaScript and XML 비동기적인 웹 애플리케이션 제작을 위한 웹 개발기법

기존의 웹 애플리케이션은 브라우저가 서버로부터 받은 페이지가 중복적인 부분이 생기는 경우가 있는데 이때마다 페이지 전체를 전달받아서 대역폭의 낭비가 발생한다.

반면 AJAX 애플리키션은 필요한 데이터만 서버에 요청해서 받는다. 웹서버의 응답을 처리하기 위해 클라이언트 쪽에서 자바스크립트를 쓴다.

웹서버에서 전적으로 처리되던 데이터 처리가 일부분은 클라이언트에서 처리된다. 따라서 서로 교환하는 데이터량과 서버의 데이터 처리량이 줄어서 응답성이 향상된다.

• 장점
  • 페이지 이동없이 화면전환을 빠르게 할수 있다.
  • 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
  • 수신하는 데이터의 양을 줄일수 있다.
  • 클라이언트에게 데이터 처리를 위임할 수 있다.
  • 플러그인 없이 인터렉티브한 웹페이지를 구현할 수 있다.
• 단점
  • Ajax를 쓸수 없는 브라우저가 있다.
  • HTTP 클라이언트의 기능이 한정되어있다.
  • 페이지 이동없는 통신으로 인해 보안상 문제가 발생할수 있다.
  • 지원하는 Charset이 한정되어있다.
  • 스크립트로 작성되어서 디버깅이 어렵다.
  • 요청을 남발하면 서버 부하가 늘 수 있다.
  • 다른 도메인과는 통신이 불가능하다.

AJAX를 활용한 답변추가

6-1. AJAX를 활용한 답변 추가 1

6-2. AJAX를 활용한 답변 추가 2

댓글 작성하기 버튼을 누르면 서버로 데이터 전송이 되지 않도록 변경한다.

/questions/{{id}}/answers와 /api/questions/{{id}}/answers ??

api를 앞에 붙이면 html이 아닌 json과 같이 데이터만 응답으로 보낸다는 뜻

answerRepository.save(answer)의 리턴값은 answer가 된다.

스프링 MVC가 컨트롤러에 해당되는 create메소드를 알아서 json으로 변환해주는가?

→ No, @RestController 가 필요하다.

@JsonProperty

자바 객체에서 json 데이터로 변환하고 싶은 필드에 어노테이션을 붙여준다.

Could not write JSON: Infinite recursion (StackOverflowError); 에러

20190720 [문제해결] Infinite recursion (StackOverflowError)

원인 : 양방향 매핑을 해서

@RestController를 붙인 컨트롤러에서 값을 반환하면 객체를 JSON 타입으로 ObjectMapper가 변환시켜준다. 여기서 JSON 타입에 대한 무한루프가 발생하고 스택오버 플로우가 뜬다.

블로그에 나온대로 양방향 매핑을 맺은 필드에 대해 어노테이션을 붙인다. (@JsonManagedReference, @JsonBackReference)

// Question class
@OneToMany(mappedBy = "question")
@OrderBy("id asc")
@Where(clause = "deleted = false")
@JsonManagedReference
private List<Answer> answers = new ArrayList<>();

// Answer class
@ManyToOne
@JoinColumn(foreignKey = @ForeignKey(name = "fk_answer_to_question"))
@JsonProperty
@JsonBackReference
private Question question;

이렇게하니깐 해결되었다

오늘 한일

• 미션5 시작, JSON API, AJAX를 활용한 답변 추가 부분 구현 완료
• AJAX란? 필요한 부분만 응답받는 것, HTML 페이지에서 댓글을 추가하면 현재 페이지는 그대로 유지되고, 서버에서 응답으로 보내는 데이터는 XML또는 JSON이다. 클라이언트에서는 응답으로 받은 XML 또는 JSON을 이용해 HTML을 완성한다.