게시판 화면을 위한 Thymeleaf 적용과 데이터 출력하기

티스토리 뷰

SpringBoot

게시판 화면을 위한 Thymeleaf 적용과 데이터 출력하기

nswon 2022. 7. 8. 10:15

api는 만들었는데 프런트가 없는 경우, 사이트프로젝트를 한 번 해봐야 하긴 하는데 프런트까지 신경쓰려면 공부할 양이 너무 많아져서 미루고 api만 잔뜩 만드는 경우, 어떻게 프런트 작업까지 완료를 했어도 api 끌어와서 퍼블리싱까지, 신경쓸 일이 너무 많다.

이러한 상황에 Thymeleaf를 적용하여 쉽게 뷰를 만들 수 있다. 맨날 Postman에서 확인하는 과정보다 훨씬 백엔드 api 개발에 재미를 붙일 수 있다.

이번 포스팅에서는 Thymeleaf를 적용하고 서버로 들어온 데이터를 화면에 출력해보자.

1. 작업 결과 미리보기

thymeleaf를 적용하여 간단하게 게시판을 구현해보았다.

디자인은 bootstrap을 가져왔다.

2. Thymeleaf 적용하기

Thymeleaf는 뷰 템플릿이기 때문에 의존성을 추가해주어야 한다.

build.gradle에서 dependencies에 아래를 복사해 추가해주자.

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

여기서 중요한 점은 추가 후 오른쪽 상단에 나타난 코끼리를 눌러주어야 한다.

혹시 코끼리가 나타나지 않았다면 오른쪽 상단에 Gradle에 들어가 직접 Reload 해주자.

3. 서버에서 받은 데이터 출력하기

글을 작성하고 전체조회에 뿌려주는 코드를 작성 해보자.

entity 패키지를 만들고 그 안에 Board 클래스를 생성한 후 아래와 같이 코드를 작성하자.

이번 포스팅에서는 Thymeleaf가 목적이니 상세한 설명은 생략하겠다. extends TimeEntity는 빼주자.

그리고 repository 패키지를 만들고 그 안에 BoardRepository 인터페이스를 생성해보자.

그리고 위 사진처럼 추가해주자. 그리고 service 패키지를 만들고 BoardService 클래스를 만들어 간단한 저장과 전체조회 로직을 짜보자.

아마 오류가 뜰 것이다. 그럼 dto 패키지를 만들고 안에 BoardRequestDto, BoardResponseDto를 만들어주자.

마찬가지로 필드에 createdDate, modifiedDate랑 빌더 쪽도 지워주자.

controller 패키지를 만들고 BoardController를 만들어주자.

application.properties 를 application.yml 로 변경 후 아래 코드를 넣어주자.

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/test <-- 이부분은 사용자의 h2 url을 넣어주어야 한다.
    username: sa
    password:
    driver-class-name: org.h2.Driver

  mvc:
    hiddenmethod:
      filter:
        enabled: true

  jpa:
    hibernate:
      ddl-auto: create-drop
    properties:
      hibernate:
        show_sql: true
        format_sql: true
        default_batch_fetch_size: 1000

  logging.level:
    org.hibernate.SQL: debug
  #  org.hibernate.type: trace

templates 안에 board폴더를 만들고 list.html, write.html을 만들어주자.

아래는 전체목록 페이지와 글 작성 페이지이다. 먼저 list.html에 들어갈 코드다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/board.css}">
</head>
<body>
<div th:insert="common/header.html" id="header"></div>
<div>
    <!-- table -->
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">글제목</th>
            <th scope="col">작성자</th>
            <th scope="col">작성일</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="board : ${boardAllList}">
            <td>
                <span th:text="${board.id}"></span>
            </td>
            <td>
                <a th:href="@{'/post/' + ${board.id}}">
                    <span th:text="${board.title}"></span>
                </a>
            </td>
            <td>
                <span th:text="${board.writer}"></span>
            </td>
            <td>
                <span th:text="${#temporals.format(board.createdDate, 'yyyy-MM-dd HH:mm')}"></span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

write.html 코드이다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/board.css}">
</head>
<body>
<div th:insert="common/header.html" id="header"></div>
    <form action="/post" method="post">
        <input type="text" class="form-control" placeholder="제목을 입력해주세요" name="title"><br>
        <input type="text" class="form-control" placeholder="사용자의 이름을 입력해주세요" name="writer"> <br>
        <textarea name="content" class="form-control" placeholder="내용을 입력해주세요" aria-label="With textarea"></textarea>

        <input type="submit" class="btn btn-primary" value="저장하기">
    </form>

</body>
</html>

templates 안에 common폴더를 만들고 header.html을 만들어주자.

<header>
    <div class="container">
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
                <span class="fs-4">포트폴리오-게시판</span>
            </a>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="/" class="nav-link active" aria-current="page">Home</a></li>
                <li class="nav-item"><a href="/post" class="nav-link">새로운 글</a></li>
                <li class="nav-item"><a href="#" class="nav-link">프로필</a></li>
                <li class="nav-item"><a href="#" class="nav-link">설정</a></li>
                <li class="nav-item"><a href="#" class="nav-link">로그인</a></li>
            </ul>
        </header>
    </div>
</header>

전체 코드는 GitHub에 올려두었다.

https://github.com/nswon/thymeleaf-board-dev

GitHub - nswon/thymeleaf-board-dev: thymeleaf로 게시판 구현해보기

thymeleaf로 게시판 구현해보기. Contribute to nswon/thymeleaf-board-dev development by creating an account on GitHub.

github.com

'SpringBoot' 카테고리의 다른 글

AOP 개념과 용어 정리 (0)	2022.07.09
자주 사용하는 Thymeleaf 문법 (0)	2022.07.08
setter를 지양하고 Builder 패턴을 사용하자 (0)	2022.05.05
자바 코드로 직접 스프링 빈 등록하기 (0)	2022.04.11
컴퍼넌트 스캔으로 자동 의존관계 설정 (0)	2022.04.09

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

티스토리 뷰