티스토리 뷰
기본적인 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.
mustache(5) Mustache Manual mustache(5) NAME mustache - Logic-less templates. SYNOPSIS A typical Mustache template: Hello {{name}} You have just won {{value}} dollars! {{#in_ca}} Well, {{taxed_value}} dollars, after taxes. {{/in_ca}} Given the following ha
mustache.github.io
잘 정리해 놓은 국내 블로그 https://bibi6666667.tistory.com/269
[템플릿 엔진] mustache 기본 문법
mustache 기본 문법 정리하기 복잡하지 않으므로 공부 및 연습해 본다! 공식페이지..를 번역한 블로그를 보고 공부했습니다. 1. 변수 {{, }} 사이에 변수명을 입력한다. 문자열은 자동 HTML 이스케이프
bibi6666667.tistory.com
화면을 그리다 보면 데이터나 화면 구성에 따라 어쩔 수 없이 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?
Could someone please tell me how to change the default delimiter for mustache.js? The default delimiter is {{var}} and I would like to change it to {|var|} I have the following code: $('body').ap...
stackoverflow.com
Front에서 동적으로 클릭 시 데이터를 구성해야 할 때, js로 mustache template 만들고 delimiter 추가하여 render 했던 기억이 있네요.
여기서 꽤 많은 삽질을 했었습니다.
Mustache로 화면 그리기
빠르고 편한 작업을 위해 부트스트랩과 템플릿을 적극적으로 이용하겠습니다.
부트스트랩 템플릿 https://getbootstrap.com/docs/5.2/examples/
Examples
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
getbootstrap.com
저번 게시글에서 API를 총 3개 만들었습니다.
1. 게시글 목록 조회
2. 게시글 조회
3. 게시글 추가 (미완성)
각 API에 맞는 화면도 그려보겠습니다.
중복되는 Layout 공통화하기
일반적인 화면 구조입니다.
가운데 보이는 "본문 중간" 부분을 제외하고는 거의 비슷한데요.
이 부분을 따로 빼서 모든 페이지마다 작성할 필요 없이 가져다 쓰는 방식으로 하면 매우 편리합니다.
'header'와 'footer'로 나누겠습니다. 욕심이 있다면 'sidebar'나 다른 것들을 추가해도 됩니다.
header.mustache
본문 위까지 모든 코드를 다 넣었습니다.
footer.mustache
본문 다음부터 모든 코드를 다 넣었습니다.
index.mustache
layout은 눈에 띄지 않게 directory를 하나 생성하여 몰아넣어 두었습니다.
CommonController.java
index 화면을 보기 위해 추가해 두었습니다.
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'를 통해 내려주고 있습니다.
작성 후 제목을 클릭하면..
위 페이지가 나옵니다.
게시물 작성 페이지도 작업 후 올리도록 하겠습니다.
'웹 - Legacy > Spring' 카테고리의 다른 글
| Spring Boot로 게시판 만들기 (글 작성하기 페이지 추가) (0) | 2022.12.18 |
|---|---|
| Mustache Config (Formatter를 통해 데이터 format 설정하기) (0) | 2022.12.11 |
| Spring Boot로 게시판 만들기 (게시물 생성, 조회) (2) | 2022.11.27 |
| Spring Boot로 게시판 만들기 (테이블 설계) (2) | 2022.11.22 |
| Spring Boot로 게시판 만들기 (JPA) (4) | 2022.07.02 |