MVC 패턴, 뷰 템플릿(View Template)

하쮸·2024년 11월 20일
MVC 패턴(Model-View-Controller Pattern)부트스트랩(Bootstrap)뷰 템플릿(View Template)스프링 부트(Spring Boot)
0

Spring Boot - article_comment

목록 보기
1/19
post-thumbnail

1. 뷰 템플릿(View Template)

  • 화면을 담당하는 기술.
  • 웹 페이지(view)를 하나의 틀(template)로 만들고 여기에 변수를 삽입해서 서로 다른 페이지를 보여줌.
    • Ex 네이버 로그인을 하면 사용자의 이름이 표시가 되는 데 그 부분을 변수로 할 경우 모든 페이지는 동일한데 사용자 이름만 그때 그때마다 다르게 나옴.
  • 템플릿 엔진으로는 JSP, Mustache, Thymeleaf 등이 있음.
HTML뷰 템플릿
정적 웹 페이지동적 웹 페이지

2. MVC 패턴.

  • 화면을 담당하는 뷰 템플릿을 간단히 뷰(view)라고 부름.

  • 컨트롤러(controller)는 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할.

  • 모델(model)은 데이터를 관리하는 역할.

  • 웹 페이지를 화면에 보여주고(view) 클라이언트의 요청을 받아 처리하고(controller) 데이터를 관리하는(model) 역할을 나누는 기법을 MVC 패턴(Model-View-Controller Pattern)이라고 함.

3. Spring Boot에서 뷰 템플릿.

  • src -> main -> resources
    • 뷰 템플릿은 templates 디렉토리에 만듦.
    • 뷰 템플릿 페이지를 간단히 뷰 페이지라고 함.
      • 해당 위치에 mustache 파일을 생성하면 스프링 부트에서 자동으로 로딩함.
        • templates -> new file -> ***.mustache
          (끝에 반드시 .mustache와 같은 확장자 명 적어주기.)
    • .mustache는 뷰 템플릿을 만드는 도구. (뷰 템플릿 엔진을 의미함)

  • doc 입력 후 tab 키를 눌러주면 자동으로 기본 HTML 코드가 추가 됨.

  • 이 페이지를 웹 브라우저에서 보려면 controller와 model을 활용하면 됨.
    • MVC 패턴

3-1. 어노테이션(annotation).

  • 어노테이션이란.
    • 소스 코드에 추가해서 사용하는 메타 데이터의 일종.
    • 메타 데이터는 프로그램에서 처리해야 할 데이터가 아니라, 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려주는 추가 정보를 뜻함.

3-2. 컨트롤러에서 뷰 페이지 반환.

  • 메서드를 통해서 뷰 페이지를 반환하려면 return값에 파일 이름만 적어주면 됨.
    • hi.mustache이므로 return "hi";를 적어주면 서버가 알아서 templates 디렉토리에서 hi.mustache파일을 찾아 웹 브라우저로 전송함.
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>하이 하이 하이 하이</h1>
</body>
</html>
@Controller		// 컨트롤러임을 선언.
public class HiController {
    @GetMapping("/hi")
    public String hi() {
        return "hi";
    }
}
  • @GetMapping() : 페이지를 반환해 달라는 URL 요청을 받는 부분.
  • 만약 웹 브라우저에서 한글 깨짐 현상이 발생하면 application.properties에 server.servlet.encoding.force=true 코드를 추가해 주면 됨.

3-3. 모델, 뷰

  • 일반 HTML일 경우 페이지가 고정값이지만 뷰 템플릿을 활용하면 출력화면을 바꿀 수 있음.
    • mustache를 활용해서 뷰 템플릿 페이지에 변수를 삽입함.
<!--  Mustache에서 변수 삽입 문법.  -->
{{변수명}}
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{username}} 하이 하이 하이</h1>
</body>
</html>
  • 모델(model)은 MVC 패턴에서 데이터를 관리하는 역할.
  • 모델은 컨트롤러의 메서드에서 매개변수로 받아옴.
    • 모델을 통해 뷰 페이지에서 사용할 변수를 등록할 수 있음.
      • 즉, 뷰 템플릿 페이지에서 변수를 사용하려면 해당 뷰를 반환하는 컨트롤러의 메서드에 사용할 변수를 모델(Model)을 이용해서 등록해야됨.
