TIL | [Spring] 뷰 템플릿과 MVC 패턴

hyemin·2022년 4월 6일

Spring TIL

Spring

목록 보기

4/7

아주 기본적인 것이지만 프론트와의 협업을 앞두고 정리가 필요할 것 같아서 기록하게 되었다.

View 템플릿

특정 페이지가 사용자마다 다르게 표현되어야 할 때 사용자 수만큼 페이지 수를 만드는 것을 아주 비효율적이다. 이런 문제를 해결하기 위해 화면을 담당하는 기술인 View 템플릿을 이용한다.

View 템플릿
ㅇ웹 페이지를 하나의 틀로 생각하고 변수를 삽입해 틀이 되는 페이지가 변수에 따라 다양한 페이지로 변화될 수 있게 해주는 기술
[네모 박스 안의 변수만 바꿔주면 된다]

Spring에서 사용가능한 View 템플릿은 다음과 같이 다양하다.

FreeMarker
Groovy
jsp
Velocity
Mustache
Thymleaf

MVC 패턴

여기서도 간단하게 정리했지만 다시 정리하면, MVC 패턴은 화면을 담담하는 View와 처리 과정을 담당하는 Controller, 데이터를 관리하는 Model로 각각의 담당자를 두고 처리하는 기법이다.

활용하기

예시로 Thymleaf 템플릿을 사용하여 간단하게 MVC 패턴 동작을 알아보려한다.

1. View 페이지 작성

각종 필요한 플러그인 및 dependency 설정에 대한 설명은 생략하겠다.

Thymleaf는 templates에서 View를 불러오기 때문에 다음 위치에 파일을 생성한다.

src - main - resources - templates 에 hom.html 파일 생성

다음과 같이 같단한 html 코드를 작성한다.

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello! 반갑습니다 hyemco님</h1>
</body>
</html>

2. Controller 작성

View 페이지를 보기 위해서 Controller에서 처리를 해줘야 한다.

src - main - java - 기본 패키지 - controller 패키지 생성 후 controller 패키지에 HomeController Java Class를 생성한다.

아래와 같은 코드를 입력한다.

@Controller - View를 반환
@GetMapping("url") - HTTP GET 요청 처리
→ url을 입력받으면 home.html을 찾아서 반환

package com.example.spring_prac.controller;

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

@Controller
public class HomeController {

    @GetMapping("/main")
    public String home() {
        return "home";  // templates/home.html을 브라우저로 전송
    }
}

여기까지 입력하고 서버를 돌린 후 http://localhost:8080/main에 접속하면 아래와 같은 화면이 브라우저에 나타난다.

그러나 위의 페이지는 그냥 html을 화면에 띄운 것과 별반 차이가 없기 때문에 model을 이용해 데이터를 집어넣어 보려한다.

3. 페이지에 변수 삽입 - Model 사용

home.html

<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello! 반갑습니다 <span th:text="${username}"></span>님</h1>
</body>
</html>

이름 부분에 Thyemleaf 문법을 이용하여 username이라는 변수를 넣어 주었다.

HomeController

package com.example.spring_prac.controller;

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

@Controller
public class HomeController {

    @GetMapping("/main")
    public String home(Model model) {
        model.addAttribute("username", "hyemco(혬코)");
        return "home";  // templates/home.html을 브라우저로 전송
    }
}