스프링 부트(Spring Boot) view 화면 만들기

 

 

이전 시간에 localhost:8080 를 확인했을때, 아래 와 같은 에러 페이지 화면을 확인하였다. 

 

해당 페이지는 보여줄 view가 없을 경우 에러페이지가 띄어지게된다.

 

 

이번 시간에는 스프링 부트에서 간단하게 view 페이지 화면을 만들어 볼 것이다.

 

 

 

우선 controller를 만들어 브라우저에서 웹 페이지를 호출했을때, controller를 통해 호출을 받고 응답을 반환하게된다.

controller

@Controller 어노테이션은 표기으로써 controller임을 나타내고 해당 controller를 Bean으로 등록하여 스프링 프레임워크에 알리는 역할을 한다.

 

model 객체는 key - value 구조로 controller에서 데이터를 담고 view에 전달할때 사용하는 객체이다.

model.addAttribute("key", value);

 

 

---

 

이제 간단하게 view 페이지를 만들어준다.

templates 하위 hello.html 페이지를 작성한다.

hello.html

 

 

 

🎁 Thymeleaf 사용하기

- 공식 사이트 : https://www.thymeleaf.org/

Thymeleaf

Thymeleaf 는 View Templete Engine으로 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 하며, 태그에 Thymeleaf 속성을 추가하여 페이지를 동적으로 만들 수 있다 .  

 

Thymeleaf 는 HTML 파일을 JSP로 변경할 필요가 없이 HTML 파일 내에서 속성을 덧붙이는 방식으로 디자이너와 협업하기 용이하다는 장점이 있다.

 

1) th:text

<h1 th:text="${data}"></h1>

일반 텍스트를 반환할 때 사용하며, ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다.

 

 

2) th:value

<input type="text" id="userId" th:value="${userId}"/>

input 태그의 value에 값을 선언할 때 사용한다.

 

 

3) th:href="@{}"

<a th:href="@{/hello}"></a>

a태그 내 href 속성 값 URL을 지정해준다. 

 

 

 

---

 

 

 

이렇게 controller와 view 페이지를 작성하여 결과를 확인해보자.

 

localhost:8080/hello

 

 

view - controller 플로우

 

컨트롤러에서 리턴값으로 문자를 반환하면 viewResolver는 해당 화면을 찾아 처리한다. 

 

✔스프링부트 내 템플릿 엔진 기본 viewName 매핑처리 방법

resoures:templates/ +{ viewName }+.html