스프링부트 View 환경설정

start.spring.io 에서 프로젝트를 생성할 때 Dependencies를 추가하는 곳을 보면 저렇게 Template Engines을 고르는 카테고리가 있다. 이 템플릿 엔진은 MVC 구조에서 V(View)를 담당하는 라이브러리이다.

저기서 스프링부트에서 쓸 템플릿 엔진을 선택하면 된다.

jsp가 성능이나 이슈 등 있고, 스프링 프레임워크에서도 권장하지 않기 때문에 저 중에서 쓰면 된다.

 

 

🤔 View Template Engine이란?
Controller가 model을 통해 전달받는 데이터를 이용해 동적인 웹페이지를 생성할 수 있도록 돕는 엔진이다.

 

현재 프로젝트를 만들고 실행하여 localhost:8080으로 접속하면 위처럼 뜰 것이다.

그럼 스프링부트에서 제공하는 Welcome Page기능을 사용하여 웹페이지를 만들어보자.

 

 

Welcome Page란 무엇인가?

스프링 부트 공식문서를 살펴보면 웰컴 페이지는 스프링 부트가 제공하는 기능이다.

Spring Boot supports both static and templated welcome pages. It first looks for an index.html file in the configured static content locations. If one is not found, it then looks for an index template. If either is found, it is automatically used as the welcome page of the application.

static 폴더의 index.html을 먼저 찾는데, 못찾을 경우 templates 폴더까지 찾게된다.

즉, static 폴더 안에 있는 index.html이 우선순위가 높다는 뜻이다.

 

resources/static/index.html 파일을 만들면 이것이 웰컴 페이지(Welcome Page)가 된다.

 

 

이렇게 파일을 만든 후 실행하여 localhost:8080으로 접속하면 위처럼 나오게 된다.

 

 

 

이번엔 thymeleaf 템플릿 엔진이 잘 동작하는지 확인해보자.

스프링부트 thymeleaf viewName 매핑을 해보자.

resources/templates/{ViewName}.html 으로 작성하면 된다.

일단 src/main/java/jpabook/jpashop에 HelloController 를 위처럼 만들어보자.

살펴보면 GetMapping으로 hello가 들어오면 Model 타입 객체로 사용자에게 응답할 view를 생성할 때 model을 이용하여 view와 같이 데이터를 전달하게 된다.

여기서는 model.addAttribute로 모델에 data 키 값에 "hello!!!"라는 데이터를 넣었다.

src/main/resources/templates에 hello.html 파일을 위처럼 생성한다.

이렇게 만든 후 다시 localhost:8080에 재접속 후 hello 를 클릭하면 다음과 같은 화면이 나온다.

타임리프가 작동해서 '안녕하세요. 손님' 대신에 안녕하세요 hello!!!가 나타나게 된 것이다.

 

 

동작을 설명해보자

• 웹브라우저에서 http://localhost:8080/hello 를 요청한다.
• 스프링 부트가 내장하고 있는 톰캣이라는 서버가 요청을 받는다.
• 스프링 HelloController로 넘어간다.
• GetMapping의 "hello" 메서드가 실행된다.
  • model에 키는 data, 값은 "hello!!!"를 만든다.
  • 컨트롤러에서 리턴 값으로 "hello"를 반환함
• 뷰 리졸버(viewResolver)가 화면을 찾아서 처리한다.
  • 스프링 부트 템플릿엔진 기본 viewName 매핑
  • resources/templates/ + {ViewName} + .html

 

 

 

 

💻 서버 재시작없이 View 파일 변경하는 방법

spring-boot-devtools 라이브러리를 추가하면 html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다.