Spring Boot로 게시판 만들기 (Mustache를 이용해 화면 그리기)

기본적인 API와 동작을 만들었으니 화면에 그려보겠습니다.

Mustache 사용 준비하기

Mustache는 build.gradle에 의존성 추가를 하고

implementation 'org.springframework.boot:spring-boot-starter-mustache'

 

IDE(IntelliJ)에 Mustache 플러그인을 설치한다면 쉽게 이용할 수 있습니다.

 

Mustache 문법

공식 문서(영어) http://mustache.github.io/mustache.5.html

mustache(5) - Logic-less templates.

잘 정리해 놓은 국내 블로그 https://bibi6666667.tistory.com/269

[템플릿 엔진] mustache 기본 문법

화면을 그리다 보면 데이터나 화면 구성에 따라 어쩔 수 없이 Mustache.js를 필요로 할 수도 있습니다.

"Mustache delimiter" 관련하여 찾아보면 되고, 관련하여 스택오버플로 하나 남기겠습니다.

https://stackoverflow.com/questions/24741825/how-to-change-the-default-delimiter-of-mustache-js

How to change the default delimiter of mustache.js?

Front에서 동적으로 클릭 시 데이터를 구성해야 할 때, js로 mustache template 만들고 delimiter 추가하여 render 했던 기억이 있네요.

여기서 꽤 많은 삽질을 했었습니다.

 

Mustache로 화면 그리기 

빠르고 편한 작업을 위해 부트스트랩과 템플릿을 적극적으로 이용하겠습니다.

부트스트랩 템플릿 https://getbootstrap.com/docs/5.2/examples/

Examples

저번 게시글에서 API를 총 3개 만들었습니다.

1. 게시글 목록 조회

2. 게시글 조회

3. 게시글 추가 (미완성)

각 API에 맞는 화면도 그려보겠습니다.

 

중복되는 Layout 공통화하기

일반적인 화면 구조입니다.

가운데 보이는 "본문 중간" 부분을 제외하고는 거의 비슷한데요.

이 부분을 따로 빼서 모든 페이지마다 작성할 필요 없이 가져다 쓰는 방식으로 하면 매우 편리합니다.

'header'와 'footer'로 나누겠습니다. 욕심이 있다면 'sidebar'나 다른 것들을 추가해도 됩니다.

 

 

 

 

 

 

 

 

header.mustache

본문 위까지 모든 코드를 다 넣었습니다.

footer.mustache

본문 다음부터 모든 코드를 다 넣었습니다.

index.mustache

layout은 눈에 띄지 않게 directory를 하나 생성하여 몰아넣어 두었습니다.

CommonController.java

index 화면을 보기 위해 추가해 두었습니다.

mustache 구조

mustache 파일 작성하기

게시글 목록 조회

"/anonymous-posts" API를 이용하여 화면을 그리겠습니다.

mav.addObject("anonymousPost", anonymousService.getAnonymousPost(postId));

API를 호출하면 값을 'anonymousPost'를 통해 내려주는데요. 이 값을 화면 그리는 데에 사용하겠습니다.

 

 

 

그리고 서버를 띄운 다음에 http://localhost:8080/anonymous-posts/ 로 접속을 하면

 

화면이 나옵니다.

 

게시글 조회

다음으로는 게시글 목록에서 제목을 클릭하면 나오는 게시글 조회 페이지를 만들겠습니다.

"/anonymous-posts/{post_id}" API를 이용하겠습니다.

mav.addObject("anonymousPost", anonymousService.getAnonymousPost(postId));

값을 'anonymousPost'를 통해 내려주고 있습니다. 

 

 

작성 후 제목을 클릭하면..

 

위 페이지가 나옵니다.

 

게시물 작성 페이지도 작업 후 올리도록 하겠습니다.