BackEnd/Thymeleaf18 [Thymeleaf] 체크 박스 - 멀티 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 멀티 체크 박스 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 우선 모델에 데이터를 담는 컨트롤러를 확인해 봅시다. @ModelAttribute("regions") public Map regions(Model model) { Map regions = new LinkedHashMap(); regions.put("SEOUL", "서울"); regions.put("BUSAN", "부산"); regions.put("JEJU", "제주"); model.addAttribute("regions", regions); return regions; .. BackEnd/Thymeleaf 2022. 1. 30. [Thymeleaf] 체크 박스 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 체크 박스 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 이번시간에는 체크박스의 문제점에 대하여 알아본 후, 이걸 Spring MVC 의 기능을 통해 수정해보고, 마지막으로 타임리프로 수정해볼것 이다. 우선 다음과 같은 컨트롤러와 체크박스가 있다고 해보자. @GetMapping("/add") public String addForm(Model model) { model.addAttribute("item", new Item()); return "form/addForm"; } 그냥 등록 Form을 보여주기 위한 컨트롤러 입니다. ● 단순.. BackEnd/Thymeleaf 2022. 1. 30. [Thymeleaf] 입력 폼 처리 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 입력 폼 처리 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 타임리프가 제공하는 입력 폼 기능을 적용하면, 기존 프로젝트의 폼 코드를 효율적으로 개선할수가 있다. 우선 수정할 기존 코드를 확인해 봅시다. 삼품을 수정하는 수정 Form에 해당합니다. 상품 수정 폼 상품 ID 상품명 가격 수량 저장 취소 이중 대표적으로 상품 ID 를 살펴봅시다. 나머지도 같은 원리로 변경됩니다. 상품 ID 기존의 코드에는 id, name이 같은 값으로 중복되고 있으며, value도 직접 타이핑 하여 지정해주고 있습니다. 이러한 과정을 한번에 처리하는 .. BackEnd/Thymeleaf 2022. 1. 30. [Thymeleaf] 레이아웃 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 레이아웃 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 이전 템플릿 조각에서는 코드 조각을 갖고와서 내가 원하는 부분에 추가하는 방식 이였다면 (내 코드 공통 부분) 예를 들어서 layoutMain(내 코드) 메인 컨텐츠 결과는 다음과 같습니다. 우선 http://localhost:8080/template/layout 에 접속하면 컨트롤러가 작동하여 "template/layout/layoutMain" 의 뷰로 이동하게 된다. layoutMain 에서는 로 인하여 head 부분을replace하기위해 공통부분인 base를 끌어온다. 이.. BackEnd/Thymeleaf 2022. 1. 30. [Thymeleaf] 템플릿 조각 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 템플릿 조각 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 웹페이지를 개발할때는 공통된 부분이 많다. 상단의 네비게이션 바, 하단의 저작권 표시 부분등 어느 페이지에 가던 공통적으로 처리되는 부분이 있다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. 우선 이번 글을 결과물을 살펴봐야 이해가 가기 때문에 컨트롤러와 뷰 코드부터 먼저 살펴봅시다. @Controller @RequestMapping("/template") public class TemplateController { @GetMapping(".. BackEnd/Thymeleaf 2022. 1. 29. [Thymeleaf] 자바스크립트 인라인 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 자바스크립트 인라인 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다. 자바스크립트 인라인 기능은 다음과 같이 적용하면 된다. 결과는 다음과 같습니다. ● 텍스트 렌더링 결과 창에서 F12 를 눌러 개발자도구를 열어보면 다음과 같은 경고를 확인할 수 있습니다. UserA가 정의되지 않았다는 경고를 보여주고 있습니다. 이는 var username = UserA; 부분에서 오류가 있기 때문입니다. 문법이 오류이기 때문이죠! var userna.. BackEnd/Thymeleaf 2022. 1. 28. [Thymeleaf] 블록 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 블록 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 블록은 HTML 태그가 아닌, 타임리프의 유일한 자체 태그이다. 블록은 each 문에서의 불편한점을 보완하는데, 어떤 부분을 보완하는지는 다음 코드를 살펴보자. 컨트롤러와 뷰 코드는 다음과 같다. @GetMapping("/block") public String block(Model model){ List list = new ArrayList(); list.add(new User("UserA", 10)); list.add(new User("UserB", 20)); list.add(n.. BackEnd/Thymeleaf 2022. 1. 28. [Thymeleaf] 주석 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 주석 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 원래 주석은 너무 간단한 내용이라 정리하지 않으려다가... 또 타임리프 주석중에 신박한 주석이 있어 이를 위해 글을 작성한다. 간단한 컨트롤러와 뷰 코드를 작성해보자! @GetMapping("/comments") public String comments(Model model){ model.addAttribute("data", "zbqmgldjfh"); return "basic/comments"; } 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html .. BackEnd/Thymeleaf 2022. 1. 28. [Thymeleaf] 조건부 평가 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 조건부 평가 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 조건부 평가는 말 그대로 if 문과 같이 어떤 문장이 참일경우 실행하는 것 이다. if, unless(if의 반대) 2가지 가 있다. 간단한 컨트롤러는 다음과 같다. @GetMapping("/condition") public String condition(Model model){ List list = new ArrayList(); list.add(new User("UserA", 10)); list.add(new User("UserB", 20)); list.add(new Us.. BackEnd/Thymeleaf 2022. 1. 27. [Thymeleaf] 반복 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 반복 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. 우선 컨트롤러에서 여러 User의 정보를 담아서 model로 반환해 봅시다. @GetMapping("/each") public String each(Model model){ List list = new ArrayList(); list.add(new User("UserA", 10)); list.add(new User("UserB", 20)); list.add(new User(".. BackEnd/Thymeleaf 2022. 1. 27. [Thymeleaf] 속성 값 설정 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 속성 값 설정 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 타임리프에서 속성값을 지정할때는 th:* 와 같이 속성을 적용하면 기존 속성을 대체한다. 만약 기존 속성이 없다면 새로 만든다. 우선 컨트롤러부터 하나 만들어 봅시다. @GetMapping("/attribute") public String attribute() { return "basic/attribute"; } 아주 간단한 컨트롤러 입니다. 이제 이를 처리할 뷰는 다음과 같습니다. 속성 설정 속성 추가 - th:attrappend = - th:attrprepend = -.. BackEnd/Thymeleaf 2022. 1. 27. [Thymeleaf] 연산 인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다. 연산 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 연산은 HTML의 엔티티를 사용하는 부분만 주의하면 됩니다. 이번 연산 글은 우선 코드로 살펴본후 설명을 이어 나가겠습니다. 우선 다음 컨트롤러를 확인해 봅시다. @GetMapping("/operation") public String operation(Model model) { model.addAttribute("nullData", null); model.addAttribute("data", "zbqmgldjfh"); return "basic/operation"; } 이를 처리하는.. BackEnd/Thymeleaf 2022. 1. 26. 이전 1 2 다음
