[Spring][혼공] 3. 프로젝트 만들어보기 - View 환경 설정 (3)

프로젝트 만들어보기

2. View 환경 설정

현재 프로젝트를 실행하면 에러 페이지만 나타나는데, 이 페이지를 바꿔볼 것이다.

1) Welcome 페이지 만들기

Welcome 페이지란 도메인을 입력하고 들어왔을 때 나타나는 첫 페이지를 말한다.

스프링 부트는 resources/static 해당 폴더 위치에 index.html를 생성하면 해당 파일을 Welcome 페이지로 인식한다.

지금 Welcome 페이지의 상태는 정적 페이지 상태인데, html 파일을 웹서버가 읽어간 후 단지 보여주기만 하고 있다.

여기서 템플릿 엔진을 사용하여 개발자가 원하는 대로 모양을 변경할 수 있다.

2) thymeleaf 템플릿 엔진

동작 방식

웹 브라우저에서 어떤 페이지를 던지면 내장 톰캣 서버가 받아서 스프링한테 전달한다.

전달받은 스프링은 매칭 가능한 컨트롤러를 찾아 해당 메서드를 실행시킨다. (@GetMapping)

이때, 스프링이 모델이란 것을 만들어 함께 넣어주는데 (Model model)

이 모델에 여러 애트리뷰트들을 추가하여 뷰에 보일 수 있도록 할 수 있다. (model.addAttribute)

그리고 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리하는데, (return "hello";)

템플릿 엔진의 기본 viewName 매칭은 'resources/templates/{ViewName}.html'이다.

Controller

웹 애플리케이션의 첫 번째 진입점이다.
컨트롤러를 생성하기 위해 먼저 컨트롤러의 패키지와 java 클래스 파일을 만들어야 한다.

package hello.hello.spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller // 컨트롤러임을 알려주는 어노테이션
public class HelloController {

    @GetMapping("hello") // 웹 어플리케이션에서 '/hello'로 들어오면 이 메서드를 호출한다.
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello"; // 문자열 값에 맞는 html을 찾아 화면에 보여준다.
    }
}

View

HelloController의 View이다.
타임리프의 문법을 사용하기 위해 th로 선언되어 있다.
{data}는 앞서 Controller에서 입력한 모델 애트리뷰트의 key 값으로 실행 화면엔 value 값이 보이게 된다.

<!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>