๐ ๋ทฐ ํ ํ๋ฆฟ๊ณผ MVC ํจํด
1. ๋ทฐ ํ ํ๋ฆฟ์ด๋?
- View Template : ํ๋ฉด์ ๋ด๋นํ๋ ๊ธฐ์ , ์น ํ์ด์ง(View)๋ฅผ ํ๋์ ํ(Template)๋ก ๋ง๋ค๊ณ ์ฌ๊ธฐ์ ๋ณ์๋ฅผ ์ฝ์ ํด ์๋ก ๋ค๋ฅธ ํ์ด์ง๋ก ๋ณด์ฌ์ค๋ค. ex ) Mustache(๋จธ์คํ ์น)๊ฐ ๋ทฐ ํ ํ๋ฆฟ์ ๋ง๋๋ ๋๊ตฌ์ด๋ค. ๋จธ์คํ ์น ์ธ์ ํ ํ๋ฆฟ ์์ง์ผ๋ก๋ Thymeleaf, JSP ๋ฑ์ด ์๋ค.
2. MVC ํจํด์ด๋?
ํ๋ฉด์ ๋ด๋นํ๋ ๋ทฐ ํ ํ๋ฆฟ์ '๋ทฐ'๋ผ๊ณ ์ ์ํ๋ค๋ฉด ๋ทฐ๋ ์ปจํธ๋กค๋ฌ์ ๋ชจ๋ธ์ด๋ผ๋ ๋ ๋๋ฃ๊ฐ ์๋ค.
- ์ปจํธ๋กค๋ฌ(Controller) : ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ๋ฐ๋ผ ์๋ฒ์์ ์ด๋ฅผ ์ฒ๋ฆฌํ๋ ์ญํ
- ๋ชจ๋ธ(Model) : ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ์ญํ
์น ํ์ด์ง๋ฅผ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ณ (View), ํด๋ผ์ด์ธํธ์ ์์ฒญ์ ๋ฐ์ ์ฒ๋ฆฌํ๊ณ (Controlelr), ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋(Model) ์ญํ ์ ๋๋๋ ๊ธฐ๋ฒ => MVC ํจํด (Model-View-Controller Pattern)
๐ MVC ํจํด์ ํ์ฉํด ๋ทฐ ํ ํ๋ฆฟ ํ์ด์ง ๋ง๋ค๊ธฐ
1. ๋ทฐ ํ ํ๋ฆฟ ํ์ด์ง ๋ง๋ค๊ธฐ
hello.html ํ์ผ์ static ๋๋ ํฐ๋ฆฌ์ ๋ง๋ค์๋๋ฐ, ๋ทฐ ํ ํ๋ฆฟ์ 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>doc์ ์ ๋ ฅํ๊ณ tab ํค๋ฅผ ๋๋ฅด๋ฉด ๊ธฐ๋ณธ HTML ์ฝ๋๊ฐ ์๋ ์ ๋ ฅ๋๋ค.
์ด ํ์ด์ง๋ฅผ ์น ๋ธ๋ผ์ฐ์ ์์ ๋ณด๋ ค๋ฉด ์ปจํธ๋กค๋ฌ์ ๋ชจ๋ธ์ ์ด์ฉํ๋ค.
2. ์ปจํธ๋กค๋ฌ ๋ง๋ค๊ณ ์คํํ๊ธฐ
์ปจํธ๋กค๋ฌ๋ ๋ง๋ค์ด์ผ ํ ์์น๊ฐ ์๋ค.
src > main > java ๋๋ ํฐ๋ฆฌ์ ๊ธฐ๋ณธ ํจํค์ง com.example.firstproject๊ฐ ์กด์ฌํ๋ค.
์ปจํธ๋กค๋ฌ๋ ์ฌ๊ธฐ์ ํ๋์ ํจํค์ง๋ก ๋ง๋ ๋ค.
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller //์ด ํด๋์ค๊ฐ ์ปจํธ๋กค๋ฌ์์ ์ ์ธํ๋ ์ด๋
ธํ
์ด์
. Controller ํด๋์คํจํค์ง๊ฐ ์๋์ผ๋ก ์ํฌํธ๋๋ค.
public class FirstController {
@GetMapping("/hi") //URL ์์ฒญ์ ์ ์ํ๋ ๋ถ๋ถ.
//๋ฐํํ์ด ๋ฌธ์์ด์ธ niceToMeetYou ๋ฉ์๋ ์์ฑ
public String niceToMeetYou(){
return "greetings"; //์ด ๋ฐํ๋ฌธ์ ์ด์ฉํด greetings.mustache ํ์ด์ง ๋ฐํ.
}
}return "greetings"; ๋ก ์ ์ด ์ฃผ๋ฉด ์๋ฒ๊ฐ ์์์ templates ๋๋ ํฐ๋ฆฌ์์ greetings.mustache ํ์ผ์ ์ฐพ์ ์น ๋ธ๋ผ์ฐ์ ๋ก ์ ์กํ๋ค.
@GetMapping("/hi") : ์น ๋ธ๋ผ์ฐ์ ์์ localhost:8080/hi ๋ก ์ ์ํ๋ฉด greetings.mustache ํ์ผ์ ์ฐพ์ ๋ฐํํ๋ผ๋ ๋ป.
Note!
์ด๋ ธํ ์ด์ (annotation) : ์์ค ์ฝ๋์ ์ถ๊ฐํด ์ฌ์ฉํ๋ ๋ฉํ ๋ฐ์ดํฐ์ ์ผ์ข . ์๋ฐ์์ ์ด๋ ธํ ์ด์ ์ ์์ @ ๊ธฐํธ๋ฅผ ์ฌ์ฉ.
๋ฉํ ๋ฐ์ดํฐ :ํ๋ก๊ทธ๋จ์์ ์ฒ๋ฆฌํด์ผ ํ ๋ฐ์ดํฐ๊ฐ ์๋๋ผ ์ปดํ์ผ ๋ฐ ์คํ ๊ณผ์ ์์ ์ฝ๋๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํด์ผ ํ ์ง ์๋ ค ์ฃผ๋ ์ถ๊ฐ ์ ๋ณด.
์ ๋ฆฌ
์ปจํธ๋กค๋ฌ๋ฅผ ๋ง๋ค ๋ ๋จผ์ ์ปจํธ๋กค๋ฌ๋ฅผ ์ ์ธ(@Controller)ํ๊ณ , ๋ฐํ๊ฐ์ผ๋ก ๋ณด์ฌ ์ค ํ์ด์ง์ ์ด๋ฆ๋ง ๋ฐ์ ์ ์ ๋ค์(return "greetings";) URL ์์ฒญ์ ์ ์ํด์ผ (@GetMapping("/hi")) ์ ๋๋ก ๋์ํ๋ค.
๐ ์๋ฌ_mustache ํ๊ธ ๊นจ์ง
??๊ฐ ๋์์ ์คํ๋ง ๋ถํธ ๋ฒ์ ์ ์ฑ ์ ๋ฒ์ ๊ณผ ๋ง์ท์ง๋ง ๋ฌ๋ผ์ง์ง ์์๋ค.
applicattion.properties์ ์๋์ ์ค์ ์ ์ถ๊ฐํ์๋ค.
server.servlet.encoding.force-response=true
3. ๋ชจ๋ธ ์ถ๊ฐํ๊ธฐ
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>๋จธ์คํ ์น ๋ฌธ๋ฒ์ ์ฌ์ฉํด ๋ทฐ ํ ํ๋ฆฟ ํ์ด์ง์ ๋ณ์๋ฅผ ์ฝ์ ํ๋ค.
{{๋ณ์๋ช
}}
FirstController
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller //์ด ํด๋์ค๊ฐ ์ปจํธ๋กค๋ฌ์์ ์ ์ธํ๋ ์ด๋
ธํ
์ด์
. Controller ํด๋์คํจํค์ง๊ฐ ์๋์ผ๋ก ์ํฌํธ๋๋ค.
public class FirstController {
@GetMapping("/hi") //URL ์์ฒญ์ ์ ์ํ๋ ๋ถ๋ถ.
//๋ฐํํ์ด ๋ฌธ์์ด์ธ niceToMeetYou ๋ฉ์๋ ์์ฑ
public String niceToMeetYou(Model model) { //model ๊ฐ์ฒด ๋ฐ์ ์ค๊ธฐ.
//model ๊ฐ์ฒด๊ฐ ๊ฐ์ username์ ๋๊ฒฐํด ์น ๋ธ๋ผ์ฐ์ ๋ก ๋ณด๋.
model.addAttribute("username","irro" );
return "greetings"; //์ด ๋ฐํ๋ฌธ์ ์ด์ฉํด greetings.mustache ํ์ด์ง ๋ฐํ.
}
}๋ชจ๋ธ์ MVC ํจํด์์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ ์ญํ ์ด๋ค.
Model ํด๋์ค ํจํค์ง๊ฐ ์ํฌํธ๋๋ค๋ฉด ๋ชจ๋ธ์ ํตํด ๋ณ์๋ฅผ ๋ฑ๋กํ ์ ์๋ค.
๋ชจ๋ธ์์ ๋ณ์๋ฅผ ๋ฑ๋กํ ๋๋ addAttribute() ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ค.
4. MVC ํจํด ์ค์ต ์์ฝ
- (๋์) ์ฝ๋ฉ ์์จํ์ต ์คํ๋ง ๋ถํธ 3 ์๋ฐ ๋ฐฑ์๋ ๊ฐ๋ฐ ์ ๋ฌธ
https://product.kyobobook.co.kr/detail/S000202971420
์ฝ๋ฉ ์์จํ์ต ์คํ๋ง ๋ถํธ 3 ์๋ฐ ๋ฐฑ์๋ ๊ฐ๋ฐ ์ ๋ฌธ | ํํ - ๊ต๋ณด๋ฌธ๊ณ
์ฝ๋ฉ ์์จํ์ต ์คํ๋ง ๋ถํธ 3 ์๋ฐ ๋ฐฑ์๋ ๊ฐ๋ฐ ์ ๋ฌธ | ์คํ๋ง ๋ถํธ ๋ฐฑ์๋ ๊ฐ๋ฐ, ์ค์ต ๋ฌธํฑ์ ๋ฎ์ถ๊ณ ์์ ์๊ฒ ์์ํ์!์คํ๋ง ๋ถํธ๋ฅผ ์ฒ์ ์ ํ๋ ์ ๋ฌธ์์ ์ด๋ฏธ ๊ณต๋ถํ์ง๋ง ๋ถ์กฑํ๋ค๊ณ ๋๋ผ
product.kyobobook.co.kr
