[인프런 강의] 스프링 부트 개념과 활용 - 7

1. 스프링 웹 MVC - Thymeleaf

템플릿 엔진은 주로 뷰를 만드는데 사용된다. 하지만 다른 용도로도 사용될 수 있다. (코드 제너레이션, 이메일 템플릿적용 등) 어찌 되었든 가장 많이 사용되는 곳은 뷰를 만드는 것이기 때문에 이에 대해 정리해 보겠다.

스프링 부트가 자동 설정을 지원하는 템플릿 엔진들은 아래와 같다.

• FreeMarker
• Groovy
• Thymeleaf
• Mustache

스프링을 배울때는 주로 JSP를 통해 뷰를 만들었지만, 스프링부트가 추구하는 방향에 JSP는 적합하지 않다고 한다. 따라서 비교적 최근에 만들어 졌고 가장 널리 사용되는 템플릿 엔진중 하나인 Thymeleaf에 대해 정리할 것이다.

 

1) Thymeleaf를 사용하기 위해 먼저 의존성을 추가해야한다.

위와 같이 thymeleaf의존성을 추가해주고 나면 src/main/resource/templates에서 동적인 파일을 찾게된다. 

 

2) Thymeleaf의 간단한 사용 예제를 만들기 위해 @Controller를 통해 SampleController를 만든다.

 

3) 위에 대한 테스트 코드를 작성하여 결과를 확인한다. (TDD 방식 적용해보았다.)

4) SampleController를 작성한다.

이때 리턴하는 String은 뷰의 이름을 의미한다. Model은 hello라는 뷰에 전달할 정보들을 가진 객체라고 보면된다. 예전에는 ModelAndView를 사용하였었는데 그냥 Model로 해도 된다고 한다. 

 

5) templates에 해당 파일 만들기

4번까지 하고 테스트를 실행시키면 templates에 hello라는 이름을 가진 파일이 없어서 오류가 뜬다. 즉, /hello로 요청을 하면 hello라는 이름을 가진 뷰를 보여주어야 하는데 이것을 만들지 않아서 발생하는 오류이다.

src/main/resource/templates에 hello.html을 만들고 테스트를 실행하면 테스트가 정상적으로 통과되는 것을 볼 수 있었다.

 

위와 같이 요청에대해 응답할 뷰를 별다른 설정없이 templates에서 찾아 보여주게끔 해주는 역할을 하는 것이 템플릿 엔진인 것이다. 

 

2. 스프링 웹 MVC - Thymeleaf를 이용해 뷰 만들기

뷰를 만들기 위해서 Thymeleaf를 학습해야 한다.(https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html) 

 

핵심적이라고 할 수 있는 모델이 전달받은 데이터를 뷰에 출력하는 기능만 짚고 넘어가 보겠다. 

 

1) 가장 먼저 html파일의 네임스페이스에 thmeleaf를 등록해주어야 한다.

 

이렇게 하면 th 를 통해 thymeleaf의 기능들을 사용할 수 있다. 

 

2) thymeleaf문법을 통해 모델에서 전달받은 데이터 출력

th:text = "${name}" 이 의미하는 것은 모델로부터 전달받은 데이터중 key값이  name인 데이터가 있다면 해당 value를 출력하라는 의미이다. 만약 없다면 Name이 출력될 것인데, 테스트 코드를 실행하여서 minseob이 출력되는 것을 확인 할 수 있었다.

 

이와같이 thymeleaf를 사용하면 웹서버를 사용하지 않고도 프론트 작업이 가능해진다. (위와같이 구체적인 데이터값이 없어도 대체되는 값을 통해 확인해가며 작업할 수 있기 때문에)

 

3. 스프링 웹 MVC - HtmlUnit

HtmlUnit은 HTML템플릿 뷰 테스트를 보다 전문적으로 하기 위해 사용되는 일종의 툴이다. 이것을 사용하기 위해서는 의존성을 먼저 추가해야한다. 

<dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>htmlunit-driver</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.htmlunit</groupId>
            <artifactId>htmlunit</artifactId>
            <scope>test</scope>
</dependency>

위와같이 의존성을 추가하고 나면 htmlunit.sourceforge.io/gettingStarted.html에 나오는 참으로 다양한 테스트를 할 수 있다... 내용들을하나하나 정리할 수는 없지만 필요할때 참고하면 좋을것 같다. 

대표적인 테스트 활용 한가지만 해보고 넘어가겠다. 

 

1) HtmlUnit을 통해 테스트를 진행할 때는 MockMvc가 아닌 WebClient객체를 사용한다. 

2) 이 객체는 요청에 대한 응답페이지를 HtmlPage 인터페이스를 통해 받아서 다양한 테스트를 진행하도록 한다.

위 테스트는 /hello로 요청했을때 응답받는 페이지를 page에 넣고, page의 h1태그중 가장 먼저 나오는 태그가 가진 값이 minseob인지 테스트 하는 코드이다.