[DAY 17] 댓글 목록 View 페이지 구현 및 모델 등록하기

댓글에 관한 CRUD 및 REST API 구현이 끝났다.

이제 해당 기능을 웹페이지 화면에서 사용할 수 있도록 mustache를 이용하여 뷰 페이지를 만들어

기존 게시글 페이지에 삽입해야 한다.

보통의 게시판은 게시글의 상세 페이지에 들어가면 게시글의 내용이 보이고, 하단에 댓글이 보이는 목록과 댓글을 입력하는 영역이 나누어져 있다.

부트스트랩의 카드 요소를 이용하여 댓글 뷰 페이지를 생성하고, 상세 페이지의 푸터 바로 위에 뷰 파일을 삽입한다.

// show.mustache
...

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

뷰 페이지에서 사용한 변수는 반드시 모델에 등록해야 사용할 수 있다.

모델은 컨트롤러에서 해당 메서드를 호출하여 등록해야한다.

    // 데이터 조회 요청 접수
    @GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) {
        log.info("id =" + id);
        // 1. id 조회해 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);
        List<CommentDto> commentsDtos = commentService.comments(id);
        // 2. 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity);
        model.addAttribute("commentDtos", commentsDtos); // 댓글 목록 모델
        // 3. 뷰 페이지 반환하기
        return "articles/show";
    }

commentService의 메소드를 호출하기 위해서는 컨트롤러에 서비스 객체를 @Autowired로 주입해야한다.

주입한 후, 메서드를 호출하고 모델을 등록하면 아래와 같이 화면이 출력된다.