맨처음 프로젝트 실행시 에러페이지가 뜨는 것을 확인했었습니다.

이 에러 페이지를 해결하고 동작하는 화면을 확인해보겠습니다.

Welcome Page 만들기

  • resources/static/index.html 해당경로에 index.html 파일 만들기
    • static/indext.html을 올려두면 스프링 부트 기능으로 Welcome page로 설정된다
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Hello</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> Hello <a href="/hello">hello</a> </body> 
</html>

thymeleaf 템플릿 엔진

  • 템플릿 엔진은 정적페이지(파일)을 원하는대로 수정할 수 있도록 해준다.
  • thymeleaf 사이드: https://www.thymeleaf.org/

Controller, templates 작업 후 연결하기

  • Controller
@Controller 
public class HelloController { 
    @GetMapping("hello") public String hello(Model model) { 
        model.addAttribute("data", "hello!!"); 
        return "hello"; 
    } 
}
  • view  
    • resources/templates/hello.html
<!DOCTYPE HTML> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head> 
<title>Hello</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body> 
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p> 
</body> 
</html>

thymeleaf 템플릿엔진 동작 확인하기

동작 이해하기

  • 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver 가 화면을 찾아서 처리한다.
    • 스프링 부트 템플릿엔진 기본 viewName 매핑
    • resources:templates/+{viewName}+.html

이 글은 김영한 님의 스프링 입문 강의를 복습하기 위해 작성된 글 입니다.

참고: https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8

+ Recent posts