[Spring Boot] View 템플릿과 레이아웃 (Feat.부트스트랩)

준우·2022년 5월 10일

Spring Boot

목록 보기

3/8

지난 포스팅 [Spring Boot] View 템플릿과 MVC 패턴 실습 을 통해 페이지를 생성하고, 아래와 같이 CSS를 적용했다고 하자.
추가로 다른 페이지를 만들 것이고, 페이지가 이동되더라도 동일한 CSS가 적용되도록 하고 싶다면, 가장 간단하고 편한 방식은 무엇일까? 바로 View 템플릿을 이용하는 것이다.

프로젝트 실습

새로운 main > resources > template 경로에 layouts 폴더를 생성한다.
해당 경로 안에 header.mustache 파일과 footer.mustache 파일을 생성한다.
그리고 각각의 파일에 홈페이지 상단 혹은 하단에 공통적으로 적용하고 싶은 html/css 코드를 넣는다.
공통적으로 적용될 코드들을 하나의 파일로 만들어서 변수화 하는 것이다.

아래는 부트스트랩을 통해 제공되는 오픈 소스이며 홍팍님의 클라우드 스터딩 사이트에서 가져온 것이다.

header.mustache

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Hello, world!</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

footer.mustache

<!-- site info -->
<div class="mb-5 container-fluid">
  <hr>
  <p>ⓒ CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<Script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

goodbye.mustache

그리고 새로운 웹페이지를 goodbye.mustache 파일로 생성한 뒤 이미지 처럼 헤더와 콘텐츠, 푸터 영역으로 나눈다.
헤더 영역에는 {{>layouts/header}} 를, 콘텐츠에는 웹페이지에 보여주고 싶은 내용을, 푸터에는 {{>layouts/footer}} 를 적는다. {{>}} 안에 해당 레이아웃이 들어있는 파일을 경로와 함께 적어준다.
즉 layouts 폴더안에 생성한 header 파일과 footer 파일을 참조할 수 있도록 한 것이다.
변수는 {{}} 안에, 참조할 파일을 불러올 때는 {{}} 안에 꺽새를 추가해 {{>}} 와 같이 적어야 한다.

FirstController.java

package com.example.firstproject.controller;

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

@Controller
public class FirstController {

    @GetMapping("/hi")
    public String nicetoMeetyou(Model model){
        model.addAttribute("username","밤방");
        return "greetings";
    }

    @GetMapping("/Bye")
    public String seeYouNext(Model model){
        model.addAttribute("username","밤방");
        return "goodbye";
    }
}