템플릿 엔진 마스터하기
시작하기 전에
이 게시물은 위 책의 내용을 읽고 정리하며 제가 쓴 글입니다.
따라서 책에 포함되지 않은 내용이나, 책에는 나와있지만 제 글에는 없는 내용이 있을 수 있습니다.
타임리프 마스터하기
템플릿을 사용하여 View를 좀 더 편하고(?),그럴싸하게 만들 수 있도록 도구들을 알려주는 단원이다.
다양한 템플릿
타임리프
th:내용형식으로 속성을 HTML태그에 추가하여 값이나 처리를 심는다.
자체 태그를 사용하지 않기 때문에 HTML편니기와도 궁합이 좋다.
JSP
클라우드를 통해 앱을 배포할 경우 JAR파일을 이용하기 때문에 JSP사용을 했을 때 다양한 제약이 따른다.
JSP의 경우 자바 서버를 실행시키고 거깅 WAR 파일을 업로드 하는 방식으로 사용해야 제약없이 작동시킬 수 있다.
프리마커
텍스트를 표시할 위치에 직접 ${}를 넣어 표기하며 HTML 태그와 같은 <#내용>형식의 태그를 사용한다.
그러나, 같은 형식의 태그를 사용하기 때문에 HTML의 구조에 영향을 줄 가능성이 있다.
그루비
HTML과는 전혀 다른 코드 체계를 가지고있다.
코드로 화면 전체를 작성하는 것이 가능하며,
JVM에서 동작하는 스크립트 언어지만 웹 페이지 템플릿으로도 사용 가능하다.
다른 JVM스크립트와는 달리 자바 코드에서 아무런 추가작업 없이 불러쓸 수 있으며
JVM의 런타임 최적화 기능 등도 사용 가능하며 자바 개발자를 위한 스크립트 언어라고 보는 사람들도 있다.
벨로시티와 머스타시
벨로시티
$ 또는 # 같은 특수 문자로 변수 등을 HTML 코드 내에 직접 작성하는 것도 가능하다.
태그 없이 구문 작성이 가능하여 비주얼 편집기 등에서의 영향이 적다.
머스타시
다양한 언어에 적용 가능하다.
기호를 사용해서 변수 등을 HTML 코드 내에 기술한다.
타임리프의 기본 사용법
기본은 값을 출력하는 것이며 이를 $의 형식으로 작성한다.
이 형식은 변수식이라고 칭한다.
유틸리티 객체
원래 타임리프에서는 자바에서 작성할 수 있는 간단한 식들을 모두 ONGL로 작성 가능하다.
하지만, 클래스를 모두 변수로 준비하는 과정은 번거롭기 때문에 자주 사용하는 클래스를 ` # 이름`이라는 상수로 정의해서 변수식 안에서 직접 사용할 수 있또록 유틸리티 객체를 제공한다.
그러나 아주 약간 형식이 다른데 여기 이 예제 코드를 보면 쉽게 알 수 있을 것이다.
<p th:text="${new java.util.Date().toString()}"></p>
이것이 우리가 앞장에서 사용하던 방식이고
<p th:text="${#dates.format(new java.util.Date(),'dd/MMM/yyyy HH:mm')}"></p>
<p th:text="${#strings.toUpperCase('String Test.')}"></p>
이것이 새로 배운 방식이다.
매개변수에 접근하기
parm변수를 사용하면 컨트롤러를 통하지 않고 템플릿 내에서 직접 매개변수를 사용하는 것도 가능하다.
보통 배열의 형태로 되어있는 상태로 값을 추출하는 경우가 많다.
하필 배열로 추출하는 이유는 같은 이름의 값을 여러 개 전송해야한다는 복잡한 경우를 위해서이다.
https://park-yina.github.io/categories/book/WindowsSystemProgramming/chapter4 이런 복잡한 링크에 대한 작업을 처리할 때 편하게 처리 가능하다.
메시지식
프로젝트에 미리 준비해둔 프로퍼티 파일에서 값을 가져와 표시하는 방식이다.
형태는 ` #{값지정}`이며, 대괄호 중괄호 안에는 추출할 값을 지정해준다.
플퍼티 값을 프로퍼티 파일을 만든 뒤 작성하고 불러들이는 방식으로 사용하면 된다.
왜 써야할까
값을 템플릿에서 분리할 수 있다.
Kotlin을 배우면서 한번즈음 들어보았을 내용 중 하나가 하드코딩을 지양하라는 것이었을 거다.
대충 설명하자면 유지보수 측면에서 유리하고 파일관리에도 편하다는 등의 장점이 있기 때문에 그런 이야기를 하는 것인데, 값을 템플릿에서 분리나느 것 역시 마찬가지이다.
또한 사용자 환경에 따라 자동으로 현지화가 가능하다는 장점이 있다.
링크식과 href
` @{주소}`의 형태로 사용하며 기본적으로 URL을 지정하는 속성에서 사용한다.
변수 등을 조합해서 만드는 복잡한 링크의 경우 사람이 직접 손으로 타이핑하는 것보다는 이 기능을 사용하는 것이 좋다.
선택 객체의 변수식
숫자나 텍스트는 우리가 아까 말한 것처럼 단순하게 표시해내면 된다.
그러나 객체를 출력하는 일은 좀 더 복잡할 수 있다. 하나하나 메서드나 프로퍼티를 지정하기에는
그 객체 안에 다수의 값이 존재할 수 있기 때문이다.
또한 수정할 일이 생긴다면 다시 하나하나 이름을 변경해야해서 유지보수 측면에서도 ` ${객체명.프로퍼티}를 쓰는 것은 좋지 않다.<br>
이런 경우 별표를 사용하는 형태의 변수식으로 내용을 수정할 수 있다.<br>
책에서는 위 내용과 table태그를 사용하여 간단한 표를 만들어준다.<br>
참고로 minimal-mistakes테마의 게시물을 작성하면서 나는 표 만드는 법을 몰라서 한참 헤맨 적이 있었다.<br>
은근히 알아두면 유용한 기능이기 때문에 table태그와 tr그리고 td`가 어떤 역할을 하는지 찾아보고 어떻게 표를 만드는지에 대해 한번쯤 찾아보는 것이 좋을 것 같다.
리터럴 치환
만약 문자들의 조합이 필요한 경우 지금까지는 +를 사용하였다.
이 방법 이외에 |텍스트 내용|을 사용하는 방법이 있는데, 이것이 독특한 이유는 이 안에 텍스트 내용 뿐 아니라 변수식을 직접 기술할 수 있다는 특징이 있다.
참고로 책에 나온 예시는 |my name is *{name}|이렇게 써있는데, ${name}으로 쓰니 null이 떴었다.
html코드 출력하기
간단한 방법으로는 th:text를 th:utext로 변경하면 된다.
text는 기본적으로 html을 태그를 이스케이프 해주기 때문에 위와 같은 방법을 써야한다.
하지만, 사용자 전송 정보를 바탕으로 텍스트를 생성하는 경우 xss공격같은 보안상 문제가 생길 수 있다.
댓글남기기