model.addAttribute("변수명", 변숫값)	// 변숫값을 "변수명"이라는 이름으로 추가함.
model.addAttribute(attributeName, attributeValue)
@Controller
public class HiController {
    @GetMapping("/hi")
    public String hi(Model model) {		// Model 타입 model 매개변수 추가.
        model.addAttribute("username", "가나다");
        return "hi";
    }
}
  • 모델을 통해서 변수를 등록할 수 있음.
    • addAttribute() 메서드를 사용함.

3-3-1. Model 인터페이스.

import java.util.Collection;
import java.util.Map;
import org.springframework.lang.Nullable;

public interface Model {
    Model addAttribute(String attributeName, @Nullable Object attributeValue);

    Model addAttribute(Object attributeValue);

    Model addAllAttributes(Collection<?> attributeValues);

    Model addAllAttributes(Map<String, ?> attributes);

    Model mergeAttributes(Map<String, ?> attributes);

    boolean containsAttribute(String attributeName);

    @Nullable
    Object getAttribute(String attributeName);

    Map<String, Object> asMap();
}

4. MVC역활, 실행흐름.

  • controller가 클라이언트의 요청을 받고, view가 최종 페이지를 만들고, model이 최종 페이지에 쓰일 데이터를 view에 전달함.
  • 웹 서비스는 클라이언트의 요청에 대한 서버의 응답으로 동작함.
    • 스프링 부트는 서버의 역할.

5. 뷰 템플릿 레이아웃.

  • 레이아웃(layout)이란?

    • 화면에 요소를 배치하는 일.

  • 헤더-푸터 레이아웃(header-footer layout)은 가장 기본이 되는 레이아웃임.

    • 상단(header)에 사이트 안내를 위한 내비게이션을 넣고
    • 하단(footer)에 사이트의 정보를 넣고
    • 상단, 하단 사이에는 사용자가 볼 핵심 내용(content)를 배치함.

5-1. 부트스트랩.

  • 부트스트랩(Bootstrap)
    • 웹 페이지를 쉽고 간편하게 만들 수 있도록 작성해놓은 코드 모음.
    • 각종 레이아웃, 버튼, 입력창 등 디자인을 미리 구현해 놓음.

5-1-1. Start template(콘텐츠 영역)

<!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  -->
    
    <!--  content  -->
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    
    <!--  site info  -->
    <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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

5-1-2. 내비게이션 바(헤더 영역)

  • 부트스트랩에서 navbar 검색.
    • 주로 사용하는 메뉴와 검색창으로 구성되어 있음.
<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>

5-1-3. footer(푸터 영역)

  • 간단하게만 구현.
<div class="mb-5 container-fluid">
    <hr>
    <p>ⓒ Springboot | <a href="#">Study</a> | <a href="#">(^오^)</a></p>
</div>

5-1-4. 수정된 HTML 코드를 서버에 빠르게 반영시키기

  • ctrl + F9 or 상단바에 Build -> Build Project 클릭.
    • 프로젝트를 빌드해서 수정된 HTML 코드를 좀 더 빠르게 서버에 반영할 수 있음.
      • 서버를 재시작하지 않고.

5-2. 헤더-푸터 레이아웃 전체 코드.

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

<!--  content  -->
<h1>{{username}} 하이 </h1>


<!--  site info  -->
<div class="mb-5 container-fluid">
    <hr>
    <p>ⓒ SpringBoot | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<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>

5-3. 템플릿화.

  • 템플릿화란?
    • 코드를 하나의 틀로 만들어서 변수화 하겠다는 의미.
    • Ex 헤더 영역에는 {{>header}}, 푸터 영역에는 {{>footer}}로 처리해서 고정하고 컨텐츠영역만 유동적으로.
      • 그렇게 하려면 header영역과 footer영역을 추출해서 템플릿 파일로 생성해야 함.
  • 뷰 템플릿 파일을 불러올 때는 >을 추가해서 {{>파일명}}으로 작성.
    • 디텍터리 안에 생성했다면 파일 경로를 포함해서 작성해야 됨.
    • Ex resources -> templates -> layouts에 템플릿 파일이 있을 경우
      {{>layouts/header}}이런 식으로 작성해주면 됨.

5-3-1. 템플릿화 코드.

header

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

<!--  site info  -->
<div class="mb-5 container-fluid">
    <hr>
    <p>ⓒ SpringBoot | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
<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>

5-3-2. 템플릿화 이후의 코드.

{{>layouts/header}}

<!--  content  -->
<div class="bg-dark text-white p-5">
    <h1>{{username}} 하이 </h1>
</div>

{{>layouts/footer}}
profile
하쮸
Every cloud has a silver lining.
다음 포스트

폼 데이터(form data), DTO(Data Transfer Object)

0개의 댓글