들어가기 전 🔥
지금 있는 회사는 view 템플릿 엔진으로 thymeleaf 를 사용하고 있기에 간단하게 정리하여 글을 남긴다.
"아니 나는 백엔드 개발자인데 ?" "이거 몰라도 되는 거 아니야?" 🤦♂️
그런 안일한 생각은 하지 말자 물론 회사가 어느 정도 규모냐에 따라 체계적으로 맡은 언어가 명확하게 구분 지어
질 수도 있지만 열에 일곱은아닐 것이다 🥺
이건 내 개인적인 생각이지만 리액트(react.js)나 뷰(vue.js)도 프론트 개발자 또는 퍼블리셔와 원활한 커뮤니케이션을 위해
사이드 프로젝트로 해보는 것을 권장한다. (전에 스타트업에 잠깐 있었을 때 많은 도움이 되었다 특히 퍼블리셔와 소통하는 부분에서 🤪 나는 백엔드 개발자지만 당시 스타트업에 프론트 개발자가 채용 되지 않아 내가 리액트 즉 프론트를 담당하며 백엔드 보조까지 하며 개발2팀 팀장을 하였다 😨.. 아마 일부 스타트업에서 이와 같은 일들이 빈번하게 일어날 텐데 무슨 말로도 위로가 안되겠지만 힘내라고 말해주고 싶다. 열심히 하다보면 알아주는 사람이 있기 마련이다. 이와 같이 말해줄 수 있는 이유는 당시 스타트업 대표가 입사 2개월만에 새 계약서를 제안 했었다. 근데 난 퇴사를 하였다 💀보다 개발에 욕심이 났기 때문이지 별 다른 이유는 없었다.)
그리고 이 글 카테고리를 백엔드에 두는 이유는 타임리프는 사실 프론트 개발자가 다룰 일은 거의 없기도 하고
웹 애플리케이션의 백엔드에서 서버 측의 데이터를 가져와서 동적으로 HTML을 생성하는 데 사용되며 백엔드 프레임워크(예: 스프링 프레임워크)와 같이 사용되어 웹 페이지의 내용을 동적으로 생성하거나 뷰 템플릿을 구성하는 데 주로 활용 되므로 여기 카테고리에 두었다.
그리고 이 글은 타임리프를 사용하면서
내가 필요할 것 같은 것만 공부하여 축약 후 정리한 글이라
꼭 공식문서를 볼 것을 권장한다!!!!!!!!!! 🤭
각설하고 이제 타임리프에 대해 알아보자
타임리프란? 🚧
Thymeleaf는 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리할 수 있는 웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진입니다.
Thymeleaf의 주요 목표는 우아하고 유지 관리가 쉬운 템플릿 생성 방법을 제공하는 것입니다. 이를 달성하기 위해 템플릿이 디자인 프로토타입으로 사용되는 데 영향을 미치지 않는 방식으로 템플릿 파일에 논리를 주입하는 Natural Templates 의 개념을 기반으로 합니다 . 이를 통해 디자인 커뮤니케이션이 향상되고 디자인 팀과 개발 팀 간의 격차가 해소됩니다.
Thymeleaf는 또한 처음부터 웹 표준, 특히 HTML5를 염두에 두고 설계되었기 때문에 필요한 경우 완전히 검증하는 템플릿을 만들 수 있습니다.
출처 : 타임리프 공식 문서(레퍼런스에 공식문서 URL 참고😋)
문법 정리
| 간단한 표현 | ||
| 변수 표현식 | ${...} | 변수 값 또는 객체 속성의 값을 출력 |
| 선택 변수 표현식 | *{...} | 폼 데이터 바인딩을 위해 사용 |
| 링크 URL 표현식 | @{...} | 링크 URL 생성 |
| 조각 표현식 | ~{...} | 조각(템플릿 조각)의 내용을 포함하는 곳에 사용 |
| 리터럴 | ||
| 텍스트 | 'one text' | 문자열 리터럴 |
| 숫자 | 0,34,3.0,12.3 | 정수 또는 부동 소수점 숫자 |
| 불린 | true,false | 논리 값 |
| 널 | null | 널 값 |
| 리터럴 토큰 | one,sometext,main... | 미리 정의된 값 |
| 문자 연산 | ||
| 문자 합치기 | + | 문자열 연결 |
| 리터럴 대체 | | | |The name is ${name}| |
| 산술 연산 | ||
| Binary operators | +, -, *, /, % | 더하기, 빼기, 곱하기, 나누기, 나머지 연산 |
| Minus sign (unary operatior) | - | 단항 마이너스 연산 |
| 불린 연산 | ||
| Binary operators | and, or | 논리 AND, OR 연산 |
| Boolean negation | !, not | 논리 NOT 연산 |
| 비교와 동등 | ||
| 비교 | >, <, >=, <= | 크기 비교 연산 |
| 동등 연산 | ==, != | 동등 비교 연산 |
| 조건 연산 | ||
| If-then | (if) ? (then) | 조건이 참이면 결과값 출력, 그렇지 않으면 무시 |
| If-then-else | (if) ? (then) : (else) | 조건에 따라 두 가지 결과 중 하나 출력 |
| Default | (value) ?: (defaultvalue) | 값이 있으면 출력, 없으면 기본값 출력 |
| 특별한 토큰 | ||
| No-Operation | _ | 아무것도 하지 않음 |
표현식 인라인
서버에서 Model 에 담은 값을 타임리프에서는 아래와 같이 표현 할 수 있다.
1.[[...]]
<p>Hello, [[${name}]]!</p>2. th:text
<p>Hello, <span th:text="${name}">하얀단화</span>!</p>
만일 * HTML 엔티티를 제외 하려면
[(...)] 또는 th:utext 를 사용하면 된다. 사용 방법은 아래와 같다.
* HTML 엔티티 : HTML에서 특정 캐릭터들이 예약되어있기 때문에 표기의 혼란을 막기 위해서 사용하는 것 ex) < 또는 >
1.[(...)]
<p>Hello, [(${name})]!</p>2.th:utext
<p>Hello, <span th:utext="${name}">하얀단화</span>!</p>+@ 자주 사용 되는 태그
th:block
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
//전체 레이아웃
<th:block th:fragment="headerFg">
</th:block>
</body>
</html>- block은 타임리프 표현을 어느 곳에서든 사용할 수 있도록 하는 구문
- 해당 기능은 동적인 처리가 필요할 때 사용되며 주로 layout기능이나 조건부 렌더링 시 사용
th:fragment
<body>
<header th:fragment="headerFg">
<p>개발자는 어디까지 공부해야할까?</p>
</header>
</body>- 웹페이지에 메뉴 탭이나 네비게이션바와 같이 공통으로 반복되는 영역이 존재한다. 이 공통의 역영들을 매 페이지마다 HTML코드를 반복해서 쓰면 굉장히 지저분 해지는데 fragment가 바로 공통 영역을 정의하여 코드를 정리해준다.
- 특히, header와 footer에 삽입하여 조각화 한다. 이렇게 만들어진 조각을 삽입하고자 하는 대상 HTML 파일에서 th:replace"[파일경로 :: 조각 이름]"을 통해 삽입한다.
th:if="${}", th:unless="${}"
<span th:if="${temp} == 바보"></span>
<span th:unless="${temp} == 바보"></span>- if 와 else로 이해하면 된다. 조건이 성립하지 않으면 렌더링 되지 않는다
th:switch, th:case
<th:block th:switch="${userAuth}">
<span th:case="1">관리자</span>
<span th:case="2">사용자</span>
</th:block>- switch case 문과 동일하고 마찬가지로 조건이 성립하지 않으면 렌더링 되지 않는다.
이 외 내용들은 아래 레퍼런스를 보면 타임리프를 사용하는 데 있어서 큰 어려움 없을 것이라고 생각된다.
진행상황
서버에서 받아온 데이터를 통해 동적 HTML 처리 완료
데이터 처리를 위한 구문 숙지
업무 중 이슈/고민 또는 해결 내용
타임리프를 사용하는 데 있어서 큰 고민이나 큰 어려움은 없었던 것 같다. 😴
참고 레퍼런스
https://www.thymeleaf.org/documentation.html
Documentation - Thymeleaf
Articles Quick glimpses into what Thymeleaf can bring to your project. Introductions With Spring Comparisons
www.thymeleaf.org
https://catsbi.oopy.io/32a9458e-f452-4733-b87c-caba75f98e2d
공식 문서 영어라 보기 힘들다면 여기를 추천한다. 타임리프 뿐만 아니라 개발 관련 글이 다양하게 잘 정리되어 있음👍
(출처 : catsbi 님)
1. 타임리프 - 기본 기능
목차
catsbi.oopy.io
글을 읽어주셔서 감사합니다.
잘못된 내용이 있으면 댓글 부탁 드려요.😢