티스토리

욕심쟁이 개발자의 집

검색하기

블로그 홈

욕심쟁이 개발자의 집

greedy-be.tistory.com/m

Test

구독자: 3

방명록 방문하기

주요 글 목록

[Thymeleaf] 입력 폼 처리 기존의 순수 HTML로 이루어져 있던 프로젝트에 타임리프가 제공하는 입력 폼 기능을 적용한다. (재고 등록 및 수정 폼) 해당 프로젝트의 초기 설정은 다음과 같다. 2023.03.10 - [Spring] - 초기 프로젝트 설정 (재고 관리 서비스) th:object : 커맨드 객체 지정 *{ . . . } : 선택 변수 식, th:object 에서 선택한 객체에 접근 th:field : HTML 태그의 id, name, value 속성을 자동으로 처리 ex) th:field 렌더링 전 - 렌더링 후 - 등록 Form th:object 적용을 위해 먼저 해당 오브젝트 정보를 넘겨주어야 함 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트 item을 만들어 뷰에 전달 등록 Controller @GetMapp.. 공감수 0 댓글수 0 2023. 3. 10.
[Thymeleaf] 타임리프 스프링 통합 타임리프는 스프링을 사용하지 않는 환경에서도 활용 가능하지만, 스프링과 통합하여 사용하면 좀 더 생산성 있는 개발을 할 수 있는 여러 기능을 제공한다. 스프링 통합으로 추가되는 기능들 스프링 SpringEL 문법 통합 스프링 검증, 오류 처리 통합 스프링 변환 서비스 통합 스프링 메시지, 국제화 기능의 편리한 통합 ${@myBean.doSomething()} 과 같은 스프링 빈 호출 지원 편린한 폼 관리를 위한 추가 속성 - th:object : 기능 강화, 폼 커맨드 객체 선택 - th:field, th:errors, th:errorclass 등 폼 컴포넌트 기능 - checkbox, radio button, List 등을 편리하게 사용 타임리프 사용을 위한 설정 - 타임리프를 스프링에 적용하기 위해서.. 공감수 0 댓글수 0 2023. 3. 10.
[Thymeleaf] 템플릿 레이아웃 템플릿 레이아웃은 기존의 템플릿 조각에서 코드의 일부 조각을 가져와 사용했던 것을 확장하여, 레이아웃에 넘겨 사용하는 것이다. 그중 하나의 예로 Main.HTML 결과 th:replace="template/layout/base :: common_header(~{::title},~{::link}) ~{::title} : 현재 페이지의 태그 전달 ~{::link} : 현재 페이지의 태그 전달 ※ 결과 - 공통 파트의 유지 - 추가 파트에 layout.html에서 전달된 태그들이 전달되어 추가 2. 전체 Controller @GetMapping("/layoutExtend") public String layoutExtends() { return "template/layoutExtend/layoutExtendMa.. 공감수 0 댓글수 0 2023. 3. 9.
[Thymeleaf] 템플릿 조각 웹 페이지 개발 시, 상하단 영역이나 좌측 카테고리 등 여러 페이지에 걸쳐 함께 사용하는 공통 영역이 많이 있다. 이러한 부분들을 하나씩 코드를 복사하여 개발한다면, 향후 수정 시에 각 페이지마다 수정하는 시간 소모를 필요로 한다. 이것은 상당히 비효율적이며, 해당 문제를 해결하기 위해 타임리프의 템플릿 조각과 레이아웃 기능 사용한다. Controller @Controller @RequestMapping("/template") public class TemplateController { @GetMapping("/fragment") public String template() { return "template/fragment/fragmentMain"; } } Footer 푸터 자리 입니다. 파라미터 자리 .. 공감수 0 댓글수 0 2023. 2. 1.
[Thymeleaf] 자바스크립트 인라인 자바스크립트에서 타임리프 사용을 위해, 다음과 같은 자바스크립트 인라인 기능을 활용 1. 결과 (자바스크립트 인라인 사용 전) 2. HTML (자바스크립트 인라인 사용 후) 2. 결과 (자바스크립트 인라인 사용 후) 텍스트 렌더링 var username = [ [ ${user.username} ] ]; → 인라인 사용 전 : var uesrname = userA; → 인라인 사용 후 : var username = "userA"; 인라인 사용 전의 경우 userA 라는 변수 명이 그대로 남음 타임리프 입장에서는 정확하게 렌더링이 진행된 것이 맞음 여기서 인라인을 사용하여 기존의 변수 명에 " ... " 을 포함하여 문자로 변환 해당 과정에서 문제가 야기될만한 특수 문자가 있다면, 이스케이프 처리를 추가로 .. 공감수 0 댓글수 0 2023. 1. 31.
[Thymeleaf] 블록 HTML 태그가 아닌, 타임리프의 유일한 자체 태그 'th:block' Controller @GetMapping("/block") public String block(Model model) { addUsers(model); return "basic/block"; } HTML 사용자 이름1 사용자 나이1 요약 결과 사용자 이름1 userA 사용자 나이1 10 요약 userA / 10 사용자 이름1 userB 사용자 나이1 20 요약 userB / 20 사용자 이름1 userC 사용자 나이1 30 요약 userC / 30 블록 HTML 태그 속에 기능을 정의하여 사용하는 타임리프의 특성상, 다음과 같은 일부 상황에 맞게 사용하기 용이 은 렌더링 시 제거 공감수 0 댓글수 0 2023. 1. 30.
[Thymeleaf] 주석 Controller @GetMapping("/comments") public String comments(Model model) { model.addAttribute("data", "Spring!"); return "basic/comments"; } 1. HTML (표준 HTML 주석) 예시 html data 1. 표준 HTML 주석 1. 결과 (표준 HTML 주석) 예시 Spring! 1. 표준 HTML 주석 1. 표준 HTML 주석 타임피르가 렌더링 하지 않고, 그대로 출력 2. HTML (타임리프 파서 주석) 2. 타임리프 파서 주석 html data 2. 결과 (타임리프 파서 주석) 2. 타임리프 파서 주석 2. 타임리프 파서 주석 렌더링에서 주석 부분을 제거 3. HTML (타임리프 프로토타입 .. 공감수 0 댓글수 0 2023. 1. 29.
[Thymeleaf] 조건부 평가 Thymeleaf의 조건식에는 th:if="${...}" 와 그 반대인 th:unless="${...}" 가 있다. th:if = "${ . . . }" th:unless = "${ . . . }" Controller @GetMapping("/condition") public String condition(Model model) { addUsers(model); return "basic/condition"; } 1. .HTML (if, unless) count username age 1 username 0 1. 결과 (if, unless) if, unless 타임리프에서는 주어진 조건이 부합할 시 태그를 렌더링하지 않음 아래와 같이 조건의 결과가 false 인 경우 . . . 부분에 대한 렌더링 진행 X.. 공감수 0 댓글수 0 2023. 1. 1.
[Thymeleaf] 반복 Thymeleaf에서는 th:each 를 통해 반복을 사용하며, 추가로 사용할 수 있는 여러 상태 값을 지원한다. th:each Controller @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); } 1. .HTML (기본 테이블) .. 공감수 0 댓글수 0 2022. 12. 31.
[Thymeleaf] 속성 값 설정 타임리프 태그 속성 (Attribute) 타임리프는 HTML 태그에 th:*="..." 형식을 통해 속성을 지정하는 방식을 사용한다. th: * = " . . . " Controller @GetMapping("/attribute") public String attribute() { return "basic/attribute"; } 1. .HTML (속성 설정) 1. 결과 (속성 설정) → 해당 형식의 속성이 기존에 속성을 대체하며, 기존 속성이 없다면 새로 만들어 적용한다. 2. .HTML (속성 추가) - th:attrappend = - th:attrprepend = - th:classappend = 2. 결과 (속성 추가) - th:attrappend = - th:attrprepend = - th:c.. 공감수 0 댓글수 0 2022. 12. 28.
[Thymeleaf] URL 링크 Thymeleaf에서 URL을 생성하기 위해 @{ . . . } 문법을 사용한다. @{ . . . } Controller @GetMapping("/link") public String link(Model model) { model.addAttribute("param1", "data1"); model.addAttribute("param2", "data2"); return "basic/link"; } . HTML URL 링크 basic url hello query param path variable path variable + query parameter 단순한 URL @{/hello} → .../hello 쿼리 파라미터 @{/hello(param1=${param1}, param2=${param2})} → .. 공감수 0 댓글수 0 2022. 12. 27.
[Thymeleaf] 연산 Thymeleaf의 연산은 자바의 연산과 비슷하다. 하지만 HTML 안에서 사용하기 때문에 HTML 엔티티 사용에 주의해야 한다. Controller @GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "Spring!"); return "basic/operation"; } 1. .HTML (산술 연산) 10 + 2 = 10 % 2 == 0 = 1. 결과 (산술 연산) · 10 + 2 = 12 · 10 % 2 == 0 = true 2. .HTML (비교 연산) 1 > 10 = 1 gt 10 = 1 >= 10 = 1 ge 10 =.. 공감수 0 댓글수 0 2022. 12. 26.
[Thymeleaf] 리터럴 Literal 리터럴 (Literal)은 소스 코드의 고정된 값을 나타내는 표기법을 일컫는 말이다. 예를 들어 아래의 코드에서 문자열 "Thymeleaf" 는 문자 리터럴 , 10, 20 은 숫자 리터럴이다. String s = "Thymeleaf"; int i = 10 * 20; 타임리프 제공 리터럴 문자 : 'hello' 숫자 : 10 불린 : true, false null : null 타임리프 사용 시 문자 리터럴에 대해서는 항상 '(작은 따옴표)로 하나하나 감싸줘야 한다. ex) 하지만 적용 문자열이 공백 없이 이어진다면, 이를 하나의 의미 있는 토큰으로 인지하여 해당 작은 따옴표를 생략하는 것이 가능하다. 룰 : A-Z , a-z , 0-9 , [ ] , . , - , _ ex) // 작은 따옴표 생략 Con.. 공감수 0 댓글수 0 2022. 12. 25.
[Thymeleaf] 유틸리티 객체 및 날짜 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 : .. 공감수 0 댓글수 0 2022. 12. 24.
[Thymeleaf] 기본 객체 및 편의 객체 Thymeleaf가 제공하는 기본 객체 ${#request} ${#response} ${#session} ${#servletContext} ${#locale} 여기서 ${#request}는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터 조회를 위해선 아래와 같이 불편한 접근 방식을 따라야 한다. ex) request.getParameter("data") 이러한 불편함을 해결하기 위한 편의 객체 또한 타임리프는 제공한다. 1. HTTP 요청 파라미터 접근 : param ex) ${param.paramData} 2. HTTP 세션 접근 : session ex) ${session.sessionData} 3. 스프링 빈 접근 : @ ex) ${@helloBean.hello('Spring.. 공감수 0 댓글수 0 2022. 12. 23.
[Thymeleaf] 변수 - SpringEL Thymeleaf는 변수를 표현하기 위해 다음과 같은 변수 표현식을 사용하며, 해당 표현식에는 스프링이 제공하는 스프링 EL을 사용할 수 있다. $ { . . . } 아래의 예제를 통해 SpringEL 다양한 표현식 사용의 몇 가지 예를 소개하고자 한다. User @Data static class User { private String username; private int age; public User(String username, int age) { this.username = username; this.age = age; } } Controller @GetMapping("/variable") public String variable(Model model) { User userA = new User(.. 공감수 0 댓글수 0 2022. 12. 17.
[Thymeleaf] 텍스트 - TEXT, UTEX 타임리프의 동작은 기존 HTML 테그의 속성에 기능을 정의하여 이루어진다. th:text 를 사용하여 HTML 콘텐츠에 데이터를 출력한다. Controller ●●● @Controller @RequestMapping("/basic") public class BasicController { @GetMapping("/text-basic") public String textBasic(Model model) { model.addAttribute("data", "Test Thymeleaf"); return "basic/text-basic"; } } .HTML th:text 사용 컨텐츠 안에서 직접 출력하기 = [[${data}]] 결과 ●●● th:text 사용 Test Thymeleaf 컨텐츠 안에서 직접 출력.. 공감수 1 댓글수 1 2022. 12. 15.
[Thymeleaf] 타임리프 소개 Thymeleaf 란? Thymeleaf는 웹(서블릿 기반) 및 비 웹 환경 모두에서 작동할 수 있는 Java XML/ XHTML/ HTML5 템플릿 엔진이며, 서버 사이드 자바 템플릿 엔진의 한 종류이다. 참고 - 템플릿 엔진이란? 템플릿 엔진은 결과 문서를 생성하기 위해 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합하도록 설계된 소프트웨어이다. 이 중 웹 템플릿 엔진은 특히 웹 문서가 출력되는 템플릿 엔진을 말한다. 즉, 웹 템플릿 엔진은 지정된 템플릿 양식과 데이터가 합쳐져서 HTML 문서를 출력하는 소프트웨어이다. Thymeleaf의 특징 서버 사이드 HTML 렌더링 (SSR) 타임리프의 주요 용도는 Back-End 서버에서 HTML을 동적으로 렌더링하는 것에 있다. 네츄럴 템플릿 타임.. 공감수 1 댓글수 1 2022. 12. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.