728x90
반응형
애플리케이션 설정
#DataSource Setting
spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe
spring.datasource.username=system
spring.datasource.password=pass
#JPA Setting
spring.jpa.hibernate.ddl-auto=update
# -> 프로젝트 실행시 자동으로 DDL 생성
spring.jpa.properties.hibernate.format_sql=true;
# -> SQL 포맷팅해서 출력
spring.jpa.show-sql=true
# -> JPA 처리시 발생하는 SQL 출력
#Thymeleaf에서 변경 후에 만들어진 결과를 보관하지 않도록 설정
spring.thymeleaf.cache=false
#또한, 뷰의 수정 후에 자동으로 결과 반영이 이루어지도록 Update classes and resources 설정그래들 오라클 의존성 추가
runtimeOnly 'com.oracle.database.jdbc:ojdbc8'}
주의 : 주석에 대괄호 사용시 에러 발생
<!DOCTYPE html>
<!-- 타임리프 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>타임리프 기본 : 화면출력 반복문, 삼항연산자를 이용한 CSS</title>
</head>
<body>
<!-- 타임리프 활용-->
<!-- 1. 화면 출력, 2. 제어문, 3. 반복문, 4. HTML 적용이 안되는 블락 ,5. 링크처리, 6. 엔티티를 포맷팅-->
<!-- 7. 레이아웃 -->
<!-- (1. 화면 출력) th:를 붙이고 속성값 지정, 별도 태그 사용하지 않고 추가 개발 가능-->
<h1 th:text="${'Hello World'}"></h1>
<hr/>
<!-- (2. 반복문) th:each = "변수: ${목록}" -->
<!-- 컨트롤러에서 전달한 model을 받아서 사용 가능-->
<ul>
<!-- dto라는 변수를 만들어서 사용하고, Model에서 전달된 데이터를 $를 이용해 처리-->
<li th:each="dto, state : ${list}">
[[${state.index}]] --- [[${dto}]]
<!-- 대괄호는 인라인 표현식으로 별도 태그 속성 지정하지 않고 사용 가능-->
<!-- 반복문에서 사용 가능한 상태 객체로 순번이나 인덱스 번호, 홀수/짝수 지정 가능-->
<!-- 상태객체 속성: index, count (index는 0부터 시작, count는 1부터 시작)-->
</li>
</ul>
<hr/>
<!-- (3. 제어문) th:if ~ unless -->
<!-- 삼항 연산자 사용이 가능한 제어문-->
<!-- sno값이 5의 배수만 출력-->
<ul>
<li th:each="dto,state : ${list}" th:if="${dto.sno %5 ==0}">
[[${dto}]]
</li>
</ul>
<ul>
<!-- 변수 dto, state 선언 : model에서 전달받은 list 사용-->
<li th:each="dto, state : ${list}" >
<!-- if~unless를 이용한 제어문과 화면출력 사용-->
<span th:if="${dto.sno % 5 == 0}" th:text="${'-----------------' +dto.sno}"></span>
<span th:unless="${dto.sno % 5 == 0}" th:text="${dto.first}"></span>
</li>
</ul>
<!--삼항연산자를 이용한 화면 출력 if?맞으면 출력-->
<ul>
<li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0 }? ${dto.sno}">
</li>
<!--삼항연산자를 이용한 화면 출력 if?맞으면 출력 나머지는 first 출력-->
<li th:each="dto, state : ${list}" th:text="${dto.sno % 4 == 0 }? ${dto.sno}">
</li>
</ul>
<!-- 삼항 연산자를 이용한 특정 상황에만 적용하는 CSS 스타일-->
<style>
.target {
background-color: red;
}
</style>
<!-- sno가 5의 배수인 경우에만 빨간 배경을 적용한다.-->
<ul>
<li th:each="dto, state : ${list}" th:class="${dto.sno % 5 == 0}?'target'" th:text="${dto}">
</li>
</ul>
<!-- (4. 태그가 필요없는 th:block)-->
<!-- html로 처리되지 않기때문에, 루프등을 별도로 처리할 때 사용-->
<ul>
<th:block th:each="dto: ${list}">
<li th:text="${dto.sno % 5 == 0}?${dto.sno}:${dto.first}"></li>
</th:block>
</ul>
<hr/>
<!-- (5. 링크 처리) @{링크}-->
<!-- 가독성이 좋다-->
<!-- @{}로 구성된 링크-->
<ul>
<li th:each="dto : ${list}" >
<a th:href="@{/sample/exView}">[[${dto}]]</a>
</li>
</ul>
<!-- sno와 같은 파라미터를 추가하기 위해 키sno와 값${dto.sno}의 형태를 추가-->
<ul>
<li th:each="dto : ${list}" >
<a th:href="@{/sample/exView(sno=${dto.sno})}">[[${dto}]]</a>
</li>
</ul>
<!-- sno을 path로 이용-->
<ul>
<li th:each="dto : ${list}" >
<a th:href="@{/sample/exView{sno}(sno=${dto.sno})}">[[${dto}]]</a>
</li>
</ul>
<hr/>
<!-- (6. 기본 객체와 LocalDateTime)-->
<!-- 문자나 숫자, 파라미터, request, response, session을 이용해 편리하게 코드 작성-->
<!-- #numbers, #dates등의 기본 객체 사용 가능 -->
<!-- sno를 5자리로 만들기 : 포맷팅-->
<ul>
<li th:each="dto : ${list}" >
[[${dto.sno}]] --- [[${#temporals.format(dto.regTime, 'yyyy/MM/dd')}]]
</li>
</ul>
<!--java8time 이용 :LocalDateTime이 사용하기 어렵기 때문에-->
<!-- #temporal객체를 이용한 포맷팅-->
<ul>
<li th:each="dto : ${list}" >
[[${dto.sno}]] --- [[${#temporals.format(dto.regTime, 'yyyy/MM/dd')}]]
</li>
</ul>
<hr/>
<!-- (7. 레이아웃) -->
<h1>Fragment Test</h1>
<!--fragment: 특정 부분을 내외부로 가져와서 포함시키기 -->
<!-- replace와 insert-->
<!--특정 부분을 파라미터로 전달해 내용에 포함 -->
<!-- div 혹은 block을 이용해 사용-->
<!-- ::부분이 있으면 해당 부분 참조, :: 부분이 없으면 전체 참조-->
<!-- 1. replace -->
<div style="border: 1px solid blue">
<th:block th:replace="~{/fragments/fragment2}"></th:block>
</div>
<h1>Layout 1 - 1</h1>
<div th:replace="~{/fragments/fragment1 :: part1}" ></div>
<h1>Layout 1 - 2</h1>
<div th:replace="~{/fragments/fragment1 :: part2}" ></div>
<h1>Layout 1 - 3</h1>
<th:block th:replace="~{/fragments/fragment1 :: part3}" ></th:block>
<!-- 2. insert -->
<!-- 파라미터를 전달해 해당 화면 구성을 적용한다.-->
<!-- #ulFirst - this는 현재 페이지-->
<!-- #ulFirst는 css의 ID 선택자-->
<th:block th:replace="~{/fragments/fragment3:: target(~{this:: #ulFirst} , ~{this::#ulSecond} )}">
<ul id="ulFirst">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<ul id="ulSecond">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</th:block>
<hr/>
날짜와 시간을 쉽게 다루기 위해 의존성 추가
java8time
레이아웃과 부트스트랩
-> fragment를 이용
-> 부트스트랩을 가져와서 적용
-> content부분은 setContent="content"를 이용해 전달 후 반환받아서 사용
728x90
반응형
'Server Programming > Spring Boot Backend Programming' 카테고리의 다른 글
| [Spring 부트 - 방명록 미니 프로젝트] 2-2. 서비스, DTO, 컨트롤러 작성 (1) (0) | 2022.10.02 |
|---|---|
| [Spring 부트 - 방명록 미니 프로젝트] 2-1. 프로젝트 생성과 Querydsl (0) | 2022.10.02 |
| [Spring 부트] 프로젝트로 공부하기 (0) | 2022.10.02 |
| [Stream] 활용 예제 (0) | 2022.10.01 |
| application.properties (0) | 2022.10.01 |
