안녕하세요. hia의 개발 story입니다.
이번에는 부디 끝까지 만들어 볼 수 있기 바라며 Sample Board Project를 시작했습니다.
말 그대로 간단한 게시판 프로그램을 만들 예정이며 부수적으로 로그인이나 회원가입 같은 기능들도 함께 넣어 공부해보려 합니다.
우선 틀을 잡기에 앞서 프로젝트를 생성하는 방법은 종종 업데이트를 했기 때문에 생략하도록 하겠습니다.
혹시 모르시는 분들을 위해 intellij에서 스프링부트 프로젝트 생성하는 방법을 올려드리도록 하겠습니다.
[Spring Boot] Intellij에 스프링 부트 프로젝트 생성하기
안녕하세요. hia의 개발 story입니다. 안녕하세요. 웹 개발을 공부하고 있는 개발자 hia입니다. 오늘은 작은 프로젝트를 시작하기 위해 스프링 부트 프로젝트를 생성해보겠습니다. 그동안 이클립스
hia376.tistory.com
만약 Intellij ultimate를 사용 중이지 않거나 sts, vscode 등 다른 툴을 사용 중이라면 추후에 따로 정리해서 글을 올리도록 하겠습니다.
요즘 회사에서 vscode 열풍이 불어서 사용중인데 intellij 만큼 좋은 성능에 빠르기까지 합니다.
저는 위의 글과는 설정을 조금 다르게 했습니다.
프로그램 설정
- Gradle
- Java11
- SpringBoot 2.7.14
그리고 라이브러리는 Thymeleaf, Lombok, Spring Boot DevTools, Spring Web을 넣어주었습니다.
프로그램 구조
프로그램 구조는 이렇게 되어있습니다.
시작 시 구조를 잡아두면 편해서 layout 및 header, footer 등을 잡아두려고 합니다.
그럼 이제 실제로 Thymeleaf를 이용하여 layout 구조를 잡는 방법을 포스팅하도록 하겠습니다.
layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sample Board Project</title>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap-5.2.3-dist/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
<div id="content" layout:fragment="content"></div>
</div>
<div layout:fragment="footer" th:remove="tag"></div>
<div layout:fragment="script" th:remove="tag"></div>
</body>
</html>layout을 구성하는 건 기본 html 구조입니다.
그 안에 적용하고자 하는 css 파일을 넣을 수도 있고
content, hearder, footer 같이 fragment라는 조각을 넣을 수도 있습니다.
또한 페이지별 공통으로 들어가야할 스크립트 파일을 넣을 수도 있겠죠.
layout을 사용하면 이런 공통 파일들을 한꺼번에 관리할 수 있어서 편리해집니다.
그러면 이제 index 파일에 layout을 적용해보겠습니다.
index.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}" lang="ko">
<th:block layout:fragment="content">
<div class="content-wrapper">
<span>안녕</span>
<h1>안녕</h1>
<h2>hello</h2>
</div>
</th:block>
<th:block layout:fragment="script">
</th:block>
</html>이렇게 작성하고 당연히 적용이 되겠지 하고 실행을 시켰습니다.
그런데 아래와 같이 한글이 깨지고 스타일도 전혀 먹히질 않았습니다.
그래서 찾아보니 Thymeleaf에서 layout 기능을 사용하려면 라이브러리를 추가해야 한다고 하네요.
build.gradle에 dependencies 아래에 아래와 같이 추가를 해준 후 gradle을 reload 해줍니다.
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
그러면 아래와 같이 스타일도 적용되고 한글도 깨지지 않고 잘 나옵니다.
이제 구조를 완성하였으니 다음에는 조각들을 붙여보도록 하겠습니다.
'Springboot' 카테고리의 다른 글
| [Spring Boot] @Query 어노테이션을 이용한 Spring JPA 예제 (0) | 2023.06.13 |
|---|---|
| [Spring Boot] 쿼리메서드 - deleteBy 사용하기 (0) | 2023.06.12 |
| [Spring Boot] JpaRepository에서의 쿼리메서드 (0) | 2023.03.31 |
| [Spring Boot] JpaRepository의 페이징 및 정렬 처리 하기 (0) | 2023.03.22 |
| [Spring Boot] JpaRepository를 이용한 CRUD 테스트 예제 공부 (0) | 2023.03.21 |