[JSP] [MVC] [AJAX] [JS] [JSON] AJAX를 이용한 비동기 통신으로 댓글/대댓글 구현하기 #1

MVC패턴을 지키면서 특정 페이지에서 ajax를 이용한 비동기 통신으로 댓글을 작성하고 모든 댓글을 출력하는 로직을 기록하고자 한다.

 

목표

♠ JSP에서 MVC 패턴을 지키면서 AJAX를 통해 댓글을 작성하고 출력할 수 있다. 

♠ 댓글 및 대댓글 출력 처리 과정을 이해할 수 있다.

 

 

실행 화면으로 로직 흐름 이해하기

도서 상세 페이지(bookView.jsp)

아래 이미지를 참고하자. 

• 댓글 관련 화면은 크게 두 영역으로 나뉘는데, 하나는 <ul class="nav nav-tabs">, 다른 하나는 <div class="tab-content"> 영역이다.
•  <ul class="nav nav-tabs"> 태그 하위에는 4개의 Description, Specification, Comments, Reviews <li> 태그가 있다.
• 각각의 <li> 태그에 따라 <div class="tab-content"> 태그 하위의 구성 요소가 바뀐다.
• <div class="tab-content"> 영역은 다시 2개의 영역으로 나뉜다(주황색, 초록색 박스 부분).

댓글 영역의 태그

 

1. Comments 태그 클릭

• <ul class="nav nav-tabs">에서 <li> Comments </li> 태그를 클릭하면 아래 <div class="tab-content"> 태그 영역에 모든 댓글이 출력되는 부분과 댓글을 작성하는 부분이 나타난다.
• 왼쪽 주황색 박스는 모든 댓글이 출력되는 영역으로, <div class="comment_list"> 태그로 감싸져 있다.
• 오른쪽 초록색 박스는 댓글을 작성하는 영역으로, <div class="review_box"> 태그로 감싸져 있다.  

댓글 버튼

 

2. 댓글 작성

1. 오른쪽 초록색 박스에서 사용자가 댓글을 작성한다.
2. "등록하기" 버튼을 누른다.
   1. 비동기 방식으로 Form 양식의 데이터가 서버로 넘어가서 DB에 저장된다.
   2. 정상적으로 요청이 처리되고 응답이 오면, 다시 비동기 방식으로 모든 댓글의 데이터가 DB로 가져와진다.
   3. 가져온 모든 댓글이 출력된다. 
3. 왼쪽 주황색 박스에서 모든 댓글이 출력된다.

댓글 작성 및 출력

 

3. 대댓글 작성

1. 왼쪽 주황색 박스에서 "댓글" 버튼을 클릭한다.
2. 오른쪽 초록색 박스에서 사용자가 대댓글을 작성한다.
3. "등록하기" 버튼을 누른다.
   1. 비동기 방식으로 Form 양식의 데이터가 서버로 넘어가서 DB에 저장된다.
   2. 정상적으로 요청이 처리되고 응답이 오면, 다시 비동기 방식으로 모든 댓글의 데이터가 DB로 가져와진다.
   3. 가져온 모든 댓글이 출력된다. 
4. 왼쪽 주황 박스에서 모든 댓글이 출력된다.

대댓글 작성 및 출력

 

 

다음 블로그에서 본격적으로 구현한 로직을 포스팅하겠다. 

 

 

끝.