1. 웰컴 페이지 만들기!
위의 사진의 경로와 같이, index.html 파일을 하나 만들었다.
그리고 소스코드를 아래와 같이 입력하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" />
<title>Hello</title>
</head>
<body>
Hello
<a href = "/hello">hello</a>
</body>
</html>이렇게 작성을 완료하였더니, localhost:8080에 새로운 것이 뜨기 시작했다~
바로 우리가 만든 hello 웰컴 페이지가 정상적으로 보이게 된 것!
뜬금없이 웰컴 페이지는 왜 만들었냐?
이것은 스프링부트에서 우리에게 제공해주는 기능 중에 하나이다. welcome 페이지를 작성할 수 있게 해 주는 것!
위의 설명과 같이, static/index.html을 올려두면, Welcome Page 기능을 사용할 수 있다!
현재 우리는 이 웰컴 페이지를 정적 파일에 작성하였고 (static 폴더에 작성) 단지 html 파일을 웹에다가 던진 뒤에 뿌려라라고 말한 것과 다름이 없다. 그렇기 때문에 정적이고, 동적으로는 동작하지 못한다.
원하는대로 내 마음대로!! 템플릿을 바꾸고 싶다! 그럴 때 thymeleaf 템플릿을 사용하는 것이다.
2. thymeleaf 사용하기
- thymeleaf 공식 사이트 : https://www.thymeleaf.org/
타임리프(Thymeleaf)는 자바 라이브러리이며, 웹과 환경 양쪽에서 TEXT, HTML, XML, Javascript, CSS를 생성할 수 있는 템플릿 엔진이다.
타임리프(Thymeleaf)는 View Templete Engine으로 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다.
이제 이러한 thymeleaf를 사용하여 사용자의 화면을 정상적으로 띄워보자!
일단 코드를 작성하여야 하니 다음 경로로 코드를 작성해보자.
resources/templates/hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" />
<title>Hello</title>
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" > 안녕하세요. 손님</p>
</body>
</html>그리고 하나 더! `java/프로젝트폴더/controller/HelloController
package Inflearn_spring.studyspring.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";
}
}
출처 : 김영한님 spring 입문 강좌
1. 웹 브라우저에서 localhost:8080/hello 요청이 들어온다.
2. Spring에 내장된 서버인 톰캣 서버가 spring에게 던져준다
3. HelloController에서 @GetMapping을 인식하여 (http url get 방식과 같음) hello url과 매칭됨을 확인한다.
4. 컨트롤러 내의 메소드가 실행된다. hello 메소드가 실행되면서 스프링이 만든 model을 만들어서 넣고, key는 data, value는 hello로 설정한다. 이 때 return의 이름이 hello이다.
5. 컨트롤러에서 리턴 값으로 문자를 반환하면, ViewResolver가 화면을 찾아서 처리한다. 스프링 부트 템플릿엔진은 기본적으로 viewName을 매핑한다. 이것은 아래와 같이 매핑된다.
resources:templates/ + viewName + .html 이 되는 것이다.
이것은 resources/templates/hello.html을 찾아서 이친구를 랜더링하라는 것을 의미한다.
여기서 hello.html은 어떤 변화가 일어나는지 확인해보자.
<body>
<p th:text="'안녕하세요. ' + ${data}" > 안녕하세요. 손님</p>
</body>여기서 data는 넘겨진 model의 key값이 들어오게 된다. 그래서 hello!!로 바뀌게 되는 것이다.
