안녕하세요 요즘 스프링부트와 mustache로 간단하게 커뮤니티 기능을 구현하는 토이프로젝트를 하고 있습니다. 로그인 같은 기능은 간단하게 구현한 뒤 게시판, 댓글, 대댓글, 좋아요, 팔로우 이런 기능을 구현할 목적으로 시작하게 되었습니다.
https://github.com/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);
}
})
});