[스프링부트3 백엔드 개발자 되기] part 7

CodeKong의 기술 블로그·2023년 11월 22일

SPRING BOOT

목록 보기

18/24

📌 학습목표

스프링 부트에서 제공하는 템플릿 엔진인 타임리프를 사용해서 블로그 화면을 개발합니다. 여기서 개발할 블로그 화면은 총 3개 입니다. 우리가 흔히 쓰는 블로그를 생각하면 되죠. 글 목록을 볼 수 있는 화면, 글 내용을 확인할 수 있는 상세 화면, 수정이나 생성할 수 있는 화면으로 구성됩니다.

💡 사전 지식 : 타임리프

타임리프는 템플릿 엔진입니다.

템플릿 엔진이란?

✅ 스프링 서버에서 데이터를 받아 우리가 보는 웹 페이지. 즉, html상에 그 데이터를 넣어 보여주는 도구입니다.
✅ 여기서 손님은 클라이언트, 요리사를 서버라고 합니다.
✅ 그리고 중간에 있는 점원은 API입니다.

템플릿 엔진 개념 잡기

<h1 text=${이름}>
<p text=${나이}>
✅ 이렇게 해 두면 서버에서 이름, 나이라는 키로 데이터를 템플릿 엔진에 넘겨주고 템플릿 엔진은 이를 받아 html에 값을 적용합니다.

타임리프 사용을 위한 의존성 추가하기

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

타임리프 문법 익히기용 컨트롤러 작성하기

@Controller
public class ExampleController {

    @GetMapping("/tymeleaf/example")
    public String tymeLeafExample(Model model) {
        Person examplePerson = new Person();
        examplePerson.setId(1L);
        examplePerson.setName("KJW");
        examplePerson.setAge(30);
        examplePerson.setHobbies(List.of("reading", "running", "coding"));

        model.addAttribute("person", examplePerson);
        model.addAttribute("today", LocalDateTime.now());

        return "example";

    }

    class Person {
        private Long id;
        private String name;
        private int age;
        private List<String> hobbies;
    }
}

뷰 작성하기

<!DOCTYPE html>
<html xmlns:th="http://www.tymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>타임리프 익히기</h1>
<p th:text="${#temporals.format(today, 'yyyy-MM-dd')}"> </p>
<div th:object="${person}">
    <p th:text="|이름: *{name}|">이름: </p>
    <p th:text="|나이: *{age}|">나이: </p>
    <p>취미</p>
    <ul th:each="hobby : *{hobbies}">
        <li th:text="${hobby}"><li>
        <span th:if="${hobby == '운동'}">(대표취미)</span>
    </ul>
</div>
<a th:href="@{/api/articles/{id}(id=${person.id})}">글 보기</a>
</body>
</html>