1. MVC패턴이란?
MVC패턴
MVC 패턴 : 소프트웨어 및 아키텍처 설계 패턴 중 하나로, 애플리케이션을 모델, 뷰, 컨트롤러로 분리하여 개발과 유지 보수를 용이하게 한다.
- 모델 (Model) : 데이터를 관리하는 역할
- 뷰 / 뷰 템플릿 (View Template) : 사용자에게 보여지는 화면(UI)
- 컨트롤러 (Controller) : 클라이언트의 요청을 서버에서 처리하는 역할
MVC 실행 흐름
- 클라이언트 -> 컨트롤러로 URL 요청
- 컨트롤러 -> 모델을 호출
- 모델 -> 컨트롤러에게 데이터 전달
- 컨트롤러 -> 뷰에 데이터 전달
- 뷰가 화면 렌더링
2. 뷰 템플릿 페이지
뷰 템플릿 페이지 만들기
-
뷰 템플릿 만드는 위치 : src -> main -> resources -> templates
-
파일 만들기 : new -> file -> "greetings.mustache"
(확장자 mustache : 뷰 템플릿을 만드는 도구) -
Install Handlebars/Mustahe plugin -> 설치
-
만든 파일에 doc 입력 후 tab키 -> 기본 HTML 코드 생성
-
<body>에 내용 넣기
<body>
<h1> sarah님, 안녕하세요<h1>
<body>컨트롤러 만들기
-
컨트롤러 만드는 위치 : src -> main -> java -> com.example.firstproject
-
컨트롤러 패키지 만들기 : new -> package -> 패키지 이름은 기본으로 입력된 패키지명뒤에 controller 추가 (com.example.firstproject.controller)
-
controller 패키지에 자바 클래스 만들기 : new -> java class
- FirstController 코드
- @Controller 어노테이션 작성 (이 클래스가 컨트롤러임을 선언)
- niceToMeetYou() 메소드 선언
- return "greetings"; 문 추가 (greetings.mustache 파일 반환)
- @GetMapping("/hi") (URL 주소 입력)
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller; //@Controller 선언 시 자동으로 추가 됨
import org.springframework.web.bind.annotation.GetMapping; // @GetMapping() 추가 시 자동으로 추가 됨
@Controller //컨트롤러 선언
public class FirstController {
@GetMapping("/hi") //URL 요청 접수 (클라이언트로부터 "/hi"라는 요청을 받아 접수)
public String niceToMeetYou() { //요청 받음과 동시에 메서드 수행
return "greetings";
//niceToMeetYou() 메서드로 greetings.mustache 페이지를 반환하려면 파일 이름인 greetings만 반환값으로 지정
// greetings.mustache 파일 반환
}
}뷰 & 컨트롤러 실습 요약
1. 뷰 템플릿을 만들어서 내용 추가
2. 컨트롤러 만들고 컨트롤러 선언 (@Controller)
3. 컨트롤러에 메서드를 추가, 뷰 페이지 반환 (return "")
4. 컨트롤러에 @GetMapping(URL주소) 를 넣어서 클라이언트가 url로 접속 시 뷰 템플릿이 보이게 함
모델 추가하기
greetings.mustache의 <body>에 작성했던 이름 부분을 변수로 변경해서 다른 값이 나오게 하기
- 이름 부분은
{{변수명}}중괄호로 감싸기
<body>
<h1>{{username}}님, 안녕하세요<h1>
<body>- 뷰 템플릿 페이지에 변수를 삽입했다면 컨트롤러도 모델 추가
- 컨트롤러의 메서드에 Model타입의 model 매개변수 추가 -> Model 클래스 패키지 자동 임포트
- model.addAttribute("변수명",변숫값); 로 변수 등록
@GetMapping("/hi") //URL 요청 접수
public String niceToMeetYou(Model model) {
//뷰 템플릿 페이지에서 사용할 변수를 등록하기 위해 모델 객체를 매개변수로 가져옴.
model.addAttribute("username", "sarah"); // 모델 변수 등록
return "greetings";
//niceToMeetYou() 메서드로 greetings.mustache 페이지를 반환하려면 파일 이름인 greetings만 반환값으로 지정
// greetings.mustache 파일 반환
}MVC 패턴 실습 요약
1. 뷰 페이지 만들기 (greetings.mustache)
2. 컨트롤러 만들기 (FristController.java)
3. 컨트롤러에서 뷰 페이지 반환 (return "greetings";)
4. 뷰 페이지에 변수 삽입 ({{username}})
5. 컨트롤러에 모델 추가 (niceToMeetYou(Model model))
6. 모델에서 변수 등록 (model.addAttribute("username","sarah"))
3. 뷰 템플릿 페이지 - 레이아웃 적용하기
부트스트랩 이용하기
- https://getbootstrap.com/
- 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 모음
헤더(Header) -푸터(footer) 레이아웃
- 헤더 : 상단에 사이트 안내를 위한 내비게이션 요소
- 콘텐츠 : 핵심 내용
- 푸터 : 사이트 정보
헤더 영역에 내비게이션 바 추가하기
부트스트랩 홈페이지에서 "navbar" 검색 후 내비게이션 바 코드 복사
<body>부터 콘텐츠 내용 사이에 붙여 넣기
<body>
<!--- navigation --->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>레이아웃 템플릿화
header와 footer '템플릿화'
뷰 페이지에 헤더, 푸터 레이아웃을 모두 넣으면 가독성이 떨어지기 때문에
- 레이아웃 템플릿 만드는 위치 : templates -> 새 directoy 만들기 (layouts) -> new file -> 템플릿 파일의 확장자는 .mustache
- header.mustache -> 원래 뷰 템플릿 파일의 헤더 부분 코드를 잘라넣기
- footer.mustache -> 푸터 부분 코드도 똑같이 잘라넣기
- 뷰 템플릿의 헤더코드를 잘라낸 부분을 템플릿으로 대체
{{>파일경로/파일명}}
{{>layouts/header}}
{{>layouts/footer}}
<뷰 템플릿 코드>
{{>layouts/header}}
<!--- content --->
<h1>{{username}}님, 반갑습니다!</h1>
</div>
{{>layouts/footer}}