![[Spring 입문] Welcom page 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblgOtY%2Fbtrs67dRkvU%2Fl5CV4nKc8IyVeD7qpIncl1%2Fimg.jpg)
Welcom page 만들기
📌 hello.index
<!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>- html 파일 헤드 태그 위에 <html xmlns:th="http://www.thymeleaf.org"> 를 적어놔야 타임리프를 쓸 수 있다.
- 태그안에 표현식 : th:[속성]="서버 전달 받은 값 또는 조건식" 형태로 삽입하면 된다.
💡 Thymeleaf 템블릿 문법 및 표현식 예제
- 표현식 : th:[속성]="서버 전달 받은 값 또는 조건식"
- Thymeleaf 3 버전 이상부터는 inline 표현식이 추가되어 html 태그 없이 표현이 가능하다.
- ex) [[$suer.name]]
| Title | Description |
| th:text | 텍스트 내용 <span th:text="${user.name}"></span> |
| th:utext | html 내용 <div th:utext="${content}"></div> |
| th:value | element value값, checkbox, input 등 <input type="text" th:value="${title}" /> |
| th:with | 변수값 지정 <p th:with="authType = ${user.authType}+' Type'" th:text="${authType}"></p> |
| th:switch th:case |
switch-case문 <div th:switch="${user.role}"> <p th:case="'admin'">User is an administrator <p th:case="#{roles.manager}">User is a manager </div> |
| th:if | 조건문 <p th:if="${user.authType}=='web'" th:text="${user.authType}"></p> |
| th:unless | else 표현 <p th:unless="${user.authType}=='facebook'" th:text="'not '+ ${user.authType}"></p> |
| th:each | 반복문 <p th:each="user : ${users}" th:text="${user.name}"></p> |
📌 HelloController.java
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("hello") // 주소명 적어 줄 것 → localhost:8080/hello 의미
public String hello(Model model) {
// ${data} 를 hello!! 로 변환
model.addAttribute("data" , "hello!!");
// 리턴값과 일치하는 파일을 templates 폴더 안에서 찾는다.
return "hello"; // html 파일 이름을 적어 줄 것 → hello.html 의미
}
}- @GetMapping 스프링 애노테이션은 메서드에만 적용할 수 있다.
- HTTP GET 요청을 특정 핸들러 메서드에 맵핑하기 위한 애노테이션이다.
- 다중 맵핑이 가능하다.
- 애노테이션 파라미터 안에 value = { , , } 이런 형태로 여러 개 넣으면 된다.
- 메서드에만 적용할 수 있는 HTTP 메서드 특정 변형에는 여러가지가 있다.
- @GetMapping
- GET 요청을 하는 API 애노테이션
- 데이터를 가져올 때 사용한다.
- @PostMapping
- Post 요청을 하는 API 애노테이션
- 데이터를 게시할 때 사용한다.
- Put과 Patch 둘 다 데이터를 수정한다는 측면에서 비슷하나, PUT은 데이터 전체를 갱신하는 HTTP 메서드이지만, PATCH는 수정하는 영역만 갱신하는 HTTP 메서드다.
- @PutMapping
- Put 요청을 하는 API 애노테이션
- 데이터를 수정할 때 사용한다.
- @DeleteMapping
- DELETE 요청을 하는 API 애노테이션
- 데이터를 삭제할 때 사용한다.
- @PatchMapping
- PATCH 요청을 하는 API 애노테이션
- 데이터를 수정할 때 사용한다.
- Put과 Patch 둘 다 데이터를 수정한다는 측면에서 비슷하나, PUT은 데이터 전체를 갱신하는 HTTP 메서드이지만, PATCH는 수정하는 영역만 갱신하는 HTTP 메서드다.
- @GetMapping
- model.addAtribute() 메서드
- Controller 에서 사용자에게 응답할 View를 생성할 때 Model을 이용하여 View에게 데이터를 전달하는 방법이다.
- Model에 데이터를 담을 때 사용한다.
- model.addAttribute(String name, Object value)
- value 객체를 name 이름으로 추가한다.
- 뷰 코드에서는 name으로 지정한 이름을 통해서 value를 사용한다.
🔍 동작 환경
- 컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버(viewResolver)가 화면을 찾아서 처리한다.
- 스프링 부트 템플릿엔진은 기본적으로 viewName이 매핑이 된다.
- resource/templates/[ViewNmae].html
- 리턴 값으로 hello 값을 반환했기 때문에 resource/templates/hello.html 파일이랑 매핑이 된다.
💡 참고
spring-boot-devtools 라이브러리를 추가하면 html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다.
인텔리J 컴파일 방법 : 메뉴 build → Recompile
👀 참고 자료
Spring boot - Thymeleaf 기본 문법
1. Thymeleaf 기본 표현 자세한 문법은 Thymeleaf 사이트의 튜토리얼을 참고하는게 좋습니다. 기본 표현, 조건문, 반복문 세가지를 중점으로 보겠습니다. Thymeleaf Document 참고 (https://www.thymeleaf.org/doc..
eblo.tistory.com
https://imucoding.tistory.com/217
RequestMapping , GetMapping , PostMapping
RequestMapping 은 클래스 레벨에서 사용. 이 annotation은 클래스와 메서드 수준에서 모두 사용할 수 있다. 대부분의 경우 메소드 레벨에서 애플리케이션은 HTTP 메소드 특정 변형 @GetMapping, @PostMapping, @
imucoding.tistory.com
https://galid1.tistory.com/504
Spring - Model을 이용하여 View에 데이터 넘겨주기 - 6
Spring MVC Model을 이용한 View생성과 응답 앞선 포스팅에서 알아보았듯이 @Controller 클래스 안의 @RequestMapping 어노테이션이 부여된 method들은 사용자에게 응답할 View 를 생성하는 역할을 하는 즉, Contr.
galid1.tistory.com
'[ Spring ] > Spring 입문' 카테고리의 다른 글
| [Spring 입문] 컴포넌트 스캔과 자동 의존관계 설정 (0) | 2022.02.14 |
|---|---|
| [Spring 입문] 회원 관리 예제 (0) | 2022.02.14 |
| [Spring 입문] 스프링 웹 개발 기초 (정적 컨텐츠, MVC와 템플릿 엔진, API) (0) | 2022.02.13 |
| [Spring] 스프링 부트 프로젝트 생성 (0) | 2022.02.12 |