03 View 환경설정

8883 단어 Spring김영한Spring

정적페이지

해당 코드를 작성하여 localhost:9090에 다음과 같은 정적페이지(welcome Page)를 띄운다.

hello-spring/src/main/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>


스프링 부트가 제공하는 Welcome Page 기능
https://docs.spring.io/spring-boot/docs/current/reference/html/web.html#web.servlet.spring-mvc.welcome-page


동적페이지

스프링 부트는 다음과 같은 4개의 Template Engine을 제공한다.

  • FreeMarker
  • Groovy
  • Thymeleaf
  • Mustache

https://docs.spring.io/spring-boot/docs/current/reference/html/web.html#web.servlet.spring-mvc.template-engines

이중에 thymeleaf라는 Template Engine을 이용하여 동적페이지를 만들어 본다.

먼저 Controller 안에 아래와 같은 자바 클래스를 생성한다.

hello-spring/src/main/java/hello/hellospring/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";
    }
}

웹 어플리케이션에서 /hello로 요청이 들어올경우 이 메서드를 실행한다. MVC에서 Model에 해당하는 model 객체에 addAttributehello라는 문자열을 넘기고 hello라는 문자열을 리턴한다.

이젠 Controller에서 넣어준 데이터를 받아 화면에 띄울 아래와 같은 템플릿을 만들어준다.

hello-spring/src/main/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>
<a></a>
</body>
</html>

xml의 스키마로 tymeleaf.org 경로를 정해주면 thymeleaf를 사용할 수가 있다. 이때 ${data} 자리에는 HelloControllerhello 메서드에서 Model에 data라는 이름으로 넣어준 "hello!!" 값이 들어가게 된다.


동작원리

  1. localhost:8080/hello라는 이름으로 요청시 내장된 Tomcat에서 /hello만을 받아 전달함.

  2. Get 방식으로 해당 url과 매칭된 메서드가 실행되며, 이 메서드에서 필요한 Model객체를 만들어 넣어줌.

  3. 메서드는 Model객체hello라는 값을 data라는 이름으로 넣어놓고 hello를 리턴함.

  4. 뷰 리졸버(viewResolver)는 이 리턴 값에 따라 templates/hello.html을 찾아 렌더링함.


좋은 웹페이지 즐겨찾기