본문 바로가기
JAVA/Spring

[Thymeleaf] 타임리프 시작하기!(+jsp대신 thymeleaf로 view처리!)

by lumayi 2021. 10. 24.

 

jsp대신 스프링부트에서 권장하는 thymeleaf로 view처리를 해보려한다.

차이점으로는 1) 확장자가 .jsp에서 .html으로 바뀌는 것,  2) 레이아웃을 직접 만들지않고 프레임워크가 제공하는 레이아웃을 쓸 수 있다는 것, 3) java코드를 쓰지않고 html코드로 데이터를 처리할 수 있다는 것이 있다.

 

1. application.properties 정의

https://dev-overload.tistory.com/25?category=898124


#서버 포트번호
server.port=8080

사용하는 포트번호를 쓰면 된다. 보통은 8080일 것!


#소스파일에 변화가 있을 때 자동으로 서버 재시작 설정
spring.devtools.remote.restart.enabled=true
굳이 껐다키지 않아도 파일을 수정하면서 바로바로 수정사항을 확인할 수 있다!

 

#thymeleaf
#정적 리소스에 변화가 있을때 바로 반영한다
spring.devtools.livereload.enabled=true

 

#thymeleaf참조경로
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

templates/가 타임리프를 관리하는 경로이며 html확장자를 사용하겠다는 뜻!

 

#thymeleaf에 대한 캐시를 남기지않는다. 운영시는 true
spring.thymeleaf.cache=false

 

#templates 디렉토리에 파일이 있는지 없는지 체크, 없으면 에러 발생
spring.thymeleaf.check-template-location=true

 

 

2. html 템플릿 작성

html 태그안에 꼭 xmlns 속성을 써주어야 타임리프를 사용할 수 있다!

<html lang="ko" xmlns:th="http://www.thymeleaf.org">

이 속성외에도 레이아웃을 쓸 수 있는 xmlns, xmlns:layout 등의 속성이 있지만, 필요하지 않다면 쓰지않아도 된다!

 

 

3. 이미지와 css의 경로 설정

<link rel="icon" href="img/favicon-16x16.png" sizes="16x16">
<link th:href="@{/css/login.css}" rel="stylesheet" />

 

이미지와 css 모두 static 폴더 안에 들어가게 된다. 하지만 표시해주는 방법의 차이가 있는데 1) 위의 이미처럼 바로 경로로 표시해주어도 되고, 아니면 2) 밑의 css처럼 타임리프 문법을 써서 경로를 표시해주어도 된다. 만약 위의 방법으로 css의 경로를 표시하고 싶다면 <link rel="stylesheet" type="text/css" href="css/main.css"> 이렇게 해주면 된다.

 

 

4. Controller 작성

나는 templates안에 content라는 폴더를 만들고 그 안에 모든 html 파일들을 저장했기에 content/main이 되었지만, 그냥 바로 templates 폴더에 저장했다면 바로 파일명만 리턴값에 주면 된다. jsp와 다른 점은 모든 경로가 확장자 없이 파일명으로만 사용가능하다는 것이다. 컨트롤러외에도 html파일안에서도 a태그나 페이지 이동 태그에 href="main"이렇게 바로 이동이 가능했다. 굳이 ${pageContext.request.contextPath}이렇게 패스를 써주지않아도 된다는 장점이 있었다. (jsp도 그냥 써도 되긴하지만 확장자가 필요했고, 이렇게 써야한다는 권장사항이 있었다.)

 

 

 

5. spring boot 작동하기

1) 프로젝트명을 우클릭하고 Run As -> Spring Boot App으로 실행하는 방법

2) Boot Dashboard에서 (Re)start로 실행하는 방법 두가지가 있다.

그리고 브라우저에서 http://localhost:8080/main (/뒤는 컨트롤러에서 입력해준 value값)으로 들어가면 잘 동작이 되는 것을 확인할 수 있다!

 

 

참고사이트:

https://dev-overload.tistory.com/25?category=898124

반응형