이 글에서는 MVC 패턴과 뷰 템플릿을 활용한 스프링 부트 웹 애플리케이션 개발 방법을 다룹니다.
📖 참고 자료 : 코딩 자율학습 스프링 부트 3 자바 백엔드 개발 입문
1. MVC 패턴이란?
MVC(Model-View-Controller) 패턴은 웹 애플리케이션에서 클라이언트의 요청을 처리하고 화면을 구성하는 역할을 효과적으로 분리하는 설계 방식입니다.
- Model(모델): 데이터와 비지니스 로직을 관리하는 역할을 합니다.
- View(뷰): 사용자에게 화면을 출력하는 역할을 합니다.
- Controller(컨트롤러): 클라이언트의 요청을 받아 처리한 후, 적절한 데이터를 모델에서 가져와 뷰에 전달하는 역할을 합니다.
👉 이러한 역할 분리를 통해 코드의 재사용성, 유지보수성, 확장성을 높일 수 있습니다.
2. 뷰 템플릿 생성
스프링 부트에서는 Mustache를 사용하여 뷰 템플릿을 관리할 수 있습니다.
- 파일 생성 경로
📂 src/main/resources/templates 디렉터리에 .mustache 확장자를 가진 파일을 생성합니다.
💡Mustache란?
머스태치(Mustache)는 간결하고 직관적인 문법을 제공하는 뷰 템플릿 엔진으로 스프링 부트에서는 resources/templates 폴더에 위치한 .mustache 파일을 자동으로 로딩합니다.
3. 컨트롤러 생성
- 파일 생성 경로
📂 src > main > java > 기본 패키지 안에 controller 패키지를 만든 후, .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 HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Hello, Mustache!");
return "home";
}
}👉 위 코드는 / 경로로 요청이 들어오면 home.mustache 뷰 템플릿을 반환하도록 설정합니다.
4. 모델을 통해 변수 등록
뷰에서 데이터를 표시하려면 컨트롤러에서 Model 객체를 통해 변수를 전달해야 합니다.
모델에서 변수를 등록할 때는 addAttribute() 메서드를 사용합니다.
model.addAttribute("변수명", 변숫값);👉 예를 들어, model.addAttribute("username", "홍길동"); 라고 설정하면 뷰에서 {{username}}을 사용하여 값을 출력할 수 있습니다.
5. 헤더-푸터 레이아웃
웹 애플리케이션에서 일관된 디자인을 유지하기 위해 레이아웃을 분리하여 사용합니다.
특히, 헤더(Header)와 푸터(Footer)를 따로 관리하면 코드 재사용성과 유지보수성이 높아집니다.
- 헤더(Header) : 사이트 안내 및 내비게이션 메뉴 등 사이트 공통 안내 요소 포함
- 본문(Content) : 페이지별 주요 내용을 표시하는 영역
- 푸터(Footer) : 저작권 정보, 연락처 등 사이트 하단 정보 포함
👉 헤더와 푸터를 템플릿으로 분리하면 한 번의 수정으로 모든 페이지에 적용할 수 있어 개발이 훨씬 편리해집니다!
6. 레이아웃 템플릿 생성과 적용
1) 레이아웃 템플릿 생성
- src/main/resources/templates/layouts/ 디렉터리에 .mustache 파일을 생성
- 레이아웃 템플릿을 삽입할 때는 원하는 위치에서 {{>파일경로/파일명}} 형식으로 작성합니다.
💡 예제: header.mustache 파일을 삽입하는 경우
{{> layouts/header}}
<h1>환영합니다!</h1>
{{> layouts/footer}}