CRUD V1-02 view 설정 - mustache

kimsoapsoap's avatar
Aug 20, 2024
CRUD V1-02 view 설정 - mustache

1. 정적 리소스

💡
static 폴더는 Spring Boot 애플리케이션에서 정적 리소스를 제공하기 위한 디렉토리입니다. 이 폴더에 넣은 파일들은 별도의 컨트롤러나 설정 없이도 자동으로 제공되며, 웹 브라우저에서 URL을 통해 접근할 수 있습니다. 이러한 정적 리소스는 CSS 파일, JavaScript 파일, 이미지 파일 등을 포함할 수 있습니다.
 
 

1-1. src → main → resources → static에 view.zip안에 있는 파일들을 복사 → 붙여넣기

notion image
 
 
 
 
 

1-2. 정적 리소스 페이지 접속

notion image
 
 
 
💡
spring boot 디렉토리 구조
src/ main/ java/ # Java 소스 파일 resources/ static/ # 정적 리소스 (CSS, JS, 이미지 등) templates/ # Jsp, Thymeleaf, Mustache 같은 템플릿 파일
static 디렉토리 구조 내부에서 이런 식으로 종류별로 나눠주면 깔끔하다.
src/main/resources/static/ ├── css/ │ └── style.css ├── js/ │ └── script.js └── images/ └── logo.png
 
 
 
 

2. 템플릿(template) 설정하기

💡
Spring Boot에서 templates 디렉토리는 서버 사이드 템플릿 엔진을 사용하여 동적 웹 페이지를 생성할 때 템플릿 파일들을 저장하는 디렉토리입니다. Mustache, Thymeleaf, Freemarker 등의 템플릿 엔진을 사용할 때 이 디렉토리 안에 템플릿 파일들을 배치합니다. 템플릿 엔진이란?
템플릿 엔진은 HTML, XML, JSON 등과 같은 출력 포맷에 동적인 데이터를 주입하여 최종적으로 렌더링된 웹 페이지를 생성하는 도구입니다. Spring Boot에서는 여러 템플릿 엔진을 지원하며, 이들 중에서 Mustache는 간단하면서도 강력한 기능을 제공하는 템플릿 엔진입니다.
 
 

2-1. 템플릿(template) 파일 배치

static의 html파일들을 복사해서 아래의 templates에 붙여넣고 확장자를 mustache로 바꿔준다.
notion image
 
 
 

2-2. mustache 플러그인 설치

상단에 설치하라는 말이 뜨면 mustache라는 플러그인을 설치 해준다.
notion image
 
 
 
혹은 FIle → Setting 메뉴에서 Marketplace에서 mustache를 검색 후 설치해준다.
notion image
 
 

2-3. 템플릿(template)파일 분류

templates 폴더 내부에 board 디렉토리를 만들고 그 안에 .mustache 파일들을 넣어준다.
notion image
 
 
 
 
 
 
 
 

2-4. 템플릿(template)파일에서 한글이 깨지는 경우

한글이 깨진다면 resource의 application.properties 에 다음 2줄을 추가
notion image
 
server.servlet.encoding.charset=UTF-8 server.servlet.encoding.force=true
 
 
Share article

zerfa