'Spring/Thymeleaf' 카테고리의 글 목록

2022. 9. 7. 20:13 Spring/Thymeleaf

● 등록 지역 ● 서울, 부산, 제주 ● 체크 박스로 다중 선택할 수 있다. FormItemController - 추가 @ModelAttribute("regions") public Map regions() { Map regions = new LinkedHashMap(); regions.put("SEOUL", "서울"); regions.put("BUSAN", "부산"); regions.put("JEJU", "제주"); return regions; } @ModelAttribute의 특별한 사용법 등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다. 이렇게 하려면 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데..

Thymeleaf - 체크 박스 - 단일2

2022. 9. 7. 11:35 Spring/Thymeleaf

타임리프 - 체크 박스 코드 추가 판매 여부 판매 오픈 타임리프 체크 박스 HTML 생성 결과 판매 여부 판매 오픈 타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해준다. HTML 생성 결과를 보면 히든 필드 부분이 자동으로 생성되어 있다. 실행 로그 FormItemController : item.open=true //체크 박스를 선택하는 경우 FormItemController : item.open=false //체크 박스를 선택하지 않는 경우 상품 상세에 적용하자. item.html 판매 여부 판매 오픈 주의: item.html 에는 th:object 를 사용하지 않았기 때문에 th:field 부분에 ${item.open} 으로 적어주어야 한다. disabled 를 사용해서 상품 ..

Thymeleaf - 체크 박스 - 단일1

2022. 9. 7. 11:30 Spring/Thymeleaf

