ACHO.pk devlog

[Springboot] View 환경 설정 본문

프레임워크/Springboot

[Springboot] View 환경 설정

Acho 2023. 1. 14. 10:18

인프런 김영한 강사님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술"의 강의를 듣고 학습하였습니다.

Welcome Page 만들기

    ▹스프링 부트는 resources/static 경로 내의 html 파일 welcome page로 인식한다.

    ▹welcome page는 도메인만 누르고 들어왔을 때 뜨는 첫 화면이다.

 

resources/static에 index.html 파일을 생성한다.

폴더 경로

▹index.html

<!DOCTYPE HTML>
<html>
<head>
	<title>Hello</title>
</head>
<body>
	<a href="/hello">HELLO</a>
<body>
</html>

 

결과화면

 

 

• 스프링부트가 지원하는 welcome page 기능

   ▹static/index.html을 올려두면 Welcome Page 기능을 제공한다.

   ▹https://docs.spring.io/spring-boot/docs/2.4.13/reference/html/spring-boot-features.html#boot-features-developing-web-applications

 

Spring Boot Features

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and Servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

 

 

• Thymeleaf 템플릿 엔진

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

 

Thymeleaf

Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati

www.thymeleaf.org

   ▹ 스프링 공식 튜토리얼 : https://spring.io/guides/gs/serving-web-content/

 

Serving Web Content with Spring MVC

this guide is designed to get you productive as quickly as possible and using the latest Spring project releases and techniques as recommended by the Spring team

spring.io

   ▹ 스프링부트 메뉴얼 : https://docs.spring.io/spring-boot/docs/2.4.13/reference/html/spring-boot-features.html#boot-features-spring-mvc-template-engines

 

Spring Boot Features

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and Servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

 

 

Controller 다루기

    ▹java/Springboot.study 경로 하위에 controller 패키지를 생성해준다.

    ▹그다음, controller 패키지 내부에 stuController 클래스를 생성해준다.

폴더 경로

▹stuController 파일

package Springboot.study.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class stuController {

    @GetMapping("study")
    public String study(Model model) {
        model.addAttribute("data", "my study!!");
        return "stu";
    }
}

localhost:8080/study을 입력하면
template/stu.html로 이동한다.

 

★중요한 코드를 살펴보자.

 

    @GetMapping("study")
    public String study(Model model) {
        model.addAttribute("data", "my study!!");
        return "stu";

웹 어플리케이션에서 '/hello'가 들어오면 @GetMapping("hello") 부터 return "hello"; 가 호출된다.

 

model.addAttribute("data", "my study!!");

model의 Atrribute에 add해서 key로 넣었던 data, "hello!!"는 value다.

이 value가 templates의 ${data}로 치환된다. ( ${data}는 아래에 내용있음)

 

 

※주의

@GetMapping("경로명")

return "파일명";

templates 안에 있는 html 파일 내용을 출력하려면 서버 실행 후,
패턴이 되어야 규칙에 맞게 접근이 가능하다.

 

 

templates 다루기

templates

▹stu.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'공부할래? ' + ${data}" >같이 공부할래?</p>
</body>
</html>

★중요한 코드를 살펴보자.

 

<html xmlns:th="http://www.thymeleaf.org">

thymeleaf 문법을 템플릿 엔진으로써 사용 가능하다.

 

<p th:text="'공부할래? ' + ${data}" >같이 공부할래?</p>

${data}는 Controller 파일의 value 값으로 치환된다.

 

 

 

에러다!!!

ERROR 2112 --- [nio-8080-exec-4] org.thymeleaf.TemplateEngine  : [THYMELEAF][http-nio-8080-exec-4] Exception processing template "study": Error resolving template [study], template might not exist or might not be accessible by any of the configured Template Resolvers

아!!!!!! stuController에서 return study; 로 한 것이 잘못이었다. 내가 잘 몰라서 실수를 했다. 

Controller에서 return을 할 때에는 띄우고 싶은 html 파일명과 동일하게 써야한다.

 

 

에러 잡고 다시 해보면 원하는 결과가 나온걸 확인할 수 있다.

결과화면

즉, 클라이언트가 /study로 url 요청을 하면 stuController의 value가 templates 폴더의 stu.html의 ${data}로 치환이 된다.

 

 

동작 환경

    ▸웹 브라우저에서 url 요청을 하면 내장 톰캣 서버가 받은 요청을 Controller에게 전달하여 처리하는 과정을 거친다.

     ▸Controller에서 리턴 값으로 문자를 반환하면, resources/templates 폴더 하위에 있는 문자.html 파일을 스프링이 찾아 템플릿 엔진이 처리한다. → viewResolver

    ▸model에서 key 값을 이용해 value 값을 전달한다. → model(data:value)

 

    ▸Controller에서 return 값으로 문자를 반환하면 'viewResolver'가 화면을 찾아서 처리한다.

         ▹스프링 부트 템플릿엔진 기본 viewName 매핑

         ▹"resources:templates/" + (ViewName) + ".html" 열림

 

 

 

'프레임워크 > Springboot' 카테고리의 다른 글

[Springboot] 회원 레포지토리 테스트 케이스 작성  (0) 2023.01.18
[Springboot] 회원 도메인과 레포지토리 생성  (0) 2023.01.17
[Springboot] 스프링 웹 개발 기초(정적, MVC, 템플릿 엔진, API)  (0) 2023.01.16
[Springboot] 라이브러리 살펴보기  (0) 2023.01.13
[Springboot] 스프링부트 프로젝트 생성  (0) 2023.01.12
'프레임워크/Springboot' Related Articles more
Comments