Welcom Page
- 기본적인 프로젝트 셋팅 방법은 생략한다.
프로젝트 셋팅 후, View에 Welcome Page를 띄워보자.
만약에 아무 html없이 서버를 실행했을때에는?
다음처럼 whitelabel error page가 뜬다.
그러면 index.html을 넣어보자
resources/static/index.html
<!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>
그러면 다음과 같이 index.html이 보여진다.
(바로 실행할 수 있는 이유? => Spring Boot에는 tomcat이 내장되어 있기 때문)
=> Spring은 static/index.html을 우선적으로 보여준다.
템플릿 엔진을 이용한 동적 사이트 만들기
위에서 작성한 index.html의 코드 내용은 정적이다. (데이터 통신 없이 html파일을 단순히 렌더링한 것)
여기서 템플릿 엔진을 사용한다면, 파일 내부를 양식에 맞게 데이터를 넣고, 화면에 보여줄 수 있다.
이번 실습에서는 'thymeleaf'라는 템플릿 엔진을 이용해 실습한다.
HelloController.java
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "hello!!");
//모델의 key값은 data, value는 "hello!!"
return "hello";
}
}resources/templates/hello.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
#thymeleaf라는 템플릿 엔진을 이용한다
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
#th가 thymeleaf의 th맞다.
</body>
</html>이후 localhost:8080/hello를 실행하면
html 파일에서 data라고 이름 붙인 부분에 hello!가 뜬다.
controller에서 data라는 key의 value를 보여주는 것이다.
controller에서 return한 값인 'hello'는, 위에서 생성한 hello.html의 이름이다.
즉, 리턴값과 이름이 같은 html파일을 resources/template에서 찾고,
model의 값으로 화면을 렌더링 한다.
동작 방식
동작방식은 다음과 같다.
- localhost:8080/hello를 접속한다.
- 톰캣 내장서버는 @GetMapping("hello")어노테이션이 포함된 컨트롤러를 찾고, 해당 이름으로 어노테이션 된 메서드와 맵핑되어 model에 data라는 key에 값을 넣어 hello와 return을 한다.
(이 때의 Get은 API통신에서의 GET,POST의 그 GET이다)
3.컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버( viewResolver )가 화면을 찾아서 처리한다. - 웹 브라우저에서 확인!
풀스택 호소인