티스토리

Harry's Tech Blog

검색하기

블로그 홈

Harry's Tech Blog

choiyeonho903.tistory.com/m

걸어가는 신사 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Thymeleaf] 라디오 버튼, 셀렉트 박스 라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 1. EnumType을 활용한 라디오 버튼 public enum ItemType { BOOK("도서"), FODD("음식"), ETC("기타"); private final String description; ItemType(String description) { this.description = description; } public String getDescription() { return description; } } //Controller @ModelAttribute("itemTypes") public ItemType[] itemTypes() { return ItemType.values(); } ItemType.values()를 사.. 공감수 0 댓글수 0 2022. 1. 28.
[Thymeleaf] 체크박스 1. 단일 체크 박스 (1) 순수 HTML 체크 박스 판매 오픈 //Controller 로깅 FormItemController : item.open=true //체크 박스를 선택하는 경우 FormItemController : item.open=null //체크 박스를 선택하지 않는 경우 체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. (브라우저에서 확인 가능) 스프링은 on이라는 문제를 true 타입으로 변환해준다. 스프링 타입 컨버터가 이 기능을 수행 * 주의 HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open이라는 필드 자체가 서버로 전송되지 않는다. Controller에서 로그를 찍어보면 체크를 하지 않았을 때 null로 값이 넘어간다. 수정의 경우에는 상.. 공감수 0 댓글수 0 2022. 1. 28.
[Thymeleaf] 입력 Form 처리 타임리프가 제공하는 입력 폼 기능들을 알아보자 1. th:object 커맨드 객체를 지정한다. 2. *{...} (선택 변수 식) th:object에서 선택한 객체에 접근한다. 3. th:field HTML 태그의 id, name, value 속성을 자동으로 처리해준다. (렌더링 전) (렌더링 후) Example th:object를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 Controller에서 데이터가 비어있는 빈 오브젝트를 만들어서 View로 전달한다. //Controller model.addAttribute("items", items); 상품명 가격 수량 th:obejct="${item}" 태그에서 사용할 객체를 지정한다. 태그 안에서 선택 변수 식 *{...}을 .. 공감수 0 댓글수 0 2022. 1. 26.
[Thymeleaf] 템플릿 조각, 레이아웃 웹 페이지를 개발할 때 공통 영역이 많이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경 시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. 1. 템플릿 조각 템플릿 조각은 일부 코드 조각을 가지고 와서 사용한다. th:fragment 다른 곳에 포함되는 코드 조각이다. 푸터 자리 입니다. 파라미터 자리 입니다. (1) 부분 포함 insert th:insert를 사용하면 현재 태크 div 내부에 추가한다. 푸터 자리 입니다. template/fragment/footer :: copy => template/fragment/footer.html 템플릿에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로.. 공감수 1 댓글수 0 2022. 1. 26.
[Thymeleaf] 자바스크립트 인라인 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아 있다. 타임리프 입장에서는 정확하게 렌더링 한 것이지만 기대한 값은 "userA"라는 문자이다. 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다. 숫자 age의 경우에는 "가 필요 없기 때문에 정상 렌더링 된다. 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다. 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리를 해준다. " => \" (2) 자바스크립트 내추럴 템플릿 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 주석을 활용해서 이 기능.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 주석, 블록 (th:block) 1. 주석 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다. HTML 주석을 포함해서 타임리프가 제공하는 2가지 주석이 더 있다. Example //Controller model.addAttribute("data", "Spring!"); (1) 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 1. 표준 HTML 주석 브라우저로 확인하면 보이지 않는다. 하지만 소스보기를 통해 주석 처리되었는지 확인할 수 있다. (2) 타임리프 파서 주석 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링 시에 주석 부분을 제거한다. html data 브라우저로 확인하면 보이지 않는다. 소스보기를 통해 확인하여도 코드 자.. 공감수 1 댓글수 0 2022. 1. 25.
[Thymeleaf] 조건 (if, unless, switch) 타임리프의 조건식 if, unless (if의 반대), switch Example /Controller 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. if th:if 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링 하지 않는다. if 조건이 false 인 경우 span 태그가 사라진다. 2. unless (= if not) th:unless 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다. unless 조건이 false 인 경우 sp.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 반복 (th:each) 타임리프에서 반복은 th:each를 사용한다. //Controller 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. 반복 기능 username 0 반복 시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행한다. th:each는 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다. Map에서도 사용할 수 있는데 이 경우 변수에 담기는 값.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 속성값 설정 타임리프 태그 속성값 설정 (Attribute) 타임리프는 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. 1. 속성 설정 th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다. 2. 속성 추가 (1) th:attrappend 속성 값의 뒤에 값을 추가한다. (2) th:attrprepend 속성 값의 앞에 값을 추가한다. (3) th: classappend class 속성에 추가한다. 3. checked 처리 (1) HTML에서의 checked HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked라는 속성만 있어도 체크가 된다. checked="false가 되어있어도 브라우저로 확인해보면 체크박스에 체크가 되어 있는 것을 확인할 .. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] URL 링크 URL 링크 타임리프에서 URL을 생성할 때 사용하는 문법 URL 링크: @{...} Example //Controller @GetMapping("/link") public String link(Model model) { model.addAttribute("param1", "data1"); model.addAttribute("param2", "data2"); return "basic/link"; } 1. 단순한 URL basic url /hello 2. 쿼리 파라미터 hello query param /hello?param1=data1&param2=data2 3. 경로 변수 path variable /hello/data1/data2 4. 경로 변수 + 쿼리 파라미터 path variable + query .. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 객체 1. 기본 객체 HttpServletRequest, HttpServletResponse 등의 객체를 Model에 담아서 View로 넘겨야 한다. 하지만 자주 쓰는 객체들을 타임리프에서는 기본 객체들로 제공한다. //Controller session.setAttribute("sessionData", "Hello Session"); @Component("helloBean") static class HelloBean { public String hello(String data) { return "Hello " + data; } } (1) 기본 객체 Thymeleaf은 5가지의 기본 객체를 제공한다. ${#request} ${#response} ${#session} ${#servletContext} ${#loc.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 변수, 리터럴, 연산 1. 변수 - SpringEL (Spring Expression Language) 타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 변수 표현식 : ${...} //Controller 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.addAttribute("user", userA); model.addAttribute("users", list); model.addAt.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 텍스트 (text) 1. text 텍스트를 출력하는 기능 HTML의 컨텐츠(content)에 데이터를 출력할 때는 th:text를 사용한다. Example model.addAttribute("data", "Hello Spring!"); (1) th:text 사용 (2) [[..]] 사용 HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶다면 [[...]]를 사용한다. [[${data}]] th:text, [[...]]는 둘 다 기본적으로 Escape를 제공한다. * 이스케이프 (Escape) 특수 문자를 HTML로 변환하는 행위 HTML 문서는 같은 특수 문자를 기반으로 정의된다. 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한.. 공감수 0 댓글수 0 2022. 1. 25.
[Thymeleaf] 타임리프란? '뷰 템플릿 엔진'으로 벡엔드 쪽에서 클라이언트에게 응답할 브라우저 화면을 만들어 주는 역할을 한다. 1. 타임리프 특징 (1) 서버 사이드 HTML 렌더링 (SSR) 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다. (2) 내추럴 템플릿(Natural Templates) 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다. 타임리프 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. HTML을 그래로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 내추럴 템플릿(natural templates)이라 한다. (3) 스프링 통합 지원 타임리프는 .. 공감수 0 댓글수 0 2022. 1. 24.

반응형

문의안내

티스토리
로그인
고객센터

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