[Spring Boot 스터디] 황현진 #1 주차

📌 View 환경설정

1️⃣ welcome page 만들기

src / main / resources / static / index.html

이 경로에 아래 코드를 붙여 넣으면 welcome page(홈화면)를 만들 수 있다. (정적 페이지)

<!DOCTYPE HTML>
<html>
<head>
 <title>Hello</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

2️⃣ thymeleaf 템플릿 엔진

thymeleaf 템플릿 엔진을 사용하면 동적인 페이지를 만들 수 있다.

@Controller
public class HelloController {
 @GetMapping("hello")
 public String hello(Model model) {
 model.addAttribute("data", "hello!!");
 return "hello";
 }
}

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>Hello</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>

📌 빌드하고 실행하기

콘솔창을 킨다.
./gradlew build 명령어를 입력한다.
cd bulid/libs 명령어를 입력한다.
java -jar hello-spring-0.0.1-SNAPSHOT.jar 명령어를 입력한다.

📌 정적 컨텐츠

위에서 welcome page를 만들었던 것처럼 서버에서 하는 일 없이 파일을 웹브라우저에 그대로 내려주는 방식
(= 파일을 그대로 클라이언트에게 주는 것)

<!DOCTYPE HTML>
<html>
<head>
 <title>static content</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

📌 MVC와 템플릿 엔진

HTML을 그대로 주는 것이 아니라 서버에서 프로그래밍을 해서 HTML을 동적으로 바꾸어 내려주는 방식
(= 서버에서 html을 수정해서 클라이언트에게 주는 것)

💡 여기서 MVC란? Model, View, Controller를 말한다.

- Controller

@Controller
public class HelloController {
 @GetMapping("hello-mvc")
 public String helloMvc(@RequestParam("name") String name, Model model) {
 model.addAttribute("name", name);
 return "hello-template";
 }
}

- View

<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>

📌 API

JSON이라는 데이터 구조 포맷으로 클라이언트에게 데이터를 전달하는 방식 (서버끼리 통신할 때 사용)

💡 여기서 @ResponseBody란?

html에 나오는 body 태그를 의미하는 것이 아니라 http의 body 부분의 문자 내용을 직접 반환한다는 뜻이다.
view 이런 거 없고 그 문자가 그대로 내려간다.
(웹 사이트에서 소스를 보면 html 코드가 아니라 문자가 그대로 보이게 된다.)

- @ResponseBody 문자 반환

@Controller
public class HelloController {
 @GetMapping("hello-string")
 @ResponseBody
 public String helloString(@RequestParam("name") String name) {
 return "hello " + name;
 }
}

- @ResponseBody 객체 반환

@Controller
public class HelloController {
 @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;
 }
 }
}

저작자표시 동일조건

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

[Spring Boot 스터디] 조현상 #2 주차 - 섹션 3 (0)	2023.07.19
[Spring Boot 스터디] 한준교 #1 주차 - 섹션 1, 2 "다음부턴 요약을 해볼게..." (0)	2023.07.14
[Spring Boot 스터디] 이지원 #1 주차 - 섹션 1, 2 "Hello Spring" (0)	2023.07.14
[Spring Boot 스터디] 이정욱 #1주차 - 섹션 1, 2 ".... . .-.. .-.. ---" (0)	2023.07.13
[Spring Boot 스터디] 류건 #1주차 - 섹션 1, 2 "안녕, 봄" (0)	2023.07.13

KMU_SW_CLUB

[Spring Boot 스터디] 황현진 #1 주차 - 섹션 1, 2 "👋 🌸"

📌 View 환경설정

📌 빌드하고 실행하기

📌 정적 컨텐츠

📌 MVC와 템플릿 엔진

📌 API

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

티스토리툴바

[Spring Boot 스터디] 황현진 #1 주차 - 섹션 1, 2 "👋 🌸"

📌 View 환경설정

📌 빌드하고 실행하기

📌 정적 컨텐츠

📌 MVC와 템플릿 엔진

📌 API

'WINK-(Web & App) > Spring Boot 스터디' 카테고리의 다른 글

'WINK-(Web & App)/Spring Boot 스터디' Related Articles

티스토리툴바