🔎 MVC 패턴이란?
📌 Model, View, Controller의 약자로 소프트웨어 디자인 패턴 중 하나
- UI 와 비즈니스 로직 부분을 분리할 수 읶어서 협업 시 유연하고 업무 분장 및 개발 분리를 편리하게 처리할 수 있다.
- 각각의 업무 로직을 분리할 수 있으므로 추후 업데이트나 유지보수 등에서도 편리하다.
- 뷰 페이지단과 데이터 처리 부분이 분리됨으로써 재사용이 용이하다.
✅ Model
- 데이터
✅ View
- UI, 즉 사용자 인터페이스로써 사용자가 접속해서 실제적으로 보고 이용하는 웹페이지 화면단
✅ Controller
- 뷰페이지와 모델을 이어주는 중간 다리 역할
- 사용자의 요청이 들어오면 그에 맞는 적절한 뷰페이지를 연결하여 결과를 리턴
- 단순 요청 뿐만 아니라 데이터 전달 및 비즈니스 로직을 호출하여 그 결괏값을 전달하는 역할
📌설명
사용자가 요청할 때, 단순 요청인 경우도 있지만 데이터를 전달하면서 요청하는 경우도 있다.
이 데이터를 적절하게 처리해서 이에 맞는 응답을 보내야 한다. 이 데이터를 우리는 모델이라고 한다.
📌 규모가 큰 서비스를 개발할 때 효율적이다.
🔎 단순 요청인 경우
@Controller
public class SampleController1 {
@GetMapping("/user/userinfo")
public String userInfo(){
return "/user/userinfo";
}
}
사용자가 `localhost:8080/user/userinfo`라고 요청을 넣으면 단순히 user 폴더 하위에 있는 `userinfo.html`이 리턴된다.
따로 데이터를 전달하지 않으므로, 이 경우가 바로 단순 요청인 경우이다.
🔎 데이터를 전달하는 경우
사용자가 데이터를 전달하는 경우는 모델을 사용하여 전달한다.
@GetMapping("/user/userdata")
public String userData(Model model){
// 모델(데이터)에 key와 value를 추가
model.addAttribute("username","홍길동");
// 뷰페이지단으로 같이 데이터(model) 전달
return "/user/userinfo";
}사용자가 전달한 데이터에 속성과 값을 추가하고 싶다면 `model.addAttributes()`를 사용하여 추가하면 된다.
그럼 `html` 파일에서 이 모델을 받으려면 어떻게 해야 할까?
다음과 같은 속성을 추가하여 속성으로 추가했던 `username`의 값을 불러올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SampleController</title>
</head>
<body>
<h1>userinfo.html</h1>
<h1 th:text="${username}"></h1>
</body>
</html>이를 실행하면
이렇게 추가한 속성의 값이 잘 출력되는 것을 볼 수 있다.
🔎 HTML 파일과 Template 파일의 차이점
📌 보통의 HTML 파일은 정적 파일이며, Template Engine 파일은 동적 파일이다.
동적이라는 것은 말 그대로, 컨텐츠의 내용이 바뀔 수 있다는 뜻이다.
이를 위해서는 내부에서 이러한 컨텐츠의 변화되는 부분을 반영할 수 있도록 해줘야 하는데, 이때 템플릿 에진의 문법이 사용된다.
- Thymeleaf, Mustache, JSP 등은 뷰페이지 단을 표현하는 언어라고 생각하면 된다.
- 각각의 템플릿 엔진 별 고유 문법을 배우고 익히는 과정이 필요
- 특히 웹 개발의 특성상 템플릿 문법을 배우는 것 이외에도 레이아웃을 구성하는 문법과 사용법을 배우는 것이 중요하다.
위 예제에서 아래와 같은 문법을 사용했던 파일이 바로 동적 파일이라고 할 수 있다.
<h1 th:text="${username}"></h1>
만약 기본값을 넣고 싶다면 태그 값을 넣어주면 된다.
<h1 th:text="${username}">Guest</h1>이 경우, Guest가 기본값으로 설정되었다.
🔎 파라미터 전달하기
`username` 값 외에 글자를 추가하여 (ex. 안녕하세요~홍길동입니다.) View에 표시하고 싶다면 `' '`와 `+`를 사용하여 연결해주면 된다.
<h1 th:text="'안녕하세요~'+ ${username} + '입니다'">Guest</h1>그럼 아래와 같이 문장이 잘 나타난 것을 볼 수 있다.
🔎 사용자 요청 시 파라미터 전달하기
사용자가 파라미터 값을 지정하여 전달하고 싶다면 다음 포스트를 살펴보자.
[스프링부트] 사용자 요청 - 파라미터 값 전달하기
💡 사용자 요청 시 파라미터 값을 넘겨서 데이터를 전달하는건 어떻게 받을까?🔎 단일 파라미터 값을 전달받는 `RequestParam`사용자가 `userid` 라는 속성 이름으로 값을 전달하면, 다음과 같이 모
jyun2e.tistory.com
'스프링부트' 카테고리의 다른 글
| [스프링부트] Get vs Post (0) | 2025.02.14 |
|---|---|
| [스프링부트] 사용자 요청 - 파라미터 값 전달하기 (0) | 2025.02.13 |
| [스프링부트] 진입점과 Controller (0) | 2025.02.06 |