Spring Boot_MVC와 템플릿 엔진

MVC와 템플릿 엔진

-MVC: Model, View, Controller
과거에는 controller와 view가 따로 나뉘어져 있지 않고, View에서 모든 것을 다 했지만, 요즘은 역할이 나뉘어져 있다.
View는 화면을 그리는 데에 모든 역량을 집중해야 한다.
Controller는 내부적인 것을 처리하는 데에 집중해야 한다.

실제 코드 구현해보기

우선 controller의 HelloController에 위의 사진처럼 코드를 작성하였다.

templates에 hello-template.html이라는 html파일을 하나 생성하여 위 html 코드를 작성하였다.

그 다음 hello-templates.html을 그대로 Copy path 하여 웹 페이지에 주소로 붙여넣기 하였더니,

이러한 페이지가 떴다.

이번엔 코드를 intelliJ에서 실행시켜서 웹 페이지에 localhost:8080/hello-mvc 주소로 접속했더니, 에러 페이지가 떴다.
이유를 알고 싶어 실행창을 봤더니,

Required request parameter 'name' for method parameter type String is not present

라는 경고가 떠 있는 것을 볼 수 있었다.

이유가 무엇일까?

HelloController에 있는

public String helloMvc(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }

위 코드의 @RequestParam("name")의 name에 parameter 정보를 알고 싶을 때,
command + p 를 눌러서 보게 되면, required라는 옵션의 디폴트 값이 true인 것을 알 수 있다. 따라서 기본으로 값을 넘겨줘야 하는 것이다.

이에 따라 주소창에 parameter값으로 /hello-mvc?name=spring!을 넣어줬더니,
화면에 hello spring!이 제대로 뜨는 것을 볼 수 있었다.

마찬가지로 hello spring!!!!을 화면에 띄우고 싶으면 주소 창에 name=spring!!!! 이런 식으로 parameter값을 넣어주면 된다.

name=spring!으로 값을 주었기 때문에 controller에서

public String helloMvc(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }

부분에 있는 String name과 name이 name=spring!으로 바뀌어서 model("name")에 담기고, hello-template에 return되면,
hello-template의

<p th:text="'hello ' + ${name}">hello! empty</p>

코드에 존재하는 ${name}($: controller의 model에서 값을 꺼내는 역할)이 model의 키값이 name인 것에서 값을 꺼내서 치환해준다. 결과적으로 hello spring!이 출력되는 것이다.

어렵...

이 과정을 그림으로 설명하면,

1. 웹브라우저에서 localhost:8080에 hello-mvc를 넘긴다.
2. 스프링 부트가 같이 띄우는 내장 톰켓 서버가 hello-mvc를 스프링한테 던진다.
3. 스프링이 helloController에 hello-mvc가 mapping 되어 있는 것을 찾아 호출을 해준다.
4. return을 해줄 때, 이름은 hello-template으로 하고, model에는 key는 name, 값은 spring으로 지정되어 있으므로 이 값들을 스프링에게 넘겨준다.
5. viewResolver(화면과 관련된 해결자)가 동작을 해서, templates에 hello-template.html이라는 파일을 찾아서 thymeleaf 템플릿 엔진에게 처리를 부탁한다.
6. thymeleaf 엔진이 렌더링을 해서, 변환을 한 html을 웹 브라우저에 넘겨주는 것이다..

정적 컨텐츠일 때는 변환을 하지 않고 그대로 반환을 해줬고, 템플릿 엔진에서는 변환을 하여 반환을 해준다는 차이점이 있다.