● 판매 여부 ● 판매 오픈 여부 ● 체크 박스로 선택할 수 있다. ● 등록 지역 ● 서울, 부산, 제주 ● 체크 박스로 다중 선택할 수 있다. ● 상품 종류 ● 도서, 식품, 기타 ● 라디오 버튼으로 하나만 선택할 수 있다. ● 배송 방식 ● 빠른 배송 ● 일반 배송 ● 느린 배송 ● 셀렉트 박스로 하나만 선택할 수 있다. ItemType - 상품 종류 package hello.itemservice.domain.item; public enum ItemType { BOOK("도서"), FOOD("식품"), ETC("기타"); private final String description; ItemType(String description) { this.description = description; } pu..

Thymeleaf - 입력 폼 처리

2022. 9. 7. 10:20 Spring/Thymeleaf

● th:object : 커맨드 객체를 지정한다. ● *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다. ● th:field ● HTML 태그의 id , name , value 속성을 자동으로 처리해준다. 렌더링 전 렌더링 후 등록 폼 th:object 를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달하자. FormItemController 변경 @GetMapping("/add") public String addForm(Model model) { model.addAttribute("item", new Item());return "form/addForm"; } form/addForm.ht..

Thymeleaf - 템플릿 레이아웃2

2022. 9. 5. 05:32 Spring/Thymeleaf

레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 /resources/templates/template/layoutExtend/layoutExtendMain.html 메인 페이지 컨텐츠 메인 페이지 포함 내용 생성 결과 레이아웃 H1 메인 페이지 컨텐츠 메인 페이지 포함 내용 레이아웃 푸터 layoutFile.html 을 보면 기본 레이아웃을 가지고 있는데, 에 th:fragment 속성이 정의되어 있다. 이 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분부분 변경하는 것으로 이해하면 된다. layoutExtendMain.html 는 현재 페이지인데, 자체를 th:replace 를 사용해서 변경하는 것을 확인할 수 있다. 결국 layoutFile.html 에 필요한 내용을 전달하면서 자체를 ..

Thymeleaf - 템플릿 레이아웃1

2022. 9. 4. 12:20 Spring/Thymeleaf

이전에는 일부 코드 조각을 가지고와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해서 알아보자. 예를 들어서 /resources/templates/template/layout/layoutMain.html 메인 컨텐츠 결과 메인 컨텐츠 ● common_header(~{::title},~{::link}) 이 부분이 핵심이다. ● ::title 은 현재 페이지의 title 태그들을 전달한다. ● ::link 는 현재 페이지의 link 태그들을 전달한다. 결과를 보자. ● 메인 타이틀이 전달한 부분으로 교체되었다. ● 공통 부분은 그대로 유지되고, 추가 부분에 전달한 들이 포함된 것을 확인할 수 있다. 이 방식은 사실 앞서 배운 코드 조각을 조금 더 적극적으로 사용..

Thymeleaf - 템플릿 조각

2022. 9. 4. 11:58 Spring/Thymeleaf

웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. package hello.thymeleaf.basic; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @Contr..

Thymeleaf - 자바스크립트 인라인

2022. 9. 4. 11:27 Spring/Thymeleaf

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 자바스크립트 인라인 기능은 다음과 같이 적용하면 된다. 자바스크립트 인라인 사용 전 - 결과 자바스크립트 인라인 사용 후 - 결과 자바스크립트 인라인 사용 후 자바스크립트 인라인을 사용하지 않은 경우 어떤 문제들이 있는지 알아보고, 인라인을 사용하면 해당 문제들이 어떻게 해결되는지 확인해보자. 텍스트 렌더링 ● var username = [[${user.username}]]; ● 인라인 사용 전 ▶ var username = userA; ● 인라인 사용 후 ▶ var username = "userA"; ● 인라인 사용 전 렌더링 결과를 보면 userA 라는 변수 이름이 그대로 남아있다. 타임리프 입장에서는..

Thymeleaf - 블록

2022. 9. 4. 11:08 Spring/Thymeleaf

은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다. BasicController 추가 @GetMapping("/block") public String block(Model model) { addUsers(model); return "basic/block"; } /resources/templates/basic/block.html 사용자 이름1 사용자 나이1 요약 실행 결과 사용자 이름1 userA 사용자 나이1 10 요약 userA / 10 사용자 이름1 userB 사용자 나이1 20 요약 userB / 20 사용자 이름1 userC 사용자 나이1 30 요약 userC / 30 타임리프의 특성상 HTML 태그안에 속성으로 기능을 정의해서 사용하는데, 위 예처럼 이렇게 사용하기 애매한 경우에 사용하면 ..

Thymeleaf - 주석

2022. 9. 4. 11:02 Spring/Thymeleaf

BasicController 추가 @GetMapping("/comments") public String comments(Model model) { model.addAttribute("data", "Spring!"); return "basic/comments"; } /resources/templates/basic/comments.html 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html data 3. 타임리프 프로토타입 주석 결과 예시 Spring! 1. 표준 HTML 주석 2. 타임리프 파서 주석 3. 타임리프 프로토타입 주석 Spring! 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 타임리프 파서 주석 타임리프 ..

Thymeleaf - 조건부 평가

2022. 9. 4. 10:35 Spring/Thymeleaf

타임리프의 조건식 if , unless ( if 의 반대) BasicController 추가 @GetMapping("/condition") public String condition(Model model) { addUsers(model); return "basic/condition"; } /resources/templates/basic/condition.html if, unless count username age 1 username 0 switch count username age 1 username 10살 20살 기타 if, unless 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다. 만약 다음 조건이 false 인 경우 ... 부분 자체가 렌더링 되지 않고 사라진다. switch..

Thymeleaf - 반복

2022. 9. 4. 10:28 Spring/Thymeleaf

타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. BasicController 추가 @GetMapping("/each") public String each(Model model) { addUsers(model); return "basic/each"; } private void addUsers(Model model) { List list = new ArrayList(); list.add(new User("userA", 10)); list.add(new User("userB", 20)); list.add(new User("userC", 30)); model.addAttribute("users", list); } /resources/templates/b..

Thymeleaf - 속성 값 설정

2022. 9. 4. 09:17 Spring/Thymeleaf

타임리프 태그 속성(Attribute) 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다. BasicController 추가 @GetMapping("/attribute") public String attribute() { return "basic/attribute"; } /resources/templates/basic/attribute.html 속성 설정 속성 추가 - th:attrappend = - th:attrprepend = - th:classappend = checked 처리 - checked o - checked x - checked=false 속성 설정 th:* 속성을 지정하면 타임리..

Thymeleaf - 연산

2022. 9. 3. 11:52 Spring/Thymeleaf

타임리프 연산은 자바와 크게 다르지 않다. HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하자. BasicController 추가 @GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "Spring!"); return "basic/operation"; } /resources/templates/basic/operation.html 산술 연산 10 + 2 = 10 % 2 == 0 = 비교 연산 1 > 10 = 1 gt 10 = 1 >= 10 = 1 ge 10 = 1 == 10 = 1 != 10 = 조건식 (10..

Thymeleaf - 리터럴

2022. 9. 3. 09:28 Spring/Thymeleaf

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다. 예를 들어서 다음 코드에서 "Hello" 는 문자 리터럴, 10 , 20 는 숫자 리터럴이다. String a = "Hello" int a = 10 * 20 ● 문자: 'hello' ● 숫자: 10 ● 불린: true , false ● null: null 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다. 그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다. 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다. 룰: A-Z , a-z , 0-9 , [] , . , - , _ 오류 문자 리터럴은 원칙상 ' 로 감싸야 한다. 중간에 공백이 있어서 하나의 의미있는 토큰으로도 인식되지 ..

Thymeleaf - URL 링크

2022. 9. 3. 09:06 Spring/Thymeleaf

타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다. BasicController 추가 @GetMapping("/link") public String link(Model model) { model.addAttribute("param1", "data1"); model.addAttribute("param2", "data2"); return "basic/link"; } /resources/templates/basic/link.html URL 링크 basic url hello query param path variable path variable + query parameter 단순한 URL ● @{/hello} /hello 쿼리 파라미터 ● @{/hello(param1=${param1}, pa..

Thymleaf - 반복문, index 사용하기

2022. 9. 2. 14:18 Spring/Thymeleaf

타임리프(Thymeleaf) 템플릿에서는 for문 while 등과 유사한 반복(iteration) 처리를 위해 th:each 를 사용 합니다. 루프 처리 중 상태를 추적하는 데 유용한 메커니즘인 status 변수가 제공되어 index, count 등을 쉽게 얻을 수도 있습니다. 다만 loop를 원천적으로 break를 하거나 반복처리를 하면서 어떤 값을 더해 다른 곳에서 사용하는 것이 불가하는 등 제약사항들이 있지만 우리는 Thymeleaf가 view Template engine이라는걸 명심해야 합니다! JSTL등 에서 처리하듯이 Business logic을 view에 녹이는 것은 지양 해야하며 이런 비즈니스로직이 들어가는 부분은 서버에서 처리한 뒤 view Template 에서는 완성된 데이터를 "보여주..

Thumeleaf - 유틸리티 객체와 날짜

2022. 9. 2. 01:36 Spring/Thymeleaf

타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다. 타임리프 유틸리티 객체들 ● #message : 메시지, 국제화 처리 ● #uris : URI 이스케이프 지원 ● #dates : java.util.Date 서식 지원 ● #calendars : java.util.Calendar 서식 지원 ● #temporals : 자바8 날짜 서식 지원 ● #numbers : 숫자 서식 지원 ● #strings : 문자 관련 편의 기능 ● #objects : 객체 관련 기능 제공 ● #bools : boolean 관련 기능 제공 ● #arrays : 배열 관련 기능 제공 ● #lists , #sets , #maps : 컬렉션 관련 기능 제공 ● #ids : 아이디 처리 관련 ..

Thymeleaf - 기본 객체들

2022. 9. 2. 01:30 Spring/Thymeleaf

타임리프는 기본 객체들을 제공한다. ● ${#request} ● ${#response} ● ${#session} ● ${#servletContext} ● ${#locale} ● HTTP 요청 파라미터 접근: param ● 예) ${param.paramData} ● HTTP 세션 접근: session ● 예) ${session.sessionData} ● 스프링 빈 접근: @ ● 예) ${@helloBean.hello('Spring!')} BasicController 추가 @GetMapping("/basic-objects") public String basicObjects(HttpSession session) { session.setAttribute("sessionData", "Hello Session");..

Thymeleaf - 변수 : SpringEL

2022. 9. 2. 01:18 Spring/Thymeleaf

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 변수 표현식 : ${...} 그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다. BasicController 추가 @GetMapping("/variable") public String variable(Model model) { User userA = new User("userA", 10); User userB = new User("userB", 20); List list = new ArrayList(); list.add(userA); list.add(userB); Map map = new HashMap(); map.put("userA", userA); map.put("userB", userB); model.ad..

티스토리툴바