1. Welcome Page?
기본적으로 스프링 프로젝트를 초기화하고 디폴트 클래스를 실행하면 아래와 같이 에러페이지가 나온다
이는 첫 페이지에 매핑된 페이지가 없어서 출력하는 에러페이지이다. 스프링에서는 Welcome Page 기능이 있다. Welcome page란 처음 들어갔을때 표시되는 기본 페이지를 의미한다.
https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#web.servlet.spring-mvc.welcome-page
document를 보면 알겠지만, 스프링 부트는 static / template형식의 'index.html'파일을 웰컴 페이지로 인식한다고 한다.우선 디폴트로 resources의 static파일에 index.html파일을 생성하고 아래와 같이 html을 작성해 준다.
다시 실행을 시켜보면 아래와 같이 에러페이지가 아닌 작성한 html페이지가 나오는것을 볼 수 있다.
위 Welcome Page는 정적페이지이다. 말 그대로 html그대로 출력하는것을 의미한다. 이번에는 template engine을 이용해서 페이지를 작성해 보자. 여기서는 thymeleaf를 사용한다.(https://www.thymeleaf.org/)
https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#web.servlet.spring-mvc.template-engines
Spring Boot는 공식적으로 아래와 같이 4개의 템플릿 엔진을 지원한다고 한다
템플릿 뷰를 작성하기 전에 컨트롤러를 만들어야 한다. 컨트롤러는 애플리케이션의 첫 진입점이다. 컨트롤러를 선언하기위해서는 어노테이션 @Controller를 위에 붙여주어야 한다. 그 다음 어노테이션 @GetMapping에 매핑하고자 하는 url string 을작성해준다. GetMapping은 기본적으로 GET요청 방식 API를 만들때 사용한다.
스프링은 Controller객체에게 model을 넘겨준다. Model은 Hashmap형태를 가지고 있다. key, value값을 가지고 있으며, addAttribute()메소드를 이용해서 모델에 원하는 속성과 값을 View에 넘겨줄 수 있다. 그리고 return 타입으로 String값을 반환하면, 지정한 View로 데이터를 전송하게 된다. ViewResolver가 View를 찾아 반환하게 되는데 기본적으로 매핑될때는 아래와 같은 디렉토리를 기반으로 매핑된다. 반환값에는 단일 파일명 뿐만 아니라, 디렉토리 형식의 string이 들어가도 된다. 아래 예제에서는 "data"라는 키값에 대해 "hello!!"라는 value를 가진 속성을 모델에 추가해준 것이다.
resources templates/ + {viewName} + '.html'
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")
public String hello(Model model){
model.addAttribute("data","hello!!");
return "hello";
}
}
이번에는 View 파일을 작성하자. thymeleaf 템플릿 엔진을 이용할 것이다. 기본적으로 파일은 resources의 templates 폴더 아래에 생성해 주어야 하며, 파일명은 위에작성한 컨트롤러의 리턴값의 이름을 가진 html파일을 생성해 주어야한다. thymeleaf 템플릿 엔진에 변수값을 넣어주기 위해서는 ${ }로 변수를 감싸주면 된다.
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<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>
<p th:text="'안녕하세요. ' + ${data}">안녕하세요</p>
</body>
</html>
이제 다시 실행을 해보자. 그리고 /hello url로 접속을 해보면 위에서 지정한 Attribute 'data'의 값이 대입되어 템플릿이 만들어 진것을 볼 수 있다.
'Back-End > Java Spring Boot' 카테고리의 다른 글
[Spring Boot] 일반적인 웹 애플리케이션 계층 구조 (0) | 2022.03.13 |
---|---|
[Spring Boot] API 방식 (0) | 2022.03.13 |
[Spring Boot] MVC & Template Engine (0) | 2022.03.12 |
[Spring Boot] Spring Static Content (0) | 2022.03.12 |
[Spring Boot] 프로젝트 생성하기 (0) | 2022.03.12 |