이제 기본적인 세팅은 끝났다.
html을 파일을 올려서 정상적으로 돌아가는 지 확인해 볼 것이다.
먼저 필요한 것은 시작 페이지파일이다.
resources에 새로운 파일을 index.html 파일을 생성한다.
정말 빠르게 만드는 방법은
static 폴더에 html을 넣는 것이다. 이 경우는 그냥 파일을 주는 것이고
어떠한 동작 또한 하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Hi</h1>
</head>
<body>
</body>
</html>
이 파일을 넣고 그냥 실행만 시켜도 index 페이지를 만들 수 있다.
하지만 이렇게 만들면 제대로 된 기능이 없기에 다른 방법을 사용하는 것이 좋다.
이것을 하기위해 처음에 Tymeleaf라는 템플릿 엔진을 추가하였다.
그럼 이제 동작을 하는 웹 페이지를 만들기 위해 컨트롤러와 웹 페이지가 필요하다.
*(수정) 왜 HTML이 스태틱에 있는지 모르겠다. 템플릿에 있어야 한다.
폴더 구성은 다음과 같다.
위치를 다르게 할 경우 제대로 동작하지 않으니 주의하도록 하자.
package test.testproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class TestController {
@GetMapping("testfile") // html 파일명
public String controller(Model model) {
model.addAttribute("data", "테스트 중"); // html의 값과 들어갈 값의 내용
return "testfile"; // html 파일명
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1>Thymeleaf Example Page</h1>
<p>Hello, <span th:text="${data}"></span>!</p>
</body>
</html>
두 코드를 보면 매칭이 되는 것을 알 수 있을 것이다.
html의 맨 위에는 타임리프 엔진을 사용한다는 것을 명시해주어야 한다.
이제 이 예제 코드를 실행해보면 정상적으로 작동하는 것을 확인할 수 있다.
'스프링부트' 카테고리의 다른 글
| Mac IntelliJ 스프링부트 웹 개발 MVC, 템플릿 엔진 (0) | 2024.03.06 |
|---|---|
| Mac IntelliJ 스프링부트 깃 등록 (0) | 2024.03.06 |
| Mac IntelliJ 스프링부트 프로젝트 실행 (0) | 2024.03.05 |
| Mac IntelliJ 스프링부트 Project Explorer 정리 (0) | 2024.03.05 |
| Mac IntelliJ 스프링부트 프로젝트 생성 (0) | 2024.03.05 |