개발자되기 프로젝트

1. Thymeleaf 매뉴얼 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 2. Spring 통합으로 추가되는 기능 스프링의 SpringEL 문법 통합 SpringEL 표현식 ~~.username : 프로퍼티 접근 -> user.getUsername() ~~['username'] -> user.getUsername() ~~.getUsername() -> -> getUsername() 직접 호출. ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원 편리한 폼 관리를 위..

template layout 개념을 레이아웃 H1 레이아웃 컨텐츠 레이아웃 푸터 2. layoutExtendMain html 자체를 th:replace함. 뭐로? 위의 layoutFile로. 이 때 title, section 태그를 넘겨줌. 메인 페이지 컨텐츠 메인 페이지 포함 내용 3. 결과 레이아웃 H1 메인 페이지 컨텐츠 메인 페이지 포함 내용 레이아웃 푸터 4. GitHub : 210919 layout 2 GitHub - bsh6463/Thymeleaf Contribute to bsh6463/Thymeleaf development by creating an account on GitHub. github.com

fragment는 코드 조각을 가지고 와서 사용했다. 이번에는 코드 조각을 layout에 넘겨서 사용해보자. 예를 들어서 메인 컨텐츠 3. base.html layoutMain에서 title 태그와 link태그가 넘어온다. 레이아웃 타이틀로 넘어온 title 태그로 replace. link의 경우 th:block으로 지정했다. 넘어온 link tag를 가지고 th:block을 대체한다. 4. 결과 메인 컨텐츠 5. GitHub : 210919 layout 1 GitHub - bsh6463/Thymeleaf Contribute to bsh6463/Thymeleaf development by creating an account on GitHub. github.com

웹 페이지를 개발할 때는 공통 영역이 많음 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다. 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다. 주의! 템플릿 조각과 레이아웃 부분은 직접 실행해보아야 이해된다. 1. footer.html th:fragment="name"을통해 name 지정 가능. 푸터 자리 입니다. 파라미터 자리 입니다. 2. fragment.html fragment insert 하는 방법(html 추가) insert 지정한 에 끼워넣기 th:insert="~{경로 :: 이름}" th:insert="~{..

1. JAVA Script Inline Thymeleaf는 Javascript에서 Thymeleaf를 편리하게 사용할 수 있도록 해당 기능을 제공 4. javascript inline 적용 전 text var username = [[${user.username}]];​ text의 경우 "[[${user.username}]]"로 JavaScript에 전달되어야 함.. 랜더링 후 : 흠.."UserA"로 넘어가지 않아서 에러.. var username = UserA; Javascript natural template //자바스크립트 내추럴 템플릿 var username2 = /*[[${user.username}]]*/ "test username"; 자바스크립트는 "test username" 부분을 랜더링 후..

1. Thymeleaf자체 태그 예를 들어 를 여러 개 묶어서 루프 돌리고 싶을 때 사용하면 좋음. 해당 tag를 사용해서 여거 div을 하나의 block으로 묶을 수 있음. 2. controller @GetMapping("/block") public String block(Model model){ addUsers(model); return "basic/block"; } 3. block.html 사용자 이름1 사용자 나이1 요약 4. GitHub : 210919 Block GitHub - bsh6463/Thymeleaf Contribute to bsh6463/Thymeleaf development by creating an account on GitHub. github.com

1. 표준 HTML 주석 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다. 랜더링 결과 1. 표준 HTML 주석 Thymeleaf는 HTML주석을 제거하지 않음. 그대로 남겨둠. 2. 타임리프 파서 주석 렌더링에서 주석 부분을 제거 주석 내용 html data 래더링 결과 2. 타임리프 파서 주석 Thymeleaf는 파서 주석을 랜더링 시 삭제함. 3. 타임리프 프로토타입 주석 HTML 주석에 약간의 구문을 더했다. HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링하지 않는다. 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다. 쉽게 이야기해서 HTML 파일을 그대로 열어보면 주석처리가 되지만, 타임리프를 렌더링..

1. Thymeleaf의 조건식 if unless ( if 의 반대) 2. if, unless 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다. 만약 다음 조건이 false 인 경우 ... 부분 자체가 렌더링 되지 않고 사라진다. user.age가 10인경우 if문이 true -> th:text="미성년자" 랜더링됨. 3. switch * 은 만족하는 조건이 없을 때 사용하는 디폴트 값. 10살 20살 기타 4. Controller @GetMapping("/condition") public String condition(Model model){ addUsers(model); return "basic/condition"; } 5. condition.html if, unless count ..