본문 바로가기

IT/Spring

[Spring Boot] Spring Boot 사용 및 Thymeleaf 연동 방법

1. Spring Boot란

Spring Boot는 Spring 프레임워크를 간편하게 설정하고, 별도에 어려운 설정 없이 바로 개발에 들어갈 수 있도록 만든 프레임 워크입니다.

강력한 기능을 가진 라이브러리들을 Spring Boot 라이브러리에 내장하였고, 내장형 톰캣 등을 탑재하여 단독 실행이 가능해졌습니다.

그리고 프로젝트 생성 시 기존 Spring은 복잡한 설정 파일을 요구했는데, Spring boot는 aplication.yml 설정 파일로 간단하게 설정이 가능하게 되었습니다,

2. 사용하는 라이브러리

...
<!--Spring Boot Version-->	
  <version>2.2.2.RELEASE</version>
...
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-tomcat</artifactId>
  <scope>provided</scope>
</dependency>

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3. 프로젝트 생성

아래 주소에서 Spring Boot 프로젝트를 생성합니다.

https://start.spring.io/

src 폴더와 pom.xml을 제외한 나머지 파일은 사용하지 않으니 삭제해주세요.


4. application.yml 설정

application.yml 파일은 스프링의 설정 정보를 저장하는 파일입니다.

기본적으로 application.profiles파일이 저장되어 있습니다. yml, profiles 두가지 타입의 파일로 설정이 가능합니다.

이번에는 조금 더 보기좋고 설정하기 편한 yml 파일로 설정해보겠습니다. 

파일 경로는 src/main/resources/ 입니다.

spring:
    thymeleaf:
        prefix : classpath:templates/
        suffix : .html
        cache : false

우선 기본적인 thymeleaf 설정만 하였습니다.

html 파일의 위치와 확장자 명, 캐시 유무를 설정하였습니다.


5. HomeController 생성

@SpringBootApplication를 선언한 클래스 패키지의 하위 패키지에 HomeController를 생성합니다.

import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping(value = "/")
public class HomeController {

    @GetMapping(value = "/")
    public ModelAndView home() {
        ModelAndView modelAndView = new ModelAndView();
        
        modelAndView.setViewName("home");
        
        Map<String, Object> map = new HashMap<>();
        map.put("name", "Bamdule");
        map.put("date", LocalDateTime.now());
        
        modelAndView.addObject("data", map);
        
        return modelAndView;
    }
}

modelAndView.setViewName("home"); 은 application.yml에서 설정한 "src/main/resources/" 값이 생략되어있고, 
확장자 .html 또한 생략되어있습니다. 이 값을 통해 ViewResolver는 view를 생성합니다.

그리고 modelAndView.addObject("data",map); 를 통해 화면에 데이터를 렌더링합니다.


6. home.html 생성

src/main/resources/templates/ 경로에 home.html을 생성해줍니다.

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div th:text="${data.name}"></div>
        <th:block th:text="${data.date}"/>
    </body>
</html>

"th:" 가 포함된 tag attribute는 thymeleaf 문법입니다.

data.name과 data.date 값을 화면에 뿌려줍니다.


7. 결과

위와 같이 하셨나면 톰캣을 실행해 줍니다. 

build하면 target 폴더에 war 파일이 생성되고, war파일을 설치한 톰캣 또는 IDE툴을 통해서 실행하면 다음과 같은 화면이 보여집니다.


도움이 되셨다면 공감 한번씩 눌러주시면 감사하겠습니다.