✔️ Welcome Page
static/index.html을 올려두면 Welcome page 기능 제공index.html파일을static에서 먼저 찾고 만약 찾지 못한다면 index 템플릿에서 찾도록 동작
🔗 https://docs.spring.io/spring-boot/docs/current/reference/html/web.html#web
📌 Welcome Page 생성
- 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>src>main>java>resources>static 경로에 index.html 파일 생성
📌 실행 화면
- 입력한 html 화면 출력됨 (hello 경로 안에는 아무 것도 없기 때문에 에러 페이지)
- 이는 작성한 html을 웹 서버가 웹 브라우저에 넘긴 정적 페이지
- 템플릿 엔진이라는 것을 사용하면 원하는 대로 모양을 바꿀 수 있음
📌 thymeleaf 템플릿 엔진
- 공식 사이트
🔗 https://www.thymeleaf.org/ - 스프링 공식 튜토리얼
🔗 https://spring.io/guides/gs/serving-web-content/ - 스프링 부트 메뉴얼
🔗 https://docs.spring.io/spring-boot/docs/2.3.1.RELEASE/reference/html/spring-boot-features.html#boot-features-spring-mvc-template-engines
📌 동작 화면 생성
1. HelloController.java
hellospring > package controller > HelloController.java 생성
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("hello")
public String hello(Model model) {
model.addAttribute("data", "hello!");
return "hello";
}
}- 스프링은
@Controller어노테이션을 적어야 함 model은 MVC에서의 model을 뜻함- 웹애플리케이션에서 url에
/hello라고 들어오면 hello 메소드를 호출하는 방식
2. hello.html
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><html xmlns:th="http://www.thymeleaf.org">를 넣어주면 타임리프 문법 사용 가능- p 태그 안의
th는 thymeleaf - 안녕하세요 뒤의
data부분이hello!로 치환됨
(컨트롤러의model.addAttribute에서name: data,value: hello!)
📌 thymeleaf 템플릿 엔진 동작 확인
localhost:8080/hello 실행
📝 파일 구조
📝 동작 환경
1. 웹 브라우저에서 localhost:8080/hello라고 던짐
2. 스프링 부트는 내장된 Tomcat 웹 서버에서 받아서 스프링한테 전달
3. 스프링은 helloController의 GetMapping("hello")에 매칭하면서 메소드 실행
4. 스프링이 모델을 만들어서 넣어주고 모델에 key=data, value=hello!인 속성 추가
5. 메소드에서 hello를 리턴하는데 여기서 hello는 templates/hello.html (hello.html 화면 실행)
- 컨트롤러에서 리턴 값으로 문자를 반환하면
viewResolver가 화면을 찾아서 처리함
: 스프링 부트 템플릿엔진은 기본적으로viewName에 매핑
resources:templates/ + {ViewName} + .html의ViewName이hello로 바뀌면서hello.html이 열리게 됨
Back-End