티스토리 뷰
어제 Spring을 띄우는 것까지 했으니 오늘은 간단한 Welcome Page를 만들어 보려고 합니다.
1. 정적 페이지 생성
우선 화면에 보일 html 파일을 하나 추가할 건데
src\main\resources\static 아래에 index.html 파일을 추가하겠습니다.
그러고 안에 내용을 간단하게 채워보겠습니다.
<!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>
그리고 나서 localhost:8080으로 다시 실행시켜 보면 아래와 같이 화면이 바뀐 것을 확인할 수 있습니다.
2. Thymeleaf 사용하기
※ Template Engine(템플릿 엔진)
지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어입니다.
웹사이트 화면을 어떤 형태로 만들지 도와주는 양식이라고 할 수 있습니다.
스프링 부트 auto-configuration은 아래의 4가지 템플릿 엔진을 제공해 줍니다.
- FreeMarker
- Groovy
- Thymeleaf
- Mustache
이 중에서 Thymeleaf를 사용해 보도록 하겠습니다.
우선 controller 경로를 하나 추가하고 controller 파일을 하나 생성해 보겠습니다.
Controller이기 때문에 Controller 어노테이션을 붙여줍니다.
package com.demoproject.demo.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";
}
}
그리고
src\main\resources\templates 경로에 hello.html 파일을 하나 생성해 줍니다.
<!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>p 태그 안에 있는 th는 thymeleaf 엔진입니다.
<html xmlns:th="http://www.thymeleaf.org">
위에 선언함으로써 thymeleaf 엔진을 사용할 수 있습니다.
p 태그 안에 ${data} 부분이 java 코드에서
model.addAttribute("data", "hello!");
이 부분과 연결되어 ${data} 부분이 "hello!"로 치환될 것입니다.
실행시켜 봅시다
다음과 같이 주소에 따라 화면에 맞게 변경되는 것을 확인할 수 있습니다.
http url에 바로 경로를 치면 GetMapping으로 찾게 됩니다.
HelloController.java 에서 Return 값이 hello 이므로 hello파일을 찾아서 렌더링 하게 됩니다.
컨트롤러가 리턴 값으로 문자를 반환하면 뷰 리졸버(viewResolver)가 화면을 찾아서 처리합니다.
스프링 부트 템플릿엔진에서 기본 viewName 매핑은
resources\templates\ + {ViewName} + .html 파일을 찾게 됩니다.
참고로 spring-boot-devtools 라이브러리를 추가하면 'html' 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능합니다.
build.gradle에
implementation 'org.springframework.boot:spring-boot-devtools'
다음을 추가해 주면 됩니다.
다음으로 스크링 웬 개발의 기초에 대해 알아보는 시간을 가져 봅시다.
[Spring] Spring 시작해보기 - 3. Spring 웹 개발 기초(1)
오늘은 스프링 웹 개발의 기초 개념 3가지에 대해 배워 보려고 한다. 정적 컨텐츠 : 파일을 웹 브라우저에 그대로 전달해 주는 것이다. MVC와 템플릿 엔진 : jsp, php가 템플릿 엔진인데 html을 서버에
icandhee.com
'Spring' 카테고리의 다른 글
| [Spring] Spring 시작해보기 - 5. 회원 리포지토리 테스트 케이스 작성하기 (0) | 2022.08.22 |
|---|---|
| [Spring] Spring 시작해보기 - 4. 회원관리 예제 만들기 (2) | 2022.08.21 |
| [Spring] Spring 시작해보기 - 3. Spring 웹 개발 기초(2) (0) | 2022.08.19 |
| [Spring] Spring 시작해보기 - 3. Spring 웹 개발 기초(1) (0) | 2022.08.18 |
| [Spring] Spring 시작해보기 - 1. Spring 프로젝트 만들기 (2) | 2022.08.16 |