# 뷰 템플릿과 MVC 패턴
## 미션
모델-뷰-컨트롤러를 활용하여 다음 페이지를 만드시오.
![홍팍-스프링-부트-입문-MVC-미션](http://drive.google.com/thumbnail?export=view&sz=w960&id=1dlUO4eOOhg6vS1M3boO3pgQ9AfAjZcLC)
## 04:28 뷰 페이지 작성
#### ../resources/templates/greetings.mustache
```
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>홍팍님, 반갑습니다.</h1>
</body>
</html>
```
## 05:35 컨트롤러 만들기
#### ../com.example.firstproject/controller/FirstController
```
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou() {
return "greetings";
}
}
```
## ⚠️ 한글 깨짐 발생 시, “인텔리제이 한글 깨짐"으로 구글링!
#### 메뉴바 > Help > VM 옵션 수정
다음 설정을 끝부분에 추가한다.
```
-Dfile.encoding=UTF-8
```
#### 메뉴바 > File > Settings(or Preferences) > ... > File Encodings 설정
Global Encoding, Project Encoding, Properties Files 모두를 `UTF-8`로 바꾼다.
<img src="http://drive.google.com/thumbnail? Export=view&sz=w960&id=1dcTx9u2ugFJ3zSpwBTZyaGGXN4LeRrlP" alt="홍팍-스프링-부트-인텔리제이-한글깨짐-인코딩">
## ⚠️ 스프링부트 2.7.0 버전에서 mustache 한글 깨짐 이슈 발생!
#### 해당 버전 사용자는 build.gradle 에서 버전을 변경해주세요. (2022.05.23)
```
build.gradle 파일에서
id 'org.springframework.boot' version '2.7.0' 부분을
id 'org.springframework.boot' version '2.6.8
또는
강의와 같은 버전인 ‘2.4.1’로 변경한 다음,
우측에 있는 코끼리 모양 아이콘을 누르시면 됩니다.
```
## 10:32 페이지에 변수 삽입
#### ../resources/templates/greetings.mustache
```
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>{{username}}님, 반갑습니다.</h1>
</body>
</html>
```
## 11:46 모델 사용하기
#### ../com.example.firstproject/controller/FirstController
```
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou(Model model) {
model.addAttribute("username", "hongpark");
return "greetings";
}
}
```
## 🔥 구글링 훈련하기
- MVC 패턴이란
- @Controller
- @GetMapping
- mustache란
- 절대경로 vs 상대경로