프로그래밍/spring boot

[스프링부트] 실전! 스프링 부트와 JPA 활용1 #1-3 View 환경 설정

aSpring 2023. 10. 24. 11:43
728x90
728x90
※ 본 포스팅은 김영한 강사님의 인프런 '실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발' 강의를 들으며 작성한 수강일지 입니다.

| 프로젝트 환경설정

1. 프로젝트 생성
2. 라이브러리 살펴보기
3. View 환경설정
4. H2 데이터베이스 설치
5. JPA와 DB 설정, 동작 확인

 

3. View 환경 설정

1) 메뉴얼

thymeleaf 템플릿 엔진

 

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

  • 장점 : 마크업을 깨지않고 그대로 쓸 수 있고, 웹 브라우저에서 열면 열림
  • 단점 : (2 버전대) 무조건 닫는 태그를 정확히 매칭하지 않으면 에러가 났었음 -> 3.0에서는 가능하고 성능도 개선 되었다고 함

 

thymeleaf 스프링 공식 튜토리얼

  • 스프링 공식 튜토리얼 : https://spring.io/guides > 검색 input에 serving 검색 > Serving Web Content with Spring MVC 보고 따라해보기
 

Spring | Guides

Designed to be completed in 15-30 minutes, these guides provide quick, hands-on instructions for building the "Hello World" of any development task with Spring. In most cases, the only prerequisites are a JDK and a text editor.

spring.io

 

템플릿 엔진에 관한 스프링부트 메뉴얼

 

29. Developing Web Applications

The Spring Web MVC framework (often referred to as simply “Spring MVC”) is a rich “model view controller” web framework. Spring MVC lets you create special @Controller or @RestController beans to handle incoming HTTP requests. Methods in your contr

docs.spring.io

 


 

따로 세팅은 필요치 않으니 직접 해보기

 

2) 직접 해보기

  • HelloController 만들기
// src/main/java/jpabook.jpashop/HelloController

package jpabook.jpashop;

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

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model) {
        // spring ui에 있는 model에 데이터를 실어서 controller -> view에 넘길 수 있음
        model.addAttribute("data", "hello!!!");
        // * 스프링 부트 thymeleaf viewName 매핑
        // resources:templates/ +{ViewName}+ .html
        return "hello"; // 화면 이름 -> .html이 자동으로 붙음
    }
}
  • view 만들기
<!-- src/main/resources/templates/hello.html -->

<!DOCTYPE html>
<!-- html의 name space를 thymeleaf로 줌 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <!-- 여기를 타면 data 부분에 값이 들어갈 것, 순수한 html로 했을 때는 '안녕하세요. 손님'이 출력-->
    <p th:text="'안녕하세요. ' + ${data}">안녕하세요. 손님</p>
</body>
</html>

 

-> server side rendering 없이 실행시키면,

- 그냥 html만 실행시킨 것인데 '안녕하세요. 손님'만 찍힘 -> 이것이 thymeleaf의 장점

- 페이지 소스를 보면 위 처럼 되어있음

 

-> server side rendering

실행해보면, hello가 찍힌다

  • 정적인 페이지 만들기(server side rendering 하지않고 순수한 html을 뿌리고싶을 때)
    • 위처럼 templates 폴더가 아닌 static 폴더 내에 .html 파일 만들어 주기 
    • resources 폴더 내에서 수정할 때는 항상 서버를 다시 띄워야 함

<!-- src/main/resources/statc/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    Hello
    <a href="/hello">hello</a>
</body>
</html>

 

3) 서버 리스타트

  • view를 수정할 일이 많은데, 이 때마다 서버를 restart 하지 않으면 변화가 없음
  • Recompile을 해도 안됨

-> 라이브러리 를 추가해서 더 편하게

-> 이렇게 해도 변화는 없을 것 -> 해당 html 파일만 Recompile하면 서버를 재시작하지 않아도 html이 새로고침하면 바뀐다고 하는데 나는 안되어서 우측 Gradle > Reload All Gradle Projects 클릭

 

>  서버 재시작을 하니 강사님이 설명하신대로 'restartMain'이 뜨기 시작했고 

> 그제서야 서버 재시작 없이도 html 파일만 recompile했을 때 F5 누르면 html 화면이 갱신되는 것을 확인할 수 있었다

728x90
728x90