[Spring] /board로 이동하면 댓글을 어떻게 보여주지? (스프링 댓글 구현)

 

안녕하세요 요즘 스프링부트와 mustache로 간단하게 커뮤니티 기능을 구현하는 토이프로젝트를 하고 있습니다. 로그인 같은 기능은 간단하게 구현한 뒤 게시판, 댓글, 대댓글, 좋아요, 팔로우 이런 기능을 구현할 목적으로 시작하게 되었습니다. 

 

https://github.com/pkyung/toy-project

GitHub - pkyung/toy-project

 

머리 싸매며 고민하다가 해결한 방법에 대한 썰을 주변 분들에게 말하니 재밌다고 블로그 써라~ 라고 해서 쓰러 왔습니다. 

 

 

 

 

구현하고자 하는 것은 아래 사진과 같은데 프론트 단을 따로 구현하는 것이 아니기 때문에 /board를 부르면 게시판 내용이 나오는 상태였습니다.

그러면 어떻게 /comment를 불러야 하는가...를 고민하던 차였습니다. 

저는 웹 프로그래밍 수업을 들은 사람이기 때문에 이 상황에서 ajax를 써야겠다고 생각했습니다. 

그래서 js 파일을 만들어서 document가 실행되자마자 ajax가 실행되는 코드를 작성했습니다. 

 

 

 

comment.js 의 내용입니다. 

let boardId = document.getElementById("boardId");

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: `/comment/${boardId.value}`,
        success: function () {
            $("#comment").load("/comment.mustache");
        }
    })
});

 

저는 이렇게 작성하면 바로 mustache 코드가 나올 줄 알았는데 spring에서 localhost:8080/comment.mustache 가 없다고 인식을 하더군요. url로 인식을 하는 것이었습니다. 

 

 

 

static 파일의 경우 application.properties에 이것을 해두면 static 파일을 부를 수 있는데요.

spring.mvc.static-path-pattern=/static/**

 

 

 

mustache 파일의 경우 static이 아니기 때문에 templates 폴더에 보관했어야합니다. 

그래서 config 폴더 아래에 MvcConfiguration.java를 만들어서 templates 파일이 / 이 경로로 인식이 되도록 만들어 주었습니다.  

@Configuration
public class MvcConfiguration implements WebMvcConfigurer {
    public void addResourceHandlers(final ResourceHandlerRegistry resourceHandlerRegistry) {
        resourceHandlerRegistry.addResourceHandler("/**")
                .addResourceLocations("classpath:/templates/")
                .setCacheControl(CacheControl.maxAge(10, TimeUnit.MINUTES));
    }
}

 

 

 

이제 인식이 되겠지? 하면서 실행해보았는데 이런 결과가 나왔습니다. mustache가 인식되지 않고 html 처럼 파일 그 자체가 나오는 것이었습니다. 

 

 

 

왜 이러지...생각하던 차에 event 를 console.log에 찍어보았습니다. 

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: `/comment/${boardId.value}`,
        success: function (event) {
            console.log(event);
        }
    })
});

 

 

제가 원하던 파일이 여기 event 속에 있었던 것입니다. 

 

 

getmapping 시에 comment.mustache를 반환하기 때문에 당연한 것이었습니다. 

@GetMapping("/comment/{boardId}")
    public String getComment(@PathVariable Long boardId, Model model, @CookieValue(value = "memberId", required = false) Cookie memberCookie) {
        model.addAttribute("comment", commentService.getComment(boardId, memberCookie));
        return "comment";
    }

 

 

그래서 결국 js 파일을 이렇게 수정하여 해결하게 되었습니다. 

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: `/comment/${boardId.value}`,
        success: function (event) {
            console.log(event);
            $("#comment").html(event);
        }
    })
});