17일차

~16.3 댓글 목록 가져오기(종이책 p.475~487)

16장 웹 페이지에서 댓글 목록 보기

16.1 댓글 보기의 개요

보통 게시판의 특정 글을 클릭하면 상세 페이지(show)가 뜨면서 그 아래에 댓글(_comments)이 보인다. 댓글 영역은 크게 두 가지로 나뉘는데, 기존 댓글을 보여 주는 영역(_list)과 새 댓글을 입력하는 영역(_new)이다. 두 영역은 별도의 뷰 페이지를 만들어 상세 페이지 아래에 삽입하는 형태로 구현한다.

16.2 댓글 뷰 페이지 삽입하기

1. controller 패키지의 ArticleController를 보면 show() 메서드가 /articles/{id}로 접속했을 때 보여 주는 페이지를 반환하고 있다. return문을 보면 반환하는 뷰 페이지는 articles 디렉터리의 show.mustache 파일이다.

2. 댓글은 페이지 맨 밑에 넣기로 했으니 show.mustache 파일을 열고 푸터(footer) 바로 위에 댓글 뷰 파일을 삽입한다.({{>comments/_comments}}). 이렇게 하면 comments 디렉터리의 _comments.mustache 파일을 연결해 상세 페이지에서 댓글이 보이게 된다.

3. _comments.mustache 파일이 아직 만들어지지 않았으므로, templates 디렉터리에 comments 디렉터리를 생성하고 그 안에 _comments.mustache 파일을 만든다.

4. 댓글을 볼 수 있도록 다음과 같이 _comments.mustache 파일에 코드를 작성한다.

   <div>
   	{{>comments/_list}}
   	{{>comments/_new}}
   </div>

   <div></div> 태그로 레이아웃을 잡고 그 안쪽을 2개 영역으로 나누어 뷰 파일을 삽입한다. _list.mustache 파일은 댓글 목록을 보여주고, _new.mustache 파일은 새 댓글을 작성한다.

5. comments 디렉터리 안에 _list.mustache 파일과 _new.mustache 파일을 만든다.

6. _list.mustache 파일로 가서 다음과 같은 코드로 댓글 목록 뷰 페이지를 만든다.

   <div id=”comments-list”>
   	{{#commentDtos}}
   		<div class=”card m” id=”comments-{{id}}”>
   			<div class=”card-header”>
   				{{nickname}}
   			</div>
   			<div class=”card-body”>
   				{{body}}
   			</div>
   		</div>
   	{{/commentDtos}}
   </div>

   • <div></div> 태그로 댓글 목록 전체를 보여 주는 영역을 만들고 id=”comments-list”로 설정한다.
   • 조회한 댓글 목록에서 댓글을 하나씩 꺼내 순회할 수 있도록 {{#commentDtos}}・・・{{/commentDtos}}를 추가한다. commentDtos가 여러 데이터라면 머스테치 문법 안쪽에 있는 내용을 반복하라는 뜻이다.
   • <div></div> 태그로 댓글 하나를 보여주는 영역을 만든다. 이때 class=”card” 속성은 이 영역을 카드 구조로 만들라는 뜻이고, id=”comments-{{id}}” 속성은 반복되는 commentDtos에 있는 id값을 삽입해 이 영역의 id를 comments-1, comments-2, comments-3 등으로 설정하라는 뜻이다.
   • <div></div> 태그로 댓글 내에서 헤더 영역(class=”card-header”)을 만들고, commentDtos에 담겨있는 {{nickname}}을 보여준다.
   • <div></div> 태그로 댓글 내에서 본문 영역(class=”card-body”)을 만들고, commentDtos에 담겨 있는 {{body}}를 보여준다.

   ※ 이렇게 작성하면 댓글이 너무 붙어 있기 때문에 보기 좋게 여백을 주기 위해서 “card m-2”로 설정해준다.

16.3 댓글 목록 가져오기

서버를 실행하고 5번 게시글의 상세 페이지를 봐도 댓글이 보이지 않는다. 왜냐하면 뷰 페이지에서 사용하는 commentDtos를 모델에 등록하지 않았기 때문이다.

뷰 페이지에서 사용할 변수는 반드시 모델에 등록해야 사용할 수 있기 때문에 댓글 목록을 모델에 등록해야 한다.

1. ArticleController로 가서 show()메서드에서 댓글 목록을 가져와 반환하도록 한다.

2. 먼저 CommentService의 comments(id) 메서드를 호출해 조회한 댓글 목록을 List<CommentsDto> 타입의 commentDtos 변수에 저장한다.

   List<CommentDto> commentsDtos = commentService.comments(id);

3. CommentService 객체를 주입한다.

   @Autowired
   private CommentService commentService;

4. 받아 온 댓글 목록(commentDtos)을 모델에 등록한다.

   model.addAtrribute(”commentDtos”, commentsDtos);

이제 서버를 재시작하고 5번 게시글의 상세 페이지(http://localhost:8080/articles/5)로 가면 댓글이 나오는 것을 확인할 수 있다.