현대적인 웹 애플리케이션 개발에서 MVC(Model-View-Controller) 패턴은 가장 널리 사용되는 설계 패턴 중 하나입니다. 이 패턴은 애플리케이션을 세 가지 주요 컴포넌트인 모델(Model), 뷰(View), 그리고 컨트롤러(Controller)로 분리하여, 코드의 유지보수성과 확장성을 크게 향상시킵니다.
스프링 부트(Spring Boot)는 이러한 MVC 패턴을 쉽게 적용할 수 있도록 지원하며, 이를 통해 개발자는 복잡한 웹 애플리케이션을 체계적이고 효율적으로 설계할 수 있습니다. MVC 패턴은 사용자 인터페이스와 비즈니스 로직을 명확히 구분함으로써, 웹 애플리케이션의 구조를 깔끔하게 유지하고, 개발과 테스트를 더욱 용이하게 합니다.
이번 포스트에서는 스프링 부트에서 MVC 패턴을 어떻게 구현할 수 있는지 살펴보겠습니다. 모델(Model)이 데이터와 비즈니스 로직을 어떻게 관리하고, 컨트롤러(Controller)가 사용자 요청을 처리하며, 뷰(View)가 사용자에게 정보를 어떻게 제공하는지를 단계별로 알아볼 것입니다. 또한, 간단한 예제를 통해 MVC 패턴에 대해서 알아보겠습니다.
1. MVC 패턴의 정의
MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다.
1-1) 모델(Model)의 정의와 예시
모델(Model)은 애플리케이션의 데이터와 비즈니스 로직을 관리하는 구성 요소입니다. 모델은 데이터를 저장, 수정, 삭제하는 책임을 가지며, 데이터베이스와의 상호작용을 통해 애플리케이션의 상태를 유지합니다. 또한, 비즈니스 로직을 처리하고, 뷰(View)나 컨트롤러(Controller)와의 데이터 교환을 담당합니다.
예시 : 스프링 부트에서는 일반적으로 @Entity 어노테이션이 적용된 클래스가 모델을 나타내며, 데이터베이스와 연동되는 리포지토리(Repository) 클래스(@Repository)와 서비스(Service) 클래스(@Service)가 모델의 주요 부분을 구성합니다.
1-2) 뷰(View)의 정의와 예시
뷰(View)는 사용자가 실제로 보는 화면, 즉 사용자 인터페이스(UI)를 담당하는 구성 요소입니다. 뷰는 모델이 제공하는 데이터를 사용자에게 표시하며, 사용자로부터 입력을 받습니다. 그러나 뷰는 데이터나 비즈니스 로직에 직접적인 접근을 하지 않으며, 단순히 데이터를 표시하고 사용자 입력을 전달하는 역할만 합니다.
예시 : 스프링 부트에서 뷰는 주로 템플릿 엔진(Thymeleaf, Mustache 등)을 사용하여 구현됩니다. 뷰 템플릿은 HTML 파일의 형태로 작성되며, 컨트롤러가 전달한 데이터를 받아 화면에 출력합니다. (오늘 포스트 할 예제는 Thymeleaf를 사용할 예정입니다!)
1-3) 컨트롤러(Controller)의 정의와 예시
컨트롤러(Controller)는 사용자의 요청을 처리하고, 그에 따라 모델을 업데이트하며, 적절한 뷰를 선택해 데이터를 전달하는 역할을 담당합니다. 컨트롤러는 사용자가 웹 애플리케이션에서 어떤 동작을 요청했는지 분석하고, 그에 맞는 비즈니스 로직을 실행하거나, 모델의 데이터를 업데이트합니다. 이후, 해당 결과를 뷰에 전달하여 사용자에게 보여지도록 합니다.
예시: 스프링 부트에서는 @Controller 어노테이션이 적용된 클래스가 컨트롤러 역할을 수행하며, @RequestMapping, @GetMapping, @PostMapping 등의 어노테이션을 통해 특정 URL 요청을 처리하는 메서드를 정의합니다.
2. MVC 패턴의 간단한 예제
// controller
@Controller
public class HelloController {
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model) {
model.addAttribute("name", name);
return "hello-template";
}
}// view
// resources/templates/hello-template.html
<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>
MVC 패턴의 작동원리
위의 예제에 대한 작동원리를 알아보기 전, MVC의 작동원리에 대해서 간단하게 설명하고, 위의 예제를 적용해보겠습니다.
1. 사용자 요청(User Request)
- 사용자가 웹 브라우저를 통해 특정 URL에 접근하거나, 버튼 클릭, 폼 제출 등의 동작을 수행합니다. 이때 HTTP 요청이 서버로 전송됩니다.
2. 컨트롤러가 요청을 처리 (Controller Handles the Request)
- 서버로 전송된 요청은 먼저 컨트롤러(Controller)에게 전달됩니다. 스프링 부트에서는 이 역할을 @Controller 어노테이션이 붙은 클래스가 담당합니다.
- 컨트롤러는 요청된 URL과 매핑된 메서드를 실행합니다. 예를 들어, 사용자가 /hello URL로 요청을 보냈다면, 해당 URL에 매핑된 메서드가 실행됩니다.
3. 비즈니스 로직 수행 및 데이터 처리 (Business Logic and Data Processing)
- 컨트롤러는 요청을 처리하기 위해 필요한 경우 모델(Model)과 상호작용합니다.
- 모델은 데이터베이스에서 데이터를 가져오거나, 비즈니스 로직을 처리합니다. 이 과정에서 데이터의 생성, 수정, 삭제 등의 작업이 수행될 수 있습니다.
- 예를 들어, 사용자가 제품 목록을 요청했다면, 모델은 데이터베이스에서 제품 데이터를 가져오게 됩니다.
4.모델 데이터를 컨트롤러로 반환 (Model Data Returned to Controller)
- 모델이 처리한 데이터는 컨트롤러로 반환됩니다. 컨트롤러는 이 데이터를 뷰(View)에 전달할 준비를 합니다.
5. 뷰 선택 및 데이터 전달 (View Selection and Data Passing)
- 컨트롤러는 반환된 데이터를 적절한 뷰(View)에 전달합니다. 스프링 부트에서는 주로 템플릿 엔진(Thymeleaf, Mustache 등)을 사용해 뷰를 생성합니다.
- 컨트롤러는 뷰의 이름과 함께 모델 데이터를 넘겨주어, 해당 데이터를 화면에 표시하도록 합니다.
- 예를 들어, 컨트롤러가 "productList"라는 뷰 이름을 반환하면, 스프링은 "productList.html" 템플릿 파일을 찾아 데이터를 그 안에 렌더링합니다.
6. 뷰가 사용자에게 렌더링 (View Rendered to User)
- 뷰는 전달받은 데이터를 HTML로 렌더링하여 사용자에게 보이는 웹 페이지를 생성합니다.
- 사용자는 최종적으로 이 HTML 페이지를 웹 브라우저에서 확인하게 됩니다.
예제 작동원리
- 사용자가 /hello-mvc?name=John URL로 요청을 보냅니다.
- 스프링 컨트롤러가 이 요청을 받아 name 파라미터를 추출하고, 그 값을 모델에 추가합니다.
- 컨트롤러는 hello-template이라는 이름의 뷰 템플릿을 반환합니다.
- 템플릿 엔진(Thymeleaf)은 hello-template.html 파일을 렌더링하면서, model에서 전달된 name 값을 사용해 "hello John"이라는 내용을 생성합니다.
- 최종적으로, 생성된 HTML이 사용자에게 전달되고, 사용자는 웹 페이지에서 "hello John"이라는 문구를 확인합니다.
이 과정에서 MVC 패턴의 각 요소가 명확히 분리되어 동작하며, 요청 처리, 비즈니스 로직 실행, 그리고 화면 렌더링의 역할이 각각 구분되어 있습니다.
이번 포스트에서는 스프링 부트에서 MVC 패턴을 활용해 간단한 웹 애플리케이션을 구성하는 방법을 살펴보았습니다. 컨트롤러, 모델, 뷰가 각각 어떻게 동작하며, 사용자 요청이 처리되고 결과가 화면에 표시되는지 구체적인 예제를 통해 이해할 수 있었습니다. MVC 패턴은 웹 애플리케이션의 구조를 깔끔하고 유지보수하기 쉽게 만들어주므로, 이를 잘 이해하고 활용하는 것은 매우 중요합니다.
이제 스프링 부트를 사용해 보다 복잡한 애플리케이션을 만들 때, MVC 패턴을 활용하여 더욱 구조적이고 효율적인 코드를 작성할 수 있을 것입니다. 다음 포스트에서는 다음 포스트에서는 스프링 부트에서 API(Application Programming Interface)를 구축하는 방법에 대해 다룰 예정입니다. 다음 포스트에서 만나요~!
