[썸머노트] 사용법을 알아보던 중 ajax, json에 대한 이해.

 학원 프로젝트를 위하여 썸머노트 사용법을 알아보던 중
이름만 알고 왜 사용하는지 전혀 몰랐던 ajax와 json에 대해 조금은 이해를 하게 되었다.

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기 - 웹 개발자 안내서 | MDN

 

AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

 클라이언트와 서버 사이의 요청과 응답은 브라우저가 새로고침되는 등 url 요청이 있어야 하지만 특정 이벤트가 발생할 경우 비동기적으로 서버의 응답을 받을 수 있게하는 기술이라고 이해해보았다.

썸머노트 에디터를 사용하려는 이유는

 첫째. <textarea> 태그로  값을 입력받아 데이터베이스에 저장할 때, 에디터 상에서 작성한 양식 그대로인, HTML 코드 자체가 저장이 되기 때문에  입력했던 형태 그대로  화면에 출력할 수 있다는 점.
 둘째. 이미지 첨부도 자유롭고 (드래그앤드랍, 복붙 등이 가능), 글 작성 시 업로드한 이미지가 즉시 입력창에 반영이 되고 이미지를 포함하여 입력한 형태 그대로 다시 재출력을 할 수 있다는 점.

때문이다.

 이런 방식으로 이미지를 업로드 하는 과정에서 ajax의 기술이 사용된다.
이미지를 업로드하는 이벤트가 발생하는 순간, 페이지가 새로고침이 되지 않았음에도 불구하고 그 순간 클라이언트와 서버의 요청과 응답이 이루어진다. 업로드한 이미지가 서버에 저장이 된 후 다시 입력 창에 출력되는 것이다.

submit 하여 form태그로 서버에 제출하기도 전에 이벤트를 통하여 서버와 물밑작업을 하고 있던 것이다.
이 때 서버와 클라이언트 사이에 정보를 주고받는 양식으로 json을 사용한다.

이미지가 업로드되는 이벤트가 발생할 경우
콜백함수가 실행되고 ajax를 통해 컨트롤러에 매핑된다.
@Responsebody 어노테이션이 붙은 컨트롤러의 메소드는
뷰리졸버로 리턴을 하지 않고 클라이언트로 JSON객체 (또는 문자열로 된 JSON객체) 를 반환한다.
이러한 작업이 성공할 경우 sucess 의 함수가 실행되고 컨트롤러에서 반환한 JSON 문자열은 success 콜백함수의 파라미터로 주입된다. 이를 json오브젝트로 변환시켜서 프로퍼티에 접근한다?

얕은 수준이지만 썸머노트를 알아보면서 ajax와 json을 왜 사용하는지 조금은 이해하게 되었다.

썸머노트 에디터를 제대로 활용하기 위하여 ajax와  톰캣 외부리소스 설정 등을 더 공부해야겠다.