주소를 메서드에 연결

@Controller 클래스의 @GetMapping이 GET 주소를 메서드에 붙인다. 반환 문자열 "home"은 templates/home.html이다. 폴더가 있으면 "villalab/F_005"처럼 경로를 적는다.

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("title", "글 목록");
        return "home";
    }
}

<h1 th:text="${title}">제목</h1>
<ul>
  <li th:each="post : ${posts}" th:text="${post.title}">제목</li>
</ul>

th:text는 값을 글자로 넣으면서 태그를 이스케이프한다. th:utext는 HTML을 그대로 해석하므로 사용자가 입력한 문자열에 쓰지 않는다.

정적 파일

CSS, JavaScript, 이미지는 src/main/resources/static/에 둔다. 템플릿은 그 파일을 href로 가리킨다. 목록을 채우는 조회는 이 Java 메서드 안에서 하고, 브라우저 스크립트는 클릭 같은 화면 동작에 남긴다.

같은 서버의 JSON이 필요하면 다음 단원의 /api를 fetch로 호출한다. 그 호출도 도착점은 Java다.