이전 게시글 스프링 부트와 MySQL 연결
스프링부트와 mySQL 연결
이전 게시글 프로젝트 시작 https://hoozy.tistory.com/entry/%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91 mySQL을 처음 써봐서 그런지 ORACLE보단 설정이 복잡해 보였다. 하
hoozy.tistory.com
기본 설정
- mySQL, jpa, lombok, Thymeleaf 등 GRADLE 추가
home.html 홈페이지
- resources 폴더 내에 static 폴더 내 파일은 컨트롤러 없이(localhost:port/) 실행 가능하지만, templates 폴더 내의 html 파일은 컨트롤러를 거쳐서 컨트롤러에서 보내야 접근이 가능하다.
html layout, msg 설정
- html은 templates에 넣어서 컨트롤러를 통해서 접근하게 한다.
- layout은 templates/fragments 폴더를 만들어 넣는게 일반적이다.
1. layout 설정
- 헤더, 푸터는 사이트의 어느 페이지든 같기 때문에 layout으로 묶어서 모든 html에서 간편하게 추가할 수 있다.
- 먼저 layout에 들어가는 모든 html은 아래와 같이 상단에 타임리프 th 태그를 넣어야한다.
<html lang="ko" xmlns:th="http://www.thymeleaf.org">1. 헤더 설정
- 헤더에는 th:fragment 라고 layout의 프레그먼트를 headerFragment 로 지정해준다.
<header th:fragment="headerFragment">
- 푸터에는 프레그먼트에 footerFragment 라고 이름을 지정해준다.
<footer th:fragment="footerFragment">
- config 는 layout에 즉, 모든 페이지에 들어갈 css, js 등 필요한 것을 넣는 파일 전용 html 이라고 보면 된다.
- 마찬가지로 프레그먼트에 configFragment 라고 이름을 지정해준다.
<th:block th:fragment="configFragment"> // 블럭에 있는 css, js가 적용된다.
- 마지막으로 위의 3가지를 한 번에 layout으로 묶으면 layout이 완성된다.
- layout 에는 th 태그와 타임리프의 layout 까지 추가되어야 한다.
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">- 이후 위에 3가지 프레그먼트를 각 기능에 맞춰서 넣어주면 된다.
- 프레그먼트는
th:replace="~{fragments/기능 :: 프레그먼트이름}"형태로 넣는다
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoozy's CS</title>
// css와 js 는 head 태그 안에 넣어야해서 configFragment 는 여기 넣어준다.
<th:block th:replace="~{fragments/config :: configFragment}"></th:block>
</head>
// head 태그와 body 태그 사이에 헤더 테그를 넣는다.
<header th:replace="~{fragments/header :: headerFragment}"></header>
// layout을 적용한 html에 body에는 내용이 들어간다는 뜻
<body layout:fragment="content">
</body>
// body 태그 이후에 푸더 테그를 넣는다.
<footer th:replace="~{fragments/footer :: footerFragment}"></footer>
</html>
layout 적용
- 적용하는 html에는 th, layout, decorate 를 추가해야한다.
- decorate에는 ~{fragments/layout의 html 이름} -> layout.html이면 layout 넣기
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/layout}">- 적용하는 html에는 헤더, 푸더가 적용되었기 때문에 body만 layout에서 가져오면 된다.
<body layout:fragment="content">
다음 게시글 프로젝트 2 프론트엔드 구현
[스프링 부트] 프로젝트 2 프론트엔드 구현
이전 게시글 프로젝트 1 설정 https://hoozy.tistory.com/entry/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%A4%EC%A0%95-1 프로젝트 1 설정 (Spring Boot, MySQL) 이전 게시글 스프링 부트와 MySQL 연결 https://hoozy.tistory.com/entry/%E
hoozy.tistory.com
참고 자료
https://gimmesome.tistory.com/176
https://getbootstrap.kr/docs/5.2/examples/headers/#
'Spring Boot (프로젝트)' 카테고리의 다른 글
| [스프링 부트] 프로젝트 3 엔티티, 로그인 (비밀번호 암호화) (0) | 2023.03.12 |
|---|---|
| [스프링 부트] 프로젝트 2 프론트엔드 구현 (0) | 2023.03.10 |
| 스프링 부트 로그 관리하기 (Slf4j) (0) | 2023.03.08 |
| Thymeleaf 정리 (JSP와 차이) (0) | 2023.03.08 |
| [MySQL] ERD를 활용한 테이블 생성 (0) | 2023.03.05 |
댓글