준비중..
05 MVC 패턴
# MVC 패턴
## 미션
---
MVC 패턴 미션! "localhost:8080/articles" 요청 시, 아래와 같은 페이지가 나오게 하시오.
## 개념
---
#### ⭐️ MVC 패턴
MVC 패턴이란, 일종의 역할 분담이다. 맥도날드를 생각하면 쉽다. 카운터 및 버거 메이커, 그리고 청소 담당이 각 역할을 수행한다. 프로그램도 마찬가지다. 데이터는 모델(Model), 화면은 뷰(View), 처리는 컨트롤러(Controller)가 나누어 담당한다.
이러한 역할 분담인 MVC 패턴. 이는 OOP와 연관이 있다. 객체별 역할을 나누면, 보다 깔끔한 코드 작성 및 관리에 좋다.
## 튜토리얼
---
#### ⭐️ 컨트롤러
1) 파일 생성: ArticleController
2) 코드 작성
```
@Controller // 컨트롤러 선언! 요청과 응답을 처리!
public class ArticleController {
@GetMapping("/articles") // 해당 요청을 처리하도록, 메소드를 등록!
public String index() {
return "articles/index"; // 뷰페이지 설정
}
}
```
#### ⭐️ 뷰
3) 파일 생성
4) 코드 작성: "articles/index.mustache"
```
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Article</a>
</li>
</ul>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<h1>Article 목록</h1>
<hr>
<p>articles/index.mustache</p>
</div>
<!-- footer -->
<footer class="mb-5 container-fluid">
<hr>
<p>© CloudStudying ·
<a href="#">Privacy</a> · <a href="#">Terms</a>
</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<Script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
```
#### ⭐️ 중간 점검
5) 접속 확인
#### ⭐️ 모델 객체
6) 데이터를 뷰로 전달: "controller/ArticleController"
```
...
@Controller // 컨트롤러 선언! 요청과 응답을 처리!
public class ArticleController {
@GetMapping("/articles") // 해당 요청을 처리하도록, 메소드를 등록!
public String index(Model model) { // 모델 객체를 가져옴!
// 데이터를 모델에 등록! 등록된 데이터는 뷰 페이지에서 사용 가능!
// key(변수명): "msg",
// value(내용): "안녕하세요, 반갑습니다!"
model.addAttribute("msg", "안녕하세요, 반갑습니다!");
return "articles/index"; // 뷰페이지 설정
}
}
```
#### ⭐️ 뷰 페이지
7) 모델 데이터를 출력: "articles/index.mustache"
```
...
<div class="jumbotron">
<h1>Article 목록</h1>
<hr>
<p>articles/index.mustache</p>
<p>{{msg}}</p> <!-- 모델 데이터를 가져 옴 -->
</div>
...
```
#### ⭐️ 결과 확인
8) 브라우저 접속
## 훈련하기
---
- 화면 하단의 Privacy와 Terms클릭 시, 적절한 페이지가 나오길 원한다. 이를 위한 "StaticController"와 "뷰 페이지"를 추가하시오.
- 작성한 프로젝트 코드를 저장(commit) 하고, 깃허브에 업로드(push) 하시오.
## 면접 준비
---
- MVC 패턴이란 무엇이고, 왜씀?