728x90
- ์ ์ ์ปจํ ์ธ = ํ์ผ์ ๊ทธ๋๋ก ๊ณ ๊ฐ์๊ฒ ์ ๋ฌ
- MVC & ํ ํ๋ฆฟ ์์ง = html์ ์๋ฒ์์ ๊ฐ๊ณตํด์ ๋์ ์ปจํ ์ธ ๋ก ์ ๋ฌ
- API = json ๋ฐ์ดํฐ ํฌ๋งท์ผ๋ก ํด๋ผ์ด์ธํธ์ ๋ฐ์ดํฐ ์ ๋ฌ
- Vue.js, React ๋ฑ์์ ์ฌ์ฉ
- ์๋ฒ๋ผ๋ฆฌ ํต์ ํ ๋
1. ์ ์ ์ปจํ ์ธ
- Spring boot๋
static/
ํด๋์์ ์ ์ ์ปจํ ์ธ ๋ฅผ ์ฐพ์์ ์ฌ์ฉํ๋ค. - ex)
resources/static/hello-static.html
<!DOCTYPE HTML>
<html>
<head>
<title>static content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
์ ์ ์ปจํ
์ธ ์
๋๋ค.
</body>
</html>
- ํ๋ฆ๋
- ์ฃผ์ ์์ฒญ ๋ณด๋
- ํฐ์บฃ ์๋ฒ์์ ์ ์
- ๋จผ์ ์คํ๋ง ์ปจํ ์ดํฐ์์ ์ปจํธ๋กค๋ฌ ์๋์ง ํ์ธ
- ์์ผ๋ฉด static ํ์์ ํ์ผ ์ฐพ์
- ์์ผ๋ฉด ์น ๋ธ๋ผ์ฐ์ ๋ก ๋ฆฌํดํด์ค
2. MVC์ ํ ํ๋ฆฟ ์์ง
- MVC = Model View Controller
- ๊ณผ๊ฑฐ view์ controller๊ฐ ๋๋์ด์ง์ง ์์์ ์์ ๋ ์์์… vanilla js๋ก ์ฝ๋ฉํ ๋?
- View ⇒ ํ๋ฉด์! ๊ทธ๋ฆฐ๋ค!
- Controller ⇒ ๋ด๋ถ์ ์ธ ๊ฒ์ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์ง์ค
⇒ ๋์ด ์ญํ ์ ๋๋ ์ ์ํํจ. ์์ฆ์๋ ์ด๊ฒ ๊ธฐ๋ณธ(์๊ฐํด๋ณด๋ ์์๋ถํฐ ์ด๋ ๊ฒ ๋ฐฐ์ ์)
- controller
@GetMapping("hello-mvc")
// request param์ด ์ฃผ์์์ localhost.com/hello-mvc?name=~~~ ํ ๋ ์ฟผ๋ฆฌ ๋งค๊ฐ๋ณ์ ์ง์
public String HelloMvc(@RequestParam(value = "name", required = true) String name, Model model) {
model.addAttribute("name", name); // ์ฌ๊ธฐ์ ๋ชจ๋ธ์ ๋ด๊ฒจ์
return "hello-template";
}
- html(tymeleaf)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
// model ์ ๋ด๊ฒจ์ ์ด์ชฝ์ผ๋ก ์ด -> name์ด๋ผ๋ key ๊ฐ์ value๋ฅผ ๊ฐ์ ธ์์ ์น
<p th:text="'hello. ' + ${name}" >hello! empty</p> // hello empty๊ฐ ๋์ค์ hello. name์ผ๋ก ์นํ
</body>
</html>
- ์ฃผ์ ์์ฒญ ๋ณด๋
- ํฐ์บฃ ์๋ฒ์์ ์ ์
- ๋จผ์ ์คํ๋ง ์ปจํ ์ดํฐ์์ ์ปจํธ๋กค๋ฌ ์๋์ง ํ์ธ → helloController์ ์์
- ์์ผ๋ฉด viewResolver์ ์ฒ๋ฆฌํด๋ฌ๋ผ๊ณ ์์ฒญ
- html template์ ์ฒ๋ฆฌํด์ ๋ณํ ํ ๋ธ๋ผ์ฐ์ ๋ก ์ ์ก
3. API
@GetMapping("hello-string")
@ResponseBody // http์ ์๋ต body์ ์ด ๋ด์ฉ์ ์ง์ ๋ฃ์ด์ฃผ๊ฒ ๋ค.
public String helloString(@RequestParam("name") String name) {
return "hello " + name; // "hello spring"
}
- mvcc์ ๋ค๋ฅธ ์ ⇒ html template์ผ๋ก ๊ฐ๋ ๊ฒ ์๋๋ผ ๋ฐ์ดํฐ ๊ทธ ์์ฒด๋ฅผ ๋ณด๋ด์ค.
@GetMapping("hello-api")
@ResponseBody
public Hello helloApi(@RequestParam("name") String name) {
Hello hello = new Hello();
hello.setName(name);
return hello;
}
static class Hello {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
- ๋ฐ์ดํฐ ๊ฐ์ฒด๋ฅผ return → json ํํ ๋ฐ์ดํฐ๋ก return
Json ⇒ xml๋ณด๋ค ์ฌํํ๊ณ ๋ฌด๊ฒ์ง ์์์ ์๊ฑธ๋ก ํต์ผ๋จ.
→ spring์์๋ ๊ธฐ๋ณธ์ผ๋ก Json
- ์ฃผ์ ์์ฒญ ๋ณด๋
- ํฐ์บฃ ์๋ฒ์์ ์ ์
- ๋จผ์ ์คํ๋ง ์ปจํ
์ดํฐ์์ ์ปจํธ๋กค๋ฌ ์๋์ง ํ์ธ → helloController์ ์์
- ๊ทผ๋ฐ response body๋ค?
- ⇒ ๊ทผ๋ฐ ๊ฐ์ฒด๋ค?
- ⇒ ๊ทธ๋ผ ๊ทธ๋ฅ ๋ฐ๋ก ๋ฐ์ดํฐ๋ฅผ ๋๊ฒจ์ฃผ๋ ๋ฐฉ์์ผ๋ก ๋์
- ๊ทผ๋ฐ response body๋ค?
- HttpMessageConverter๋ก ์ ๋ฌ
- ๊ฐ์ฒด → JsonConverter๋ก Json ํํ๋ก ๋ณํ
- Json ํํ๋ก ๋ธ๋ผ์ฐ์ ์ ์ ์ก
- ํด๋ผ์ด์ธํธ์ HTTP Accept ํค๋(์ด๋ฐ ํํ๋ก ์ฃผ์ธ์!!!!!!!!!! ๋ผ๋ ์์ฒญ์ฌํญ)์ ์๋ฒ์ ์ปจํธ๋กค๋ฌ ๋ฐํ ํ์ ์ ๋ณด ๋์ ์กฐํฉํด์ HttpMessageConverter ๊ฐ ์ ํ
728x90
'๐ฅ Web > โ Back-end | Spring' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Spring ์ ๋ฌธ] 5. ํ์ ๊ด๋ฆฌ ์์ - ์น MVC ๊ฐ๋ฐ (0) | 2023.09.25 |
---|---|
[Spring ์ ๋ฌธ] 4. ์คํ๋ง ๋น๊ณผ ์์กด๊ด๊ณ (0) | 2023.09.25 |
[Spring ์ ๋ฌธ] 3. ํ์ ๊ด๋ฆฌ ์์ - ๋ฐฑ์๋ ๊ฐ๋ฐ (0) | 2023.09.25 |
[Spring ์ ๋ฌธ] 1. ํ๋ก์ ํธ ํ๊ฒฝ ์ค์ (0) | 2023.06.29 |