코딩자율학습단 스프링부트_16장

댓글 보기의 개요

15장에서 댓글 CRUD를 위한 서버의 여러 구성요소를 만들었다면,

이 장에서는 서버에서 처리한 댓글을 사용자가 볼 수 있도록 뷰페이지를 만들고 출력할 것이다.

보통 게시판의 특정 글을 클릭하면 상세 페이지가 뜨면서 그 아래 댓글이 보인다.

댓글 영역은 크게 두 가지로 나뉘는데 기존 댓글을 보여 주는 영역과 새 댓글을 입력하는 영역이다.

두 영역은 별도의 뷰 페이지를 만들어 상세 페이지 아래에 삽입하는 형태로 구현한다.

---

댓글 뷰 페이지 삽입하기

게시글 5번의 상세 페이지에 접속해보도록 할 것인데 아래와 같이 나와야 정상이다.

이제 이 화면 아래에 댓글을 출력해 볼 것인데 상세 페이지 뷰 페이지인 show.mustache 파일을 열어준다.

페이지 맨 밑에 댓글을 넣기로 했으니 푸터 바로 위에 댓글 뷰 파일을 삽입한다.

...

<a class="btn btn-outline-primary m-2" href="/articles/{{article.id}}/edit">Edit</a>
<a class="btn btn-outline-danger m-2" href="/articles/{{article.id}}/delete">Delete</a>
<a class="btn btn-outline-secondary m-2" href="/articles">Go to Article List</a>
<!-- content end-->

{{>comments/_comments}} <!-- 상세 페이지에 댓글 뷰 파일 삽입 -->

{{>layouts/footer}}

망치 아이콘을 클릭해 빌드하고 웹 페이지를 새로고침하면 아직 _comments 파일을 생성하지 않아 에러 페이지가 뜰 것이다.

templates 아래에 comments 새 디렉터리를 생성하고 그 안에 _comments 파일을 만들어 주면 된다.

우선 아래와 같이 작성해주고 망치 아이콘 클릭 후 페이지 새로고침하면 다시 에러가 날 것이다.

<div>
    <!-- 댓글 목록 보기 -->
    {{>comments/_list}}
    <!-- 새 댓글 작성하기 -->
    {{>comments/_new}}
</div>

_list.mustache 파일과 _new.mustache 파일을 같은 디렉터리 안에 생성해주고, _list.mustache 파일 먼저 작성해 줄 것이다.

<div id="comments-list">    <!-- 댓글 목록 영역 설정 -->
    {{#commentsDtos}}
        <div class="card" id="comments-{{id}}">
            <div class="card-header">
                {{nicknaame}}   <!-- 닉네임 보여주기 -->
            </div>
            <div class="card-body">
                {{body}}        <!-- 댓글 본문 보여주기 -->
            </div>
        </div>
    {{/commentsDtos}}
</div>

위와 같이 작성하고 다시 망치를 눌러 재시작하면 댓글이 보일 줄 알았는데 보이지 않는다.

뷰 페이지에서 사용하는 commentDtos를 모델에 등록하지 않았기 때문이다.

다음에 모델에 데이터를 등록한 후 5번 상세 페이지에 댓글 목록이 보이는 지 확인해 보도록 하겠다.

---

댓글 목록 가져오기

ArticleController의 show() 메서드를 아래와 같이 수정해 주어야 한다.

코드를 수정 중에 commentService가 빨간 색으로 표시될텐데 CommentService 객체를 주입시켜 주면 된다.

@Slf4j
@Controller
public class ArticleController {
   ...

    @Autowired
    private CommentService commentService;
    
    ... 
    
    @GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) {
        log.info("id= " + id);
        // id를 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        List<CommentDto> commentDtos = commentService.comments(id);

        // 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        model.addAttribute("commentDtos", commentDtos);

        // 뷰 페이지 반환하기
        return "articles/show";
    }
    ...
    ...
}

서버를 재시작하고 5번 게시글을 조회해보면 댓글이 아래와 같이 잘 나오는 것을 볼 수 있다.