[SpringBoot] View 환경 설정

9963 단어 SpringbootSpringboot

✔️ Welcome Page


📌 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 템플릿 엔진


📌 동작 화면 생성

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. 스프링은 helloControllerGetMapping("hello")에 매칭하면서 메소드 실행
4. 스프링이 모델을 만들어서 넣어주고 모델에 key=data, value=hello!인 속성 추가
5. 메소드에서 hello를 리턴하는데 여기서 hello는 templates/hello.html (hello.html 화면 실행)

  • 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리함
    : 스프링 부트 템플릿엔진은 기본적으로 viewName에 매핑
    resources:templates/ + {ViewName} + .htmlViewNamehello로 바뀌면서 hello.html이 열리게 됨

좋은 웹페이지 즐겨찾기