View 환경설정

이 글은 김영한 님의 Infrean 강의를 학습한 내용을 정리하여 작성합니다.

 

이전 글에서 localhost:8080으로 접속하면 Error 페이지를 보여주는 것을 확인할 수 있다.

 

이번 글에서는 Welcome 페이지를 생성해 보도록 한다.

 

View 환경설정

---

Welcome Page 생성하기

Spring Boot는 resources/static 폴더 아래 위 이미지처럼 index.html 파일을 생성하면 자동으로 Welcome Page를 생성해준다.

 

index.html 파일 생성

위 이미지처럼 파일을 생성한 뒤 서버를 끄고 다시 실행시켜 본다.

 

localhost:8080

보다시피 Welcome Page가 생성되었다.

 

---

문서 참조

이처럼 Spring Boot가 제공하는 기능은 매우 방대하다.

그래서 스스로 기능을 찾아보는 것이 매우 중요한데 방법은 다음과 같다.

https://spring.io/

Spring makes Java simple.

spring.io URL로 접속한 뒤 Projects 메뉴에서 Spring Boot로 이동한다.

spring.io 페이지

 

사용하고 있는 Spring Boot 버전에서 Reference Doc 클릭!

 

---

thymeleaf 템플릿 엔진

현재 생성한 Welcome Page는 정적 페이지다.

spring 문서

spring 문서를 확인해 보면 템플릿 엔진으로 FreeMarker, Groovy, Thymeleaf, Mustache 네 가지를 주로 사용하는데 우리는 Thymeleaf를 사용해본다.

---

Controller

Web application에서 진입점이 바로 controller다.

우선, hello.hellospring 폴더 아래 새로운 패키지를 생성하고 생성한 폴더 내부에 "HelloController"라는 이름의 자바 클래스 파일을 생성한다.

src/main/java/hello.hellospring/controller/HelloController.java

 

Spring에서는 Controller를 사용하기 위해서는 @Controller 어노테이션을 작성해주어야 한다.

 

HelloController.java

@GetMapping("hello")라는 어노테이션을 하나 작성해주었다.

이것은 spring이 제공하는 기능인데 Web application에서  /hello URL로 이동하면 요청(request)에 대한 응답(response)으로 해당 메서드를 호출해준다.

model은 MVC(Model, View, Controller)에 해당하는데 나중에 설명하도록 한다.

 

HelloController.java

HelloController.java 파일을 위와 같이 작성해준 뒤 src/resources/templates 폴더 아래 "hello.html"이라는 파일을 새로 생성하고 아래와 같이 작성해준다.

hello.html

html의 속성으로 thymeleaf 템플릿 엔진을 선언하고 있으며

p 태그 속성으로 th가 존재하는데 thymeleaf를 뜻한다.

 

HelloController.java 파일에서

model.addAttribute("data", "hello!!");

이 문장은 html 파일에 선언한 ${data}를 hello!!로 변환해준다.

 

localhost:8080/hello

Elements

 

 

동작 환경

Spring Boot는 톰켓이라는 서버를 내장하고 있는데

웹 브라우저에서 localhost:8080/hello로 접속하면 톰켓이 스프링에서 @GetMapping 어노테이션을 찾고 해당 메소드를 호출한다.

 

그리고 우리가 작성한 hello 메소드의 반환으로 return "hello"를 작성했는데

이는 resources/templates 폴더 아래 위치하는 "hello" 이름을 가진 파일로 이동해 Thymeleaft 템플릿 엔진을 통해 랜더링하라는 것을 의미한다.

 

요약하자면, 다음과 같다.

• 컨트롤러에서 리턴 값으로 문자를 반환하면 뷰 리졸버('viewResolver')가 화면을 찾아서 리턴한다.
  • 스프링 부트 템플릿 엔진 기본 viewName 매핑
  • 'resources:templates/' + (ViewName) + '.html'

 

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

인텔리J 컴파일 방법: 메뉴 build -> Recomplie