Kopring | Thymeleaf 설정

DoItDev·2021년 11월 15일
0
post-thumbnail

Thymeleaf?

Note:

  • Thymeleaf는 템플릿 엔진 중에서도 서버-사이드(server-side) 자바 템플릿 엔진(templete engine)의 한 종류
  • 서버사이드 템플릿 엔진은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 html을 그려서 클라이언트에 전달해주는 역할을 합니다.

Default Setting

spring by java 는 많은 자료들이 있어서 그 분을 가지고

spring by kotlin 으로 만들어 보려고 한다.

java 와는 다른 점은 특별한 점이 없다.

그렇기 때문에 특별한 설명 없이 코드만 보고 따라 해보자

build.gradle.kts

dependencies {
	implementation("org.springframework.boot:spring-boot-starter-thymeleaf:2.5.5")
}

application.yml

spring:
  thymeleaf:
    mode: HTML
    prefix: classpath:templates/
    suffix: .html
    cache: false
    check-template-location: true
  • mode: 템플릿 모드
  • prefix: 템플릿 폴더 위치
  • suffix: 템플릿 파일 확장자

폴더 구조

resources-> templates-> html 와 같은 path 이며 아래의 사진을 보고 template 을 세팅을 해준다.

스크린샷 2021-11-15 오후 8 52 45

아래와 같은 mapping 을 해주면 template 엔진을 spring + kotlin 으로 사용 할 수 있다.

스크린샷 2021-11-15 오후 8 59 59

Kotlin Configuration Setting

java + spring 에서 처럼 configuration setting 을kt 파일을 이용해서 만들 수 있다

yml 의 경우 spring thymeleaf 를 사용이 가능하지만 아래 yml 코드 처럼 spring 을 빼주고 사용을 한다. (구분을 주기위한 yml 세팅이다 spring.thymeleaf 를 사용을 해도 무방하다)

thymeleaf:
  mode: HTML
  prefix: classpath:templates/
  suffix: .html
  cache: false
  check-template-location: true
  character-encoding: UTF-8

data class 에서 @Configuration@ConfigurationProperties 를 이용해서 yml 파일에 값을 가지고 오기오려고 한다.

@Configuration
@ConfigurationProperties(prefix = "thymeleaf")
data class ThymeleafDTO @ConstructorBinding constructor(
    var mode: String? = null,
    var prefix: String? = null,
    var suffix: String? = null,
    var cache: Boolean? = null,
    var checkTemplateLocation: Boolean? = null,
    var characterEncoding: String? = null
)

@Configuration
class ThymeleafConfiguration {

    val thymeleafDTO: ThymeleafDTO

    constructor(thymeleafDTO: ThymeleafDTO) {
        this.thymeleafDTO = thymeleafDTO
    }

    /**
     * 타임리프 설정
     */
    @Bean
    fun templateResolver(): SpringResourceTemplateResolver? {
        val templateResolver = SpringResourceTemplateResolver()
        templateResolver.prefix = thymeleafDTO.prefix
        templateResolver.characterEncoding = thymeleafDTO.characterEncoding
        templateResolver.suffix = thymeleafDTO.suffix
        templateResolver.setTemplateMode(thymeleafDTO.mode)
        templateResolver.isCacheable = thymeleafDTO.cache!!
        return templateResolver
    }

}

templateResolver bean 으로 설정 및 주입을 주고 난뒤에 ThymeleafDTO 에서 yml 값을 가지고 오기 때문에 매핑을 해주면 설정이 마무리 된다.

그리고 테스트를 위해서 view 컨트롤러를 만들어 준다.

뷰 컨트롤러를 만들어 줄때에는 @Contoller 를 사용해서 만들어준다 RestController 를 이용을 하면 타임리프에서 model 값을 읽지 못한다

@Controller
class ViewResource {
    @GetMapping("/hello")
    fun shoByHello(model: Model): String {
        var tempDTO = TempDTO("vvv", "vvv2")
        model.addAttribute("user", tempDTO)
        return "hello"
    }
}

위의 코드 처럼 테스트 컨트롤러를 매핑을 한 뒤 아래와 같은 아웃풋을 볼 수 있다.

스크린샷 2021-11-20 오후 12 05 07
profile
Back-End Engineer

0개의 댓글