SpringBoot - DAY 2

NewTypeAsuka·2023년 6월 5일
JavaSpringboot국비지원
0

SpringBoot@

목록 보기
4/5

1. 타임리프(Thymeleaf)

Thymeleaf

  • 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진
    • https://www.thymeleaf.org/
    • 템플릿 엔진: 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서(응답 화면)를 출력하는 것
  • HTML 파일에서 th(Thymeleaf) 속성을 이용해
    컨트롤러로부터 전달받은 데이터를 이용해 동적 페이지를 만들 수 있음
  • Spring Boot에서는 JSP가 아닌 Thymeleaf 사용을 권장

Thymeleaf 설정

    1. gradle에 dependency 추가
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // 타임리프 추가
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
    1. html 상단에 코드 추가
<html lang="ko" xmlns="http://www.thymeleaf.org">
    1. fragment(조각)을 이용한 공통 영역 처리
<!-- 해당 요소를 조각으로 지정된 속성으로 변경-->
<div th:insert="~{fragments/commons :: nav}"></div>
<!-- 랜더링 결과 -->
<!-- div 요소 안에 nav라는 이름의 조각이 삽입됨 -->
<div>
 	<nav>
    	<ul>
        	<li><a href="#">공지사항</a></li>
        	<li><a href="#">자유 게시판</a></li>
        	<li><a href="#">질문 게시판</a></li>
        	<li><a href="#">FAQ</a></li>
        	<li><a href="#">1:1문의</a></li>
        	<li><a href="/chatting">채팅</a></li>
    	</ul>
  	</nav>
</div>

2. Thymeleaf 주요 문법

타임리프 주요 문법

  • <th:block>
    • html 태그가 아닌 단순히 타임리프를 쓰기 위한 태그가 필요할 때 사용
    • 타임리프 해석 시 다른 타임리프 수행 후 소멸
<th:block th:if="${session.loginMember == null}">
	(로그인 실패 시 코드)
</th:block>
<th:block th:if="${session.loginMember != null}">
	(로그인 성공 시 코드)
</th:block>
  • th:replace:
    다른 파일의 경로를 연결하는 속성
    (경로는 template 폴더 기준으로 접두사/접미사 제외하고 작성)
<th:block th:replace="~{common/header}"></th:block>
  • th:href:
    링크를 연결하는 속성
<a th:href="@{/myPage/info}" id="nickname">[[${session.loginMember.memberNickname}]]</a>
  • 삼항연산자:
<p th:text="${name != null} ? ${name} : '이름없음'"></p>
	<!-- ${name} 값이 있으면 true -> 이름 출력, 없으면 false -> 이름없음 출력 -->
<p th:text="${name} ? ${name} : '이름없음'"></p>
<p th:text="${nameNothing} ? ${name} : '이름없음'"></p>
  • Elvis 연산자:
<h3 style="color: purple">2. Elvis 연산자</h3>
	<!-- ${name} 값이 있으면 그대로 출력, 없으면 이름없음 출력 (kotlin에서 애용) -->
<p th:text="${name} ?: '이름없음'"></p>
<p th:text="${nameNothing} ?: '이름없음'"></p>
  • No-Operation:
<h3 style="color: purple">3. No-Operation</h3>
<p th:text="${name} ?:_">(태그에 작성)이름없음</p>
<p th:text="${nameNothing} ?:_">(태그에 작성)이름없음</p>
profile
NewTypeAsuka
이전 포스트

SpringBoot - DAY 1

다음 포스트

SpringBoot - DAY 3

0개의 댓글