SW 개발/Spring

Spring Boot, Pebble 템플릿 뷰 적용하기

지단로보트 2019. 9. 28. 12:25

Spring Boot, Pebble 템플릿 뷰 적용하기

  • Pebble은 PHP 개발자가 PHP의 유명한 템플릿 엔진인 Twig에 영감을 받아 만든 Java 진영의 템플릿 엔진이다. 간결한 문법과 기본기로 최근 서버 사이드 템플릿으로서의 점유율을 높이고 있다.
  • 요즘 프론트엔드 개발이 SPA로 완전히 트렌드가 변화하면서 서버 사이드 진영의 템플릿들은 과거의 것으로 취급 받는 느낌이 있다. 하지만, SPA 기반의 프로젝트에서도 서버에서의 템플릿 엔진 처리는 여전히 필요하다. 때때로 간단한 목적의 프로젝트를 제작하기에는 템플릿 엔진이 더 생산적으로 효과적인 경우도 있다. 본 글에서는 Spring Boot에서 사용 가능한 Pebble 템플릿 엔진의 사용법을 소개하고자 한다.

라이브러리 종속성 추가

  • 프로젝트 루트의 /build.gradle.kts 파일에 아래 내용을 추가한다.
val developmentOnly by configurations.creating
configurations {
    runtimeClasspath {
        extendsFrom(developmentOnly)
    }
}

dependencies {
    implementation("io.pebbletemplates:pebble-spring-boot-starter:3.1.5")
    developmentOnly("org.springframework.boot:spring-boot-devtools:2.5.2")
}

환경 변수 설정

  • Pebble의 기본 템플릿 확장자는 .pebble이다. 매번 6글자를 사용하기에는 번거로움이 있어 아래와 같이 환경 변수를 추가하여 .peb로 변경할 수 있다.
pebble:
  suffix: .peb

Pebble 템플릿 플러그인 설치

  • Intellij IDEA 사용자는 플러그인 마켓플레이스에서 Pebble을 무료로 설치할 수 있다. Pebble 템플릿 문법을 인지하여 편리한 사용이 가능해진다. [플러그인 링크]
  • 플러그인만 설치하고 .pebble 템플릿 파일을 열어보면 Pebble 문법만 지원하여 정작 HTML 문법은 지원하지 않는다. File > Settings > Languages & Frameworks > Template Data Languages 메뉴 진입 후 Project Language: HTML 선택 후 + 기호를 클릭하고 /src/main/resources/templates 디렉토리를 추가하면 HTML과 Pebble 문법을 동시에 지원되는 것을 확인할 수 있다.

템플릿 작성

  • 프로젝트 루트의 /src/main/resources/templates 디렉토리에 foobar.peb라는 템플릿 파일을 아래와 같이 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{{ title }}</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>{{ body }}</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
</body>
</html>

컨트롤러 작성

  • 이제 템플릿을 출력할 컨트롤러를 작성할 차례이다.
package com.jsonobject.example

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

@Controller
class FooBarController {

    @GetMapping("/foobar")
    fun renderFoo(model: Model): String {

        model.addAttribute("title", "Hello, Pebble!")
        model.addAttribute("body", "Hello, Pebble!")

        return "foobar"
    }
}

참고 글