스프링과 Thymeleaf

-view 환경 설정하는데 Thymeleaf엔진을 사용할 것이다.

-스프링은 Thymeleaf를 권장하는 편이고,

Thymeleaf도 스프링과 관련된 지원하는 기능들이 많다.

-스프링에서 권장하는 Template Engines

(Apache Freemarker, Mustache, Groovy Templates)

 

Thymeleaf Templates Engine

-웹과 standalone 환경을 위한 modern 서버사이드 자바 템플릿 엔진

*https://www.thymeleaf.org/ Thymeleaf 공식 홈페이지 참고

 

Thymeleaf 의 장점

-마크업을 깨지고 않고 그대로 사용 한다.

-보통 다른 Engine은 웹브라우저에서 열리지 않지만, Thymeleaf는 열린다.

-버전 2에서는 <BR></BR> 태그를 달아주는 스타일로 매칭해주지 않으면 에러가 났었지만

현재 버전 3.0에서는 <BR>작성해도 에러가 발생하지 않는다.

 

Thymeleaf 의 단점

-아직 그래도 불편한점이 있기 때문에 매뉴얼을 참고하면서 개발을 해야 한다.

 

 

스프링 

-스프링 공식 가이드

https://spring.io/guides/

-스프링 관련하여 개념이 혼란스러울 때에는 공식 가이드에서 검색을 통해

개념을 익히면 좋다.

*Serving Web Content with Spring MVC 검색을 해서 나와 있는 가이드 대로

따라해보면 좋다.

-스프링부트 매뉴얼 : 에러핸들링이나 기능이용시 궁금한점들을 공부할 수 있다.

https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-template-engines

 

Thymeleaf Template Engine을 위해 세팅해야 할 것은?

-스프링부트에서는 하기의 것을 이미 설치함으로,

자동으로 모든 세팅이 전부 되어 있으므로 오직 개발만 하면 된다.

org.springframework.boot:spring-boot-starter-thymeleaf

 

실습

스프링 부트 thymeleaf viewName 매핑

설명

-@Controller를 해줌으로써 annotation은 달아주어야 한다.

-@GetMapping(“hello”)라는 url로 오면 controller가 호출된다라는 뜻

-스프링 ui에 있는 Modelmodel에다가 어떤 데이터를 실어서 controller에서

  view로 데이터를 보낼 수 있다.

-attributeName"data"라는 키의 값(attributeValue)hello로 넘긴다.

-returnhello는 화면이름이다.

 spring initializer가 만들어 놓은 resources 안에 templates->new->file

 view name용으로 hello.html 생성한다.

 hello.html 파일생성후 추후 보이지 않아도 return hello.html 형태로 변환한다.

-return hello결과가 화면렌더링 할 때에 hello.html 화면으로 이동한다.

 

Thymeleaf 템플릿엔진 동작 확인(hello.html)

설명

-<html>xmlns:th(네임스페이스)"http://www.thymeleaf.org" 주었다.

-<p th:text${data}로 아까 hello라고 적어 두었던 데이터가 넘어온다.

  데이터(hello) 렌더링 된 것이 >안녕하세요. 손님</p>로 넘어간다.

 

 

내부경로를 인터넷주소칸에 입력해서 hello.html에 접속 및 소스코드확인

설명

-다른 template engine이면 if절부터 들어가는 것이 많은데

 thymeleaf template engine은 간결한 코드구성으로 화면렌더링이 가능하다.

 

 

서버사이드 렌더링=스프링부트메인실행

 

-스프링부트가 내장톰캣을 가지고 실행시킨다.

 

#마주한문제

hello.html 화면이 위에처럼 나와야 하는데 처음에는 나오지 않아 무엇이 문제인지 확인했다.

해본 것들

1. cmd창에서 실행한 프로세스를 taskkill /f /pid 프로세스넘버를 통해 종료

   ->실행 안됨

2. hello.html에서 복붙 없이 직접 작성해서 넣었기 때문에 확인해 보았더니

   두 번째 라인에 <html 안에 “ / ” 가 있어서 삭제하고

  <html xmlns:th="http://www.thymeleaf.org"> 로 수정

   -> 실행안됨..

3.서버사이드렌더링하는 스프링부트메인파일과 Hello.Controller파일이 같은 폴더내에 있는지 확인했더니, test폴더안에    있었다..

  스프링부트메인파일이 있는 jpabook.jpashop으로 Hello.Controller파일을 이동

->화면이 보인다.

해결!!!

 

 

어떻게 데이터 hellohello.html에 찾아가는건가?

화면렌더링 경로

 

>HelloController

attributeName인 데이터의 attributeValuehellohello.html에 있는 ${data}로 넘어간다.이때 찾아서 가는 요인은 HelloControllerreturn hello이 화면렌더링 할 때에 hello.html로 화면이 넘어가도록 한다.

 

서버사이드템플릿엔진이 내장톰캣 실행시킬 때에

스프링부트 thymeleaf viewName 매핑을 하기처럼 해주어서

resources:templates/ +{ViewName}+ .html

데이터 hellohello.html을 최종적으로 찾아갈 수 있게 된다.

 

 

127.0.0.1:8080 메인 화면에 정적화면 구현해보기

resources->static->file만들기->index.html 파일생성

*resource 폴더에 파일이 생성되었기 때문에 기본적으로 서버를 다시 실행시켜주어야 한다.

설명

href 가 데이터 hello로 넘어가는 하이퍼링크 역할을 한다.

*127.0.0.1:8080/hello에서 hello@GetMapping(“hello")url hello 역할을 한다.

 

 

devtools 라이브러리 역할

-html화면을 수정해야 할 일이 많은데 그때 마다 서버를 리스타트 하면 힘드니

 spring-boot-devtools 라이브러리를 추가한다.

-이 라이브러리가 cache제거와 reloading을 되게 해주는 역할을 한다.

 *build.gradle->dependencies->spring-boot-devtools추가->reimport

 

devtools추가후 다시 서버리스타트하면 restartedMain이라고 뜬다.

 

 

devtools와 recompiler를 이용한 수정화면

#마주한 문제 2

devtools 라이브러리가 설치되었다는 restartedmain 화면이 안보여서

계속 찾아보았더니.. spring-boot-starter-devtools로 되어 있었다.

spring-boot-devtools로 수정하고 reimport, 서버restart를 하니 작동이 된다.

 

 

View환경설정 끝!!!

+ Recent posts