Part 4) REST 방식과 Ajax를 이용하는 댓글 처리 (Ch 17-3)

* 이 카테고리의 글은 <코드로 배우는 스프링 웹 프로젝트> 에서 각 파트별로 진행하는 프로젝트의 흐름을 보기 위해 각 장의 내용을 간단히 요약한 것이다.

* 출처: 코드로 배우는 스프링 웹 프로젝트 개정판, 구멍가게 코딩단, 남가람북스 

 

17.6 댓글의 페이징 처리 

- 현재까지 작성된 예제는 해당 게시물의 전체 댓글을 가져와서 화면에 출력한다. 문제는 댓글의 숫자가 엄청나게 많을 경우이다. 

- 댓글의 숫자가 많다면 데이터베이스에서 많은 양의 데이터를 가져와야하고, 이는 성능상의 문제를 가져올 수 있다. 

- 일반적으로 이런 문제를 페이징 처리를 이용해서 처리한다. 

 

17.6.1 데이터베이스의 인덱스 설계

- 댓글에 대해서 우선적으로 고려해야 하는 일은 tbl_reply 테이블을 접근할 때 댓글의 번호(rno) 중심이 아니라, 게시물의 번호(bno)가 중심이 된다는 점이다. 

- 댓글을 조회할 때는 해당 게시물의 댓글을 가져오기 때문에 'tbl_reply where bno = 200 order by rno asc'와 같은 방식으로 접근하게 된다.

- 데이터베이스 검색 효율을 높이기 위해 게시물의 번호에 맞게 댓글들을 모아서 빠르게 찾을 수 있는 구조로 만드는 것이 좋다. 

- 이와 같은 구조를 이용하게 되면 'bno=200 order by rno asc'와 같은 쿼리를 실행할 때 bno=200에 해당하는 범위만 찾아서 사용하게 된다.(range scan) 이러한 구조를 생성하는 것을 '인덱스를 생성한다'고 표현한다. 이 구조를 만드는 인덱스를 작성하는 SQL은 아래와 같다. 

create index idx_reply on tbl_reply (bno desc, rno asc);

 

 

17.6.2 인덱스를 이용한 페이징 쿼리 

- 인덱스를 이용하는 이유 중 하나는 정렬을 피할 수 있기 때문이다. 특정 게시물의 rno 순번대로 데이터를 조회하고 싶다면 다음과 같은 쿼리를 작성하게 된다.

SELECT /*+INDEX(TBL_REPLY IDX_REPLY) */
  ROWNUM AS RN, BNO, RNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE
FROM TBL_REPLY
WHERE BNO = 507923 -- 게시물 번호
      AND RNO > 0

- 실행된 결과를 보면 'IDX_REPLY'를 이용해서 테이블에 접근하는 것을 볼 수 있다. 

- 테이블에 접근해서 결과를 만들때 생성되는 ROWNUM(RN)은 가장 낮은 RNO 값을 가지는 데이터가 1번이 된다.

- ROWNUM이 원하는 순서대로 나오기 때문에 페이징 처리는 이전에 게시물 페이징과 동일한 형태로 작성할 수 있다.

- 예를 들어 10개씩 2페이지를 가져온다면 아래와 같은 쿼리를 작성하게 된다. 

SELECT RNO, BNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE
FROM (
    SELECT /*+INDEX(TBL_REPLY IDX_REPLY)*/
      ROWNUM AS RN, BNO, RNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE
    FROM TBL_REPLY
    WHERE BNO = 게시물 번호 
      AND RNO > 0
      AND ROWNUM <= 20
)
WHERE RN > 10;

- 위의 쿼리를 ReplyMapper.xml에 반영하여 댓글 페이징 처리 코드를 추가하고, ReplyMapperTests 클래스에 테스트 코드를 입력하여 테스트를 진행한다. 

 

17.6.3 댓글의 숫자 파악 

- 댓글들을 페이징 처리하기 위해서는 해당 게시물의 전체 댓글의 숫자를 파악해서 화면에 보여줄 필요가 있다.

- ReplyMapper 인터페이스와 ReplyMapper.xml에 getCountByBno()를 추가한다. 

 

