안녕하세요. 오늘은 서버사이드 렌더링 환경에서 사용되는 템플릿 엔진중 thymeleaf라는 템플릿 엔진을 예제로 스프링부트로 서버사이드 렌더링했을 때 서버를 직접 재시작하지 않고도 화면을 갱신하는 방법을 공유하고자 합니다.
먼저 필요한 컨트롤러를 작성합니다.
컨트롤러
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("data", "hello");
return "hello";
}
}locahost:8080 를 기본으로 /hello로 접근했을 때, templates/hello.html 파일을 찾아내서 렌더링하게 될 것입니다.
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="'글입니다. 이부분을 삭제한 후 rebuild 해주세요 ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>hello.html은 타임리프 엔진으로 웹브라우저에 정적으로 렌더링할 경우 "안녕하세요. 손님" 이라는 문구가 나오는 반면,
서버사이드 렌더링으로 할 경우에는 text에 있는 내용이 출력됩니다.
그렇다면 text의 일부를 삭제하면 바로 화면에 갱신될까요???
아닙니다. 기본적으로 서버사이드 렌더링의 경우에는 컴파일을 진행해주고나서 렌더링을 해야 적용이 되는데, 컴파일을 다시한다는 것은 서버를 다시 껏다 켜야한다는 의미로 넘어갑니다.
devtools 의존성 추가
스프링부트에는 spring-boot-devtools 라는 의존성이 존재합니다. 해당 라이브러리의 기능중 하나는 restartedMain 이라는 키워드로 서버가 올라가며 이는 콘솔화면에서 확인이 가능합니다.
바로 비교가 가능하실것입니다.
gradle로 의존성 추가하기
- implementation 'org.springframework.boot:spring-boot-devtools'
maven으로 의존성 추가하기
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
devtools 의존성을 추가하셨다면. 이젠 서버 재시작없이 html의 서버사이드 렌더링에서 받아오는 데이터 부분을 수정해보고 새로고침으로 변경되는 것을 확인해보겠습니다.
먼저 일단 수정을 했다면 인텔리제이 혹은 사용하는 IDE로 가서 build 메뉴를 찾고 해당 html 파일만 recompile 해주도록 합니다.
그러면 화면에서 새로고침을 통해 렌더링을 하는 경우 서버가 restartedMain에 의해서 다시 시작되고 개발자의 움직임 없이 편하게 작업할 수 있습니다.