[1-2] View 환경설정

ohun·2022년 5월 21일
0

Spring 입문

목록 보기
3/16
post-thumbnail

Welcome 페이지 만들기

hello-static.html

  • main.resources.static 아래에 hello-static.html 파일 생성
<!DOCTYPE HTML>
<html>
<head>
    <title>static content</title>
    <meta  http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.
작성한 화면 그대로를 보여주며 무언가 작동은 불가능합니다!
</body>
</html>
  • 정적 화면을 제공한다.

Thymeleaf 템플릿 엔진

  • 공식 사이트 Thymeleaf
  • thmeleaf 를 이용해서 동적으로 구성해보자.

HelloController, hello.html

  • main.java.hello.hellospring 아래에 controller 패키지 생성 후 HelloController 를 생성한다.
    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";
        }
    }
    • 그리고 class 위에 @Controller 어노테이션을 추가한다.(org.springframework 제공)
    • @GetMapping(”hello”) : 웹 어플리케이션에서 ‘/hello’ 로 들어오면 해당 메서드를 호출한다.
    • mvc 에서 m 에 해당하는 model 에 ‘hello’ 라는 ‘data’ 를 넘긴다.
    • 그리고 hello 를 return
  • main.resources.templates 아래에 hello.html 파일을 생성한다.
    <!DOCTYPE HTML>
    <html xmlns:th="httpL://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>
    • 타임리프 문법을 쓸 수 있도록 타임리프 템플릿 엔진을 위에 선언.
    • ${data} 는 위의 controller 에서 넘긴 data 인 hello 로 치환된다.
  • 이후 localhost:8080/hello 페이지를 확인하면 안녕하세요. hello!! 가 출력되는 것을 확인할 수 있다.

동작 환경

  • 웹 브라우저에서 localhost:8080/hello 주소를 던지면 스프링 부트 내에 톰캣이라는 내장 서버에서 받고, 톰캣은 스프링에 hello 에 대해서 물어본다.
  • 스프링 내 controller 에서 hello 에 주소가 맵핑(@GetMapping)되어있는 메소드가 있는지 먼저 찾는다.
    • 만약 맵핑된 메서드가 존재한다면 해당 메서드를 실행한다.
    • Model model 로 모델 생성 후 model.addAttribute 로 hello 라는 data를 추가한다.
    • hello 를 return 하는데, 이 때 뷰 리졸버(viewResolver)가 resources.templates 아래에서 hello 라는 화면을 찾아서 처리한다.
      • resources:templates/ + {ViewName} + .html 파일을 연다.
profile
공부 중입니다.

0개의 댓글