MVC 패턴

미션

MVC 패턴 미션! “localhost:8080/articles” 요청 시, 아래와 같은 페이지가 나오게 하시오.
클라우드스터딩-스프링부트--MVC-패턴-확인

개념

⭐️ MVC 패턴

MVC 패턴이란, 일종의 역할 분담이다. 맥도날드를 생각하면 쉽다. 카운터 및 버거 메이커, 그리고 청소 담당이 각 역할을 수행한다. 프로그램도 마찬가지다. 데이터는 모델(Model), 화면은 뷰(View), 처리는 컨트롤러(Controller)가 나누어 담당한다.

이러한 역할 분담인 MVC 패턴. 이는 OOP와 연관이 있다. 객체별 역할을 나누면, 보다 깔끔한 코드 작성 및 관리에 좋다.
클라우드스터딩-스프링부트-MVC-패턴

튜토리얼

⭐️ 컨트롤러

1) 파일 생성: ArticleController
클라우드스터딩-스프링부트-컨트롤러-생성

2) 코드 작성

@Controller // 컨트롤러 선언! 요청과 응답을 처리!
public class ArticleController {
    @GetMapping("/articles") // 해당 요청을 처리하도록, 메소드를 등록!
    public String index() {
        return "articles/index"; // 뷰페이지 설정
    }
}

⭐️ 뷰

3) 파일 생성
클라우드스터딩-스프링부트-MVC패턴-뷰-파일-생성

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/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

⭐️ 중간 점검

5) 접속 확인
클라우드스터딩-스프링부트-MVC패턴-컨트롤러와-뷰

⭐️ 모델 객체

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) 브라우저 접속
클라우드스터딩-스프링부트--MVC-패턴-확인

훈련하기

화면 하단의 Privacy와 Terms클릭 시, 적절한 페이지가 나오길 원한다. 이를 위한 “StaticController”와 “뷰 페이지”를 추가하시오.
작성한 프로젝트 코드를 저장(commit) 하고, 깃허브에 업로드(push) 하시오.

면접 준비

MVC 패턴이란 무엇이고, 왜씀?

목차 보기