thymeleaf

동적 페이지 처리를 위한 템플릿 엔진

• dependency에 추가하면 자동으로 Controller에서 html 파일 찾는 경로를/resources/templates 로 설정

정적 페이지 처리

일반적인 방법

@GetMapping("/static-hello")
public String hello() {
	return "hello.html";
}

• SpringBoot 서버에 html 파일을 바로 요청하면 해당 html 파일을 /static에서 찾아서 반환해준다.
• thymeleaf 템플릿 엔진을 적용하지 않은 상태여야 함
• url로 바로 접근 가능(http://localhost:8080/hello.html)

redirect

@GetMapping("/html/redirect")
public String htmlStatic() {
    return "redirect:/hello.html";
}

• thymeleaf 템플릿 엔진을 적용한 상태에서 static 폴더의 html 파일을 Controller를 통해 처리하고 싶은 경우
• "redirect:/hello.html" redirect 요청을 문자열로 반환하면 http://localhost:8080/hello.html 요청이 재수행되면서 static 폴더의 파일 반환 가능

Template engine에 View 전달

@GetMapping("/html/templates")
public String htmlTemplates() {
    return "hello";
}

• 타임리프 default 설정
  • prefix: classpath:/templates/
  • suffix: .html
  • /resources/templates/hello.html
• 외부(브라우저)에서 바로 접근하지 못하게 하고 싶거나 특정 상황에 Controller를 통해서 제어하고 싶은 경우
• templates 폴더에 해당 정적 html 파일을 추가하고 해당 html 파일명인 "hello" 문자열을 반환하여 처리 가능 (.html은 생략가능)

동적 페이지 처리

private static long visitCount = 0;

...

@GetMapping("/html/dynamic")
public String htmlDynamic(Model model) {
    visitCount++;
    model.addAttribute("visits", visitCount); //"visits"는 html에서 사용할 변수명
    return "hello-visit";
}

동적 페이지 처리 과정

1. Client 의 요청을 Controller에서 Model 로 처리한다.
   • DB 조회가 필요하다면 DB 작업 후 처리한 데이터를 Model에 저장하면 된다.
2. Template engine(Thymeleaf) 에게 View, Model 전달한다.
   • View: 동적 HTML 파일
   • Model: View 에 적용할 정보들
3. Template engine
   • View에 Model을 적용 → 동적 웹페이지 생성
     • 예) 로그인 성공 시, "로그인된 사용자의 Nickname"을 페이지에 추가
     • Template engine 종류: 타임리프(Thymeleaf), Groovy, FreeMarker, Jade, JSP 등
4. Client(브라우저)에게 View(동적 웹 페이지, HTML)를 전달 해줍니다.

Thymeleaf

• View 정보
  • "hello-visit" → resources/templates/hello-visit.html

  <div>
  	(방문자 수: <span th:text="${**visits**}"></span>)
  </div>

• Model 정보
  • visits: 방문 횟수 (visitCount)
  • 예) 방문 횟수: 1,000,000 번