1. 타임리프 스프링 통합
2. 입력 폼 처리
3. 요구사항 추가
4. 체크박스 - 단일1
5. 체크박스 - 단일2
6. 체크박스 - 멀티
7. 라디오 버튼
8. 셀렉트 박스
< build.gradle >
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'렌더링 전
<input type="text" th:field="*{itemName}" />렌더링 후
<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />[FrontItemController]
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());
return "form/addForm";
}[form/addForm.html]
<form action="item.html" th:action th:object="${item}" method="post">
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" th:field="*{itemName}" class="formcontrol" placeholder="이름을 입력하세요">
</div><input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">[resources/templates/form/addForm.html]
<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>[FormItemController]
@PostMapping("/add")
public String addItem(Item item, RedirectAttributes redirectAttributes) {
log.info("item.open={}", item.getOpen());
}[실행 로그]
FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=null //체크 박스를 선택하지 않는 경우<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->
<label for="open" class="form-check-label">판매 오픈</label>
</div>[실행 로그]
FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=false //체크 박스를 선택하지 않는 경우[체크박스에 th:field="*{open}" 추가]
<div class="form-check">
<input type="checkbox" id="open" th:field="*{open}" class="form-check input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>[타임리프 체크 박스 HTML 생성 결과-체크X]
<div class="form-check">
<input type="checkbox" id="open" class="form-check-input" name="open"
value="true">
<input type="hidden" name="_open" value="on"/>
<label for="open" class="form-check-label">판매 오픈</label>
</div>[타임리프 체크 박스 HTML 생성 결과-체크O]
<input type="checkbox" id="open" class="form-check-input" disabled
name="open" value="true"
checked="checked">[FormItemController]
@ModelAttribute("regions")
public Map<String, String> regions() {
Map<String, String> regions = new LinkedHashMap<>();
regions.put("SEOUL", "서울");
regions.put("BUSAN", "부산");
regions.put("JEJU", "제주");
return regions;
}[addForm.html]
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="*{regions}" th:value="${region.key}"
class="form-check-input">
<label th:for="${#ids.prev('regions')}"
th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>멀티 체크 박스 추가.
th:for="${#ids.prev('regions')}": 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여id를 만들어준다.
결과(id 뒤에 숫자가 추가)
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1"
name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2"
name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3"
name="regions">[item.html]
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="${item.regions}" th:value="$
{region.key}" class="form-check-input">
<label th:for="${#ids.prev('regions')}"
th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>멀티 체크 박스에서 등록 지역을 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다.
타임리프는 th:field에 지정한 값과 th:value의 값을 비교해서 체크를 자동으로 처리해준다.
[FormItemController - 추가]
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
return ItemType.values();
}addForm.html로 모델을 담아 보낸다.
ItemType.values(): 해당 ENUM의 모든 정보를 배열로 반환한다.
[addForm.html - 추가]
<div>
<div>상품 종류</div>
<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
<input type="radio" th:field="*{itemType}" th:value="${type.name()}"
class="form-check-input">
<label th:for="${#ids.prev('itemType')}" th:text="${type.description}"
class="form-check-label">
BOOK
</label>
</div>
</div>*[실행 로그]**
item.itemType=FOOD: 값이 있을 때
item.itemType=null: 값이 없을 때라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크박스와 달리 별도의 히든 필드를 사용할 필요가 없다.
<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">여러 선택지 중에 하나를 선택할 때 사용한다.
*[FormItemController-추가]**
@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
List<DeliveryCode> deliveryCodes = new ArrayList<>();
deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
return deliveryCodes;
}[addForm.html]
<div>
<div>배송 방식</div>
<select th:field="*{deliveryCode}" class="form-select">
<option value="">==배송 방식 선택==</option>
<option th:each="deliveryCode : ${deliveryCodes}" th:value="$
{deliveryCode.code}"
th:text="${deliveryCode.displayName}">FAST</option>
</select>
</div>| @NoArgsConstructor | 파라미터가 없는 기본 생성자를 생성 |
| @RequiredArgsConstructor | final이나 @NonNull인 필드 값만 파라미터로 받는 생성자 만듦 |
| @AllArgsConstructor | 모든 필드 값을 파라미터로 받는 생성자를 만듦 |
| @Data |
|
<messages.properties>
item=상품
item.id=상품 ID
item.itemName=상품명
item.price=가격
item.quantity=수량<addForm.html>
<label for="itemName" th:text="#{item.itemName}"></label>@Bean
public MessageSource messageSource() {
ResourceBundleMessageSource messageSource = new
ResourceBundleMessageSource();
messageSource.setBasenames("messages", "errors");
messageSource.setDefaultEncoding("utf-8");
return messageSource;
}spring.messages.basename=messages</resources/messages.properties>
hello=안녕
hello.name=안녕 {0}</resources/messages_en.properties>
hello=hello
hello.name=hello {0}String result = ms.getMessage("hello", null, null);void notFoundMessageCode() {
assertThatThrownBy(() -> ms.getMessage("no_code", null, null))
.isInstanceOf(NoSuchMessageException.class);
}
@Test
void notFoundMessageCodeDefaultMessage() {
String result = ms.getMessage("no_code", null, "기본 메시지", null);
assertThat(result).isEqualTo("기본 메시지");
}String result = ms.getMessage("hello.name", new Object[]{"Spring"}, null);1. assertThat(ms.getMessage("hello", null, null)).isEqualTo("안녕");
2. assertThat(ms.getMessage("hello", null, Locale.KOREA)).isEqualTo("안녕");assertThat(ms.getMessage("hello", null,Locale.ENGLISH)).isEqualTo("hello");<div th:text="#{label.item}"></h2>| 1. 타임리프- 기본기능(2) (0) | 2022.08.06 |
|---|---|
| 1. [타임리프] 기본 기능(1) (0) | 2022.08.06 |
9. 속성 값 설정
10. 반복
11. 조건부 평가
12. 주석
13. 블록
14. 자바스크립트 인라인
15. 템플릿 조각
16. 템플릿 레이아웃1
17. 템플릿 레이아웃2
<input type="text" name="mock" th:name="userA" /><input type="text" name="userA" />- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>1. checked o <input type="checkbox" name="active" th:checked="true" /><br/>
2. checked x <input type="checkbox" name="active" th:checked="false" /><br/>
3. checked=false <input type="checkbox" name="active" checked="false" /><br/>
1번: th:checked="true"
2번: th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
3번: HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다.
<tr th:each="user : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">0</td>
</tr><tr th:each="user, userStat : ${users}"> <td th:text="${userStat.count}">username</td> ...index : 0부터 시작하는 값 count : 1부터 시작하는 값 size : 전체 사이즈 even , odd : 홀수, 짝수 여부( boolean ) first , last :처음, 마지막 여부( boolean ) current : 현재 객체<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span><td th:switch="${user.age}">
<span th:case="10">10살</span>
<span th:case="20">20살</span>
<span th:case="*">기타</span>
</td><h1>예시</h1>
<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/--><h1>예시</h1>
<span>Spring!</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<h1>3. 타임리프 프로토타입 주석</h1>
<span>Spring!</span><th:block th:each="user : ${users}">
<div>
사용자 이름1 <span th:text="${user.username}"></span>
사용자 나이1 <span th:text="${user.age}"></span>
</div>
<div>
요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
</div>
</th:block><div>
사용자 이름1 <span>userA</span>
사용자 나이1 <span>10</span>
</div>
<div>
요약 <span>userA / 10</span>
</div>
<div>
사용자 이름1 <span>userB</span>
사용자 나이1 <span>20</span>
</div>
<div>
요약 <span>userB / 20</span>
</div><!-- 자바스크립트 인라인 사용 전 -->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script><script>
var username = userA;
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = /*userA*/ "test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script><!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script><script>
var username = "userA";
var age = 10;
//자바스크립트 내추럴 템플릿
var username2 = "userA";
//객체
var user = {"username":"userA","age":10};
</script><script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script><script> var user1 = {"username":"userA","age":10}; var user2 = {"username":"userB","age":20}; var user3 = {"username":"userC","age":30}; </script><footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer><h2>1. 부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>2. 부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>3. 부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>4. 파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터
2')}"></div><head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></
script>
<!-- 추가 -->
<th:block th:replace="${links}" />
</head><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head><head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head><html th:fragment="layout (title, content)" xmlns:th="http://
www.thymeleaf.org">
<head>
<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html><html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},
~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>| 3. 메시지, 국제화 (0) | 2022.08.08 |
|---|---|
| 1. [타임리프] 기본 기능(1) (0) | 2022.08.06 |
1. 타임리프 소개
2. 텍스트-text,utext
3. 변수-SpringEL
4. 기본 객체들
5. 유틸리티 객체와 날짜
6. URL 링크
7. 리터럴
8. 연산
<html xmlns:th="http://www.thymeleaf.org">• 간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: * {...}
◦ 메시지 표현식: #{...}
◦ 링크 URL 표현식: @{...}
◦ 조각 표현식: ~{...}
• 리터럴
◦ 텍스트: 'one text', 'Another one!',…
◦ 숫자: 0, 34, 3.0, 12.3,…
◦ 불린: true, false
◦ 널: null
◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
◦ 문자 합치기: +
◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
◦ Binary operators: +, -, *, /, %
◦ Minus sign (unary operator): -
• 불린 연산:
◦ Binary operators: and, or
◦ Boolean negation (unary operator): !, not
• 비교와 동등:
◦ 비교: >, <, >=, <= (gt, lt, ge, le)
◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
◦ If-then: (if) ? (then)
◦ If-then-else: (if) ? (then) : (else)
◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
◦ No-Operation: _
<li>th:text 사용 <span th:text="${data}"></span></li><li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>escape 유무에 따른 텍스트 출력
HTML 엔티티: 웹 브라우저는 < 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현하는 방법이다.
Escape: HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것.
| Escpae | EscapeX |
|---|---|
| th:text | th:utext |
| [[...]] | [(...)] |
<ul>
<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li>
</ul>
<h1><span th:inline="none">[[...]] vs [(...)]</span></h1>
<ul>
<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
[BasicController]
@GetMapping("/variable")
public String variable(Model model) {
...
model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);
return "basic/variable";
}[variable.html]
<li>${user.username} = <span th:text="${user.username}"></span></li>
<li>${user['username']} = <span th:text="${user['username']}"></span></li>
<li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></
li><li>${users[0].username} = <span th:text="${users[0].username}"></
span></li>
<li>${users[0]['username']} = <span th:text="${users[0]['username']}"></
span></li>
<li>${users[0].getUsername()} = <span th:text="$
{users[0].getUsername()}"></span></li><li>${userMap['userA'].username} = <span th:text="$
{userMap['userA'].username}"></span></li>
<li>${userMap['userA']['username']} = <span th:text="${userMap['userA']
['username']}"></span></li>
<li>${userMap['userA'].getUsername()} = <span th:text="$
{userMap['userA'].getUsername()}"></span></li><h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div><li>request = <span th:text="${#request}"></span></li>
<li>response = <span th:text="${#response}"></span></li>
<li>session = <span th:text="${#session}"></span></li>
<li>servletContext = <span th:text="${#servletContext}"></span></li>
<li>locale = <span th:text="${#locale}"></span></li><li>Request Parameter = <span th:text="${param.paramData}"></span></li>
<li>session = <span th:text="${session.sessionData}"></span></li>
<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></
li><span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>1. <li><a th:href="@{/hello}">basic url</a></li>
2. <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
3. <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
4. <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>1. 단순한 URL
@{/hello}
=> /hello
2. 쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})}
=> /hello?param1=data1¶m2=data2
3. 경로 변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
=> / hello/data1/data2
4. 경로 변수 + 쿼리 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
=> /hello/data1?param2=data2
/hello : 절대 경로 hello : 상대 경로String a = "Hello"
int a = 10 * 20 <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
<li>'hello world!' = <span th:text="'hello world!'"></span></li>
<li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
<li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li> <ul>
<li>10 + 2 = <span th:text="10 + 2"></span></li>
<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
</ul> <ul>
<li>1 > 10 = <span th:text="1 > 10"></span></li>
<li>1 gt 10 = <span th:text="1 gt 10"></span></li>
<li>1 >= 10 = <span th:text="1 >= 10"></span></li>
<li>1 ge 10 = <span th:text="1 ge 10"></span></li>
<li>1 == 10 = <span th:text="1 == 10"></span></li>
<li>1 != 10 = <span th:text="1 != 10"></span></li>
</ul> <li>조건식
<ul>
<li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?
'짝수':'홀수'"></span></li>
</ul>
</li><ul>
<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가
없습니다.'"></span></li>
<li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?:
'데이터가 없습니다.'"></span></li>
</ul>```
<ul>
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</
span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가
없습니다.</span></li>
</ul>
```| 3. 메시지, 국제화 (0) | 2022.08.08 |
|---|---|
| 1. 타임리프- 기본기능(2) (0) | 2022.08.06 |
npm install --save multer-s3
var aws = require('aws-sdk')
var express = require('express')
var multer = require('multer')
var multerS3 = require('multer-s3')
var app = express()
var s3 = new aws.S3({ /* ... */ })
var upload = multer({
storage: multerS3({
s3: s3,
bucket: 'some-bucket',
metadata: function (req, file, cb) {
cb(null, {fieldName: file.fieldname});
},
key: function (req, file, cb) {
cb(null, Date.now().toString())
}
})
})
app.post('/upload', upload.array('photos', 3), function(req, res, next) {
res.send('Successfully uploaded ' + req.files.length + ' files!')
})| size | 파일 크기(바이트) | |
| bucket | 파일을 저장하는 데 사용되는 버킷 | S3Storage |
| key | 파일 이름 | S3Storage |
| acl | 파일에 대한 액세스 제어 | S3Storage |
| contentType | mimetype파일 업로드에 사용 | S3Storage |
| metadata | S3 metadata로 보낼 객체 | S3Storage |
| location | url파일에 액세스하는 S3 | S3Storage |
| etag | etagS3에 업로드된 파일 의 | S3Storage |
| contentDisposition | contentDisposition파일 업로드에 사용 | S3Storage |
| storageClass | storageClassS3에 업로드된 파일에 사용 | S3Storage |
| versionId | 버전 이 versionId지정된 버킷에 대해 S3에서 반환하는 선택적 매개변수입니다. | S3Storage |
| contentEncoding | contentEncoding파일 업로드에 사용 | S3Storage |