17.6.4 ReplyServiceImpl에서 댓글과 댓글 수 처리 

- 단순히 댓글 전체를 보여주는 방식과 달리 댓글의 페이징 처리가 필요한 경우에는 댓글 목록과 함께 전체 댓글의 수를 같이 전달해야만 한다. 

- ReplyService 인터페이스와 구현 클래스인 ReplyServiceImpl 클래스는 List<ReplyVO>와 댓글의 수를 같이 전달할 수 있는 구조로 변경한다. 

- 우선 org.zerock.domain 패키지에 두 가지 정보를 담을 수 있는 ReplyPageDTO 클래스를 정의한다. 

- ReplyService 인터페이스와 ReplyServiceImpl 클래스에는 ReplyPageDTO를 반환하는 메서드를 추가한다. 

 

17.6.5 ReplyController 수정 

- ReplyController에서는 ReplyService에 새롭게 추가된 getListPage()를 호출하고 데이터를 전송하는 형태로 수정한다. 

- 기존과 동일하게 JSON 데이터를 전송하지만 ReplyPageDTO 객체를 JSON으로 전송하게 되므로, 특정 게시물의 댓글 목록을 조회하면 아래와 같이 'replyCnt'와 'list'라는 이름의 속성을 가지는 JSON 문자열이 전송된다.

 

17.7 댓글 페이지의 화면 처리 

- 댓글의 화면 처리는 다음과 같은 방식으로 처리한다.

1) 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여준다.

2) 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력한다.

3) 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동한다. 

4) 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출한다. 

 

17.7.1 댓글 페이지의 계산과 출력 

- Ajax로 가져오는 데이터가 ReplyPageDTO 클래서에서 정의한 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정한다.

- 기존에 비해서 변경되는 부분은 getList() 함수 내 callback 함수에 해당 게시물의 댓글 수(replyCnt)와 페이지에 해당하는 댓글 데이터를 전달하도록 하는 부분이다. 

 

- 화면에 대한 처리는 get.jsp 내에서 이루어진다. 

- reply.js를 이용해서 댓글의 페이지를 호출하는 부분은 showList 함수이므로 페이지 번호를 출력하도록 수정한다. 

- showList() 함수는 파라미터로 전달되는 page 변수를 이용해서 원하는 댓글 페이지를 가져오게 된다. 

- 이때 만일 page 번호가 '-1'로 전달되면 마지막 페이지를 찾아서 다시 호출하게 된다. 

- 사용자가 새로운 댓글을 추가하면 showList(-1);을 호출하여 우선 전체 댓글의 숫자를 파악하게 한다. 이후에 다시 마지막 페이지를 호출해서 이동시키는 방식으로 동작시킨다. 

- 이러한 방식은 여러 번 서버를 호출해야 하는 단점이 있기는 하지만, 댓글의 등록 행위가 댓글 조회나 페이징에 비해서 적기 때문에 심각한 문제는 아니다. 

 

- 댓글은 화면상에서 댓글이 출력되는 영역의 아래쪽에 <div class='panel-footer'>를 하나 추가하고, <div>의 아래쪽에 추가한다. 

- 추가된 <div class='panel-footer'>에 댓글 페이지 번호를 출력하는 로직 showReplyPage()를 자바스크립트 내에 입력한다. showReplyPage()는 기존에 Java로 작성되는 PageMaker의 JavaScript 버전에 해당한다. 

- 댓글 페이지를 문자열로 구성한 후 <div>의 innerHTML로 추가한다. 그리고 showList()의 마지막에 페이지를 출력하도록 수정한다. 

 

- 마지막 처리는 페이지의 번호를 클릭했을 때 새로운 댓글을 가져오도록 하는 부분이다.

 

17.7.2 댓글의 수정과 삭제 

- 댓글이 페이지 처리 되면 댓글의 수정과 삭제 시에도 현재 댓글이 포함된 페이지로 이동하도록 수정한다. 

- 기존과 달라진 점은 showList()를 호출할 때 현재 보고 있는 댓글 페이지의 번호를 호출한다는 점이다. 

- 브라우저에서 댓글의 등록, 수정, 삭제 작업은 모두 페이지 이동을 하게 된다.