처음 Project 생성할 때 넣은 Project Dependencies
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-jdbc'
implementation 'org.springframework.boot:spring-boot-starter-mail'
implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-websocket'
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'com.oracle.database.jdbc:ojdbc11'
annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.3'
testImplementation 'org.springframework.security:spring-security-test'
}testImplementation 'org.springframework.security:spring-security-test' 여기에서 기본으로 제공해주는 로그인 페이지가 보이는데
src/main/java Application.java 에서 @SpringBootApplication 어노테이션 옆에
exclude={SecurityAutoConfiguration.class} 추가해서 기본 제공하는 로그인 페이지 안 뜨게 만듦
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration;
// Spring Security 에서 기본 제공하는 로그인 페이지 이용 안하겠다는 코드 추가 (이 코드 추가하면 Whitelabel error 뜸)
@SpringBootApplication(exclude= {SecurityAutoConfiguration.class})
public class BoardProjectBootApplication {
public static void main(String[] args) {
SpringApplication.run(BoardProjectBootApplication.class, args);
}
}src/main/resources 폴더 하위에
messages.properties 파일
app.name=회원제 게시판 프로젝트
# 보통 다국어 지원 같은 거 넣어둠
# 파일명 정해져있음 messages.properties 이렇게 안하면 안먹힘
user.default.image=/images/user.png여기에 적어둔 걸 key로 가져옴
로그인 화면 HTML
properties 파일에서 key 값으로 가져와서 html에 넣어주기
thymeleaf 로 title 넣어주기
#{app.name} 으로 '회원제 게시판 프로젝트' 가져올 수 있음
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="#{app.name}">messages.properties 값 출력</title>th:block 태그
- Thymeleaf 에서 제공하는 유일한 태그
- Thymeleaf는 태그 내에 th 속성을 작성하여 정의하는 게 일반적이지만 th 속성을 작성할 태그가 존재하지 않을 때 사용
- th:text 보단 조건, 반복문과 같이 사용하는 경우가 많음
th:replace 속성
파일 전체를 하나의 조각으로 취급해서 사용할 때
th:replace 에 src/main/resources/templates/ 하위 경로 작성해서 가져올 수 있음
~{}
<!-- templates/common/common.html 조각으로 추가 -->
<th:block th:replace="~{common/common}"></th:block>
</head>th:fragment 속성
태그에 th:fragment="이름" 작성해서 다른 곳에서 th:replace로 가져올 수 있음
ex)
th:fragment
src/main/resources/templates/fragments/temp.html
작성
<h1 th:fragment="temp2" style="background-color: yellow; color: pink;">
Thymeleaf Fragment 확인 중</h1>th:replace
thymeleaf 가 제공하는 접두사, 접미사를 제외한 경로 작성해서 가져옴
Thymeleaf 가 제공하는 접두사 : classpath:/templates/
Thymeleaf 가 제공하는 접미사 : .html
-> src/main/resources/templates/ .html
templates 하위 fragments 폴더에 temp.html 에서 th:fragment 속성이 temp2 인 걸 가져와서 사용하겠다.
~{fragments/temp :: temp2}
<th:block th:replace="~{fragments/temp :: temp2}"></th:block>boardProject html body 부분
<body>
<main>
<!-- common/header.html 을 조각으로 추가 -->
<th:block th:replace="~{common/header}"></th:block>
<!-- 메인 페이지 내용 -->
<section class="content">
<section class="content-1"></section>
<section class="content-2">
<!-- 로그인, 회원가입 버튼 -->
<!-- 로그인 박스 -->
<form action="/member/login" method="POST" id="loginForm">
<fieldset class="id-pw-area">
<!-- 아이디/비밀번호 입력 -->
<section>
<input type="text"
name="memberEmail"
placeholder="이메일">
<input type="password"
name="memberPw"
placeholder="비밀번호">
</section>
<!-- 로그인 버튼 -->
<section>
<button>로그인</button>
</section>
</fieldset>
<label>
<!-- label 태그 : input 태그의 제목을 나타내는 태그 -->
<input type="checkbox" name="saveId">
아이디 저장
</label>
<article class="signup-find-area">
<a href="/member/signup">회원가입</a>
<span> | </span>
<a href="#">ID/PW 찾기</a>
</article>
</form>
</section>
</section>
</main>
<!-- common/footer 추가 -->
<th:block th:replace="~{common/footer}"></th:block>
<script src="/js/main.js"></script>
</body>
</html>