현재 개인 포트폴리오 + 졸업 작품 목적으로 개인 프로젝트를 진행하고 있다.
기본적인 API는 얼추 완성한 상태이고, 실제 보여질 화면을 우선적으로 구현한 후 추가적으로 보완해야할 부분들을 계속해서 수정해야겠다고 생각했다.
화면을 구성하기 위해 어떤 템플릿 엔진을 사용할지에 대한 고민이 있었다. 지금까지 경험해본 템플릿 엔진으로는 JSP, Mustache가 있다. 먼저 JSP에 대한 생각을 이야기 해보자면, JSP는 렌더링되기 전에 별도의 자바 서블릿 코드로 변환되어 실행되는데, 이 방식이 효율적이지 못하다고 생각했고 실제로 써봤을 때 TTV 시점이 느리다는 것도 충분히 체감할 수 있었다. Mustache는 JSP에 비해 빠르고, HTML 문서도 깔끔하게 작성되어 읽기 편했다. (사실, JSP도 다양한 taglib를 충분히 활용하면 문서를 깔끔하게 표현할 수 있긴 하다.)
따라서 Mustache의 공식 가이드를 따라 프로젝트에 적용시키려 했지만 최근 수강했던 스프링 MVC 1편에서 여러 장점들을 토대로 Thymeleaf를 적극 추천했기 때문에, 이번 프로젝트에 적용시켜보려 한다.
프로젝트 환경은 Spring Boot - Gradle 이고 개념보다는 사용법 위주로 정리할 예정이다.
공식 사이트: https://www.thymeleaf.org/
공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
의존성 추가
먼저 build.gradle에 다음 코드를 추가하자.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
...
}이후 Gradle project를 Reload 하면 프로젝트에 의존성이 추가된다.
설정
spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.htmlapplication.properties 에 다음의 문장을 추가하자
- spring.thymeleaf.cache=false : thymeleaf에 대한 캐시에 대한 설정 (운영시 True)
- spring.thymeleaf.check-template-location=true : template 디렉터리에 파일이 있는지 check (없다면 예외 발생)
경로 설정
- spring.thymeleaf.prefix=classpath : /templates/ : thymeleaf 경로 설정
- spring.thymeleaf.suffix=.html : thymeleaf가 참조할 파일 설정 (.html 파일을 참조)
위와 같이 설정 했을 때, 스프링은 resource/templates/ 경로에 있는 .html 파일을 참조하여 렌더링한다. (suffix 는 따로 설정하지 않아도 html 파일을 참조한다.)
CSS, JS, 이미지 등 정적 파일 경로
스프링 부트는 기본적으로 src/main/resource/static 가 기본 정적파일 경로이다. 따라서, 다음과 같이 파일을 위치시키면 위치에 맞게 호출이 가능하다.
- src/main/resource/static/js./ *.js (http://도메인/js/ *.js)
- src/main/resource/static/css./ *.css (http://도메인/js/ *.css)
- src/main/resource/static/image./ *.jpg (http://도메인/js/ *.jpg)
resource 밑에 static 폴더를 생성하고 폴더를 생성하여 정적 파일들을 관리하자.
<html>
<head>
...
<link rel="stylesheet" href="/css/style.css" type="text/css">
...- HTML에서 정적 파일을 불러올 때도 다음과 같이 절대 경로 (/) 로 시작하면 된다.
참고
https://dev-overload.tistory.com/25
스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 이동욱 저
