2. Spring 시작해 보기: Spring Boot 에서 정적 View와 Template View

2023-01-13 spring-study

Intro

이번 동아리에서 진행하는 Spring Study을 통해서 인프런 강의를 듣고, 관련 내용을 정리합니다.

특히 해당 강의 내용은 Java Spring Boot을 기준으로 설명하지만, 적절히 현재 현업에서 사용중인 ASP.NET Core과 비교도 하면서, 관심이 많았던 Kotlin 언어를 적절히 적용해서 정리합니다.

이번 정리의 핵심

Welcome Page!(정적 View)
Template && View Controller

Welcome Page

개요

Spring Boot supports both static and templated welcome pages. It first looks for an index.html file in the configured static content locations. If one is not found, it then looks for an index template. If either is found, it is automatically used as the welcome page of the application.

즉, Spring은 Static/Template화 된 Welcome Page 기능을 제공하는데, Static Content Location($ROOT/src/main/resources/static)에 있는 index.html 을 찾아보고, 없으면 index template를 찾아본다는 뜻. (아래는 Search Order)

$ROOT/src/main/resources/static/index.html
$ROOT/src/main/resources/templates/index

Welcome Page를 작성해 봅시다!

$ROOT/src/main/resources/static에 index.html을 아래와 같이 적어본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello, World!
<a href="/hello">Go to Hello Page</a>
</body>
</html>

실행 결과

Template && View Controller

개요

Thymeleaf Engine 템플릿을 사용해서 View를 정의한다. 전체적으로 코드와 작동 방식 보니까 Razor View Page랑 거의 비슷해 보이는데, 결국 서버 쪽에서 데이터를 충분히 담에서 View 자체를 반환하는 것을 의미합니다. 흔히 ‘템플릿’ 엔진에서는 서버에서 담아주는 데이터를 각 템플릿 언어에 맞게 치환해서 사용자에게 보여줍니다.

개인적으로는, Thymeleaf보다는 Razor Page가 조금 더 편해 보이는? - Razor Page는 (백엔드 코드로 쓰이는) C# 코드를 거의 대부분 쓸 수 있지만 Thymeleaf같은 템플릿은 템플릿 언어가 따로 있어서…

어찌 되었든, 이 섹션에서는 크게 두가지 컴포넌트로 나뉘는 것 같은데요, 아래 2가지와 같습니다.

데이터를 반환하는 Controller
받은 데이터를 적절히 보여줄 View(HTML + Template Engine)

Template View 작성하기

$ROOT/src/main/resources/templates/hello.html 작성(Thymeleaf Engine 템플릿 사용)

아래 코드 중 ${data} 부분이 서버(View Controller)에서 내려주는 데이터, 아래 예시에서는 단순한 String 값.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="'Hello ' + ${data}">Hello!</p>
</body>
</html>

Controller 정의(controllers/HelloController.kt)

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

@Controller // 1. 해당 클래스는 컨트롤러 클래스.
class HelloController {
    @GetMapping("hello") // 2. HTTP GET 요청, "$HOST/hello" 요청 들어왔을 때, 함수 실행
    fun hello(model: Model): String {
        model.addAttribute("data", "KangDroid") // 3. HTML에서 정의한 'data'에 'KangDroid'라는 값 할당
        return "hello" // 4. resources/templates/hello.html 템플릿 사용
    }
}