# Template-Engine
Thymeleaf Template Engine
✅ Thymeleaf Template Engine 🌐 Template Engine 👉 라이브러리의 일종으로, HTML의 내용물을 동적으로 변경하는데 주로 사용됨 → 채워져야 하는 부분이 존재하는 HTML을 템플릿으로 활용, 채워야할 데이터를 제공받으면 그 부분에 데이터를 기반으로 채워넣은 뒤, 완성된 HTML을 돌려줌 단순한 HTML이 아닌 Model의 변화에 따라 나타나는 모습이 다르게 보이도록 해줌 🌐 Thymeleaf 👉 서버 사이드 Java 템플릿 엔진으로, HTML, XML, JavaScript, CSS 등의 마크업 문서를 생성하고 렌더링하는 데 사용됨 📌 일반적으로 Spring 프레임워크와 통합되어 많이 사용되며, Spring MVC와 함께 주로 사용되는 템플릿 엔진 중 하나 1. Thymeleaf 설정하기 🚧 start.spring.io를 이용한다면 Dependencies에서 Thymel
Thymeleaf
Thymeleaf 백엔드 server-side 렌더링을 지원하는 Template Engine 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진 JSP를 완전히 대체하는 것을 목표로 하며, 브라우저에서 직접 열 수 있고, 웹페이지로 올바르게 표시되는 템플릿 파일인 Natural Template 이라는 개념을 구현함 즉, WAS를 거치지 않으면 단순 HTML으로 출력되지만, WAS를 이용해서 뷰 템플릿을 거치면 동적으로 변환된 HTML이 출력됨 JSTL을 이용하는 JSP 템플릿의 경우, 톰캣 같은 WAS 없이 일반 브라우져만으로는 정상적인 확인이 불가능함 Spring boot에서 공식적으로 지원하고 권장하는 템플릿 엔진 thymeleaf-layout-dialect Thymeleaf에서 제공하는 layout 라이브러리이다. header, footer 등 페이지마다 공통으로 표시되야할 부분을 각
Thymeleaf(타임리프) 작동 원리 - 경로 맨 앞에 "/"가 언제 붙어야 할까?
Spring 프로젝트를 처음 시작하며 제일 처음 접해보는 것은 대부분 @GetMapping 일 것이다. 그리고 해당 어노테이션 사용 방법에 대해 알아보면 예제로 두가지 케이스가 있다. return하는 값 파라미터 맨 앞에 / 가 붙는 경우와 안 붙는 경우. 예를 들면 다음과 같다. 케이스1: @GetMapping return 값 경로 맨 앞에 /가 "붙는" 경우 케이스2: @GetMapping return 값 경로 맨 앞에 / 가 "없는" 경우 우선 두가지 케이스 모두 local 환경에서는 문제없이 작동했다. 그럼 왜 두가지 케이스가 정상적으로 작동한 것일까? Spring과 Template Engine 대한 이해도가 거의 없는 상태에서 예제를 봤을 때 어떤 경우에 /가 붙는지에 대한 의문이 들었고 해당 내용에 대해 알아보았다. > 일단 결론은 로컬 환경이 아니라면 return 시 맨 앞에 /를 붙이면 안된다는 것이다.
Template Engine(템플릿 엔진), Thymeleaf(타임리프)란?
현업에서는 Json으로 데이터를 주고받기 때문에 Template Engine에 대해 깊게 알 필요 없다는 조언을 많이 들었지만 Spring 강의로 유명한 김영한님의 강의에서 프로젝트가 템플릿 엔진을 기반으로 진행되기 때문에 이에 대한 이해없이 스프링의 동작 방식을 이해하는 것이 다소 힘들었다. 그래서 한번 정리해보았다. 🍃 Template Engine 정적 페이지를 동적 페이지로 만들어주는 엔진으로 이해했다. 지정된 양식과 데이터를 합쳐 HTML을 웹에다 쏴(?)준다. 서버 사이드 Template Engine과 클라이언트 사이드 Template Engine이 있다. 본문에서는 서버 사이드 Template Engine만 다룰 예정이다. 서버 사이드 템플릿 엔진(SSR) _
Spring Thymeleaf
서버 지원 Template Engine 프로그램 로직과 프레젠테이션 계층을 분리하기 위한 수단 프레젠테이션 계층에서 로직을 쉽게 표현하고, 개발의 유연성을 향상 시키며 유지보수의 효율 또한 향상된다. 서버 템플릿 엔진 (SSR : Server Side Rendering) : 서블릿(서버)에서 동작하는 템플릿 템플릿 양식과 데이터를 이용해 html을 생성하여 브라우저에 전달한다. 정해진 템플릿 양식과 데이터가 매핑하여 html 문서를 만들어주는 SW로 그 종류는 다양하다 그중 Thymeleaf에 대해서 알아보자. 이클립스 thymeleaf 지원 설정 [reference...](https://
Handlebars
Handlebars 는 간단한 템플릿 엔진이다. 템플릿엔진 : (문자열템플릿 + 데이터) = html 로 합쳐주는 소프트웨어 빠른설치 기본 표현식 더블 브레이스로 여닫는다. Helper 표현법 빌트인 헬퍼외의 기능이 사용하고싶다 ? 커스텀헬퍼를 만들어서 사용 ! 렌더링 방법 사용예시
0308 TIL
django CSRF Error Template Engine을 사용할 때, 발생하는 CSRF Error가 무엇이고 어떻게 해결합니까? 인증된 사용자에 대해서 서버가 사용자를 신뢰하는 것을 이용한 공격으로 사용자가 의도하지 않은 위조된 요청을 서버에 보내게 되어 서버가 공격을 받게 됩니다. 이 에러를 해결하는 방법으로는 시큐리티 토큰을 사용하는 방법과 리퍼러를 사용하는 방법이 있는데 리퍼러를 체크하는 방법은 요청의 리퍼러와 도메인이 일치하는지를 확인하는 것으로 프로젝트의 settings.py에서 CSRFTRUSTEDORIGIN에 허용 도메인을 추가해서 안전하지 않은 요청을 보낼 필요가 있는 도메인의 요청을 에러없이 처리할 수 있다. 시큐리티 토큰을 사용하는 방법은 사용자의 요청에 난수값을 포함시켜 세션에 저장된 토큰 값과 요청 파라미터에 전달되는 토큰값이 일치하는지 확인하는 것으로 장고 템플릿에서 폼태그 POST 요청시에 {% csrf_token
[Express] Nunjucks Template Engine 기본 사용법
nunjucks 설치 nunjucks란? Javascript를 이용해 HTML을 렌더링 할 수 있도록 돕는 템플릿 엔진이다. HTML 표현 HTML 문법을 그대로 사용하고 추가로 자바스크립트 문법을 사용할 수 있습니다. 초기 설정 nunjucks 모듈을 불러온다. express와 함께 사용하기 위해 express 모듈도 불러왔다. view engine, 사용할 템플릿 엔진 확장자을 설정해 준다. nunjucks는 njk라는 특수한 확장자가 존재하지만 html을 그대로 사용해도 된다. 템플릿 엔진을 사용하겠다는 의미이다. nunjucks.configure([path], [opts]); 인자를 모두 적어 주거나 둘 중 하나만 적어줘도 된다. path 템플릿 파일이 존재하는 폴더의 경로를 넣어주면 된다. 현재 작업 디렉토리에 상대적인 경로를 넣어주면 된다. 템플릿이 경로에 있음을 알리는 용도다.
javascript template engine 사용해 중첩된 객체 데이터 수정하기
Squirrelly 사용법 문법 > Sqrl.render(string, obj) string : 타입은 문자열. : obj의 key 값을 {{it.key}}으로 작성하면 key와 쌍을 이루는 value 값으로 데이터가 수정됨. obj : 데이터를 정의하거나 수정할 {key : value} 형태의 객체. : 동일한 key가 존재하면 마지막에 위치한 key의 value값으로 데이터 수정됨. 🤔 첫번째 파라미터를 문자열로 받는데, 객체를 어떻게 수정하지? > ### JSON 내장 객체 사용하기 parse(): JSON 문자열을 매개변수로서 수용하고, 일치하는 자바스크립트 객체로서 변환합니다. stringify(): 객체를 매개변수로서 수용하고, JSON 문자열 형태로 변환합니다. js에는 기본적으로 객체를 문자로, 문자를 객체로 바꾸는 내장 객체가 존재. Squirrelly 이용해 객체 데이터 수정하기
JSP - JSP Project
JSP를 사용하는 스프링 부트 프로젝트 템플릿 엔진 스프링 부트 추천 템플릿 엔진 Tymeleaf Freemarker Mustache 💬 JSP 템플릿 엔진을 사용하기 위해서는 프로젝트 구성을 수정해야 한다. JSP 컴파일 라이브러리 Gradle Maven JSP 프로젝트 구조 변경 webapp, WEB-INF 구조로 변경 (폴더 생성) webapp 폴더 웹을 정의하는 root 폴더 WEB-INF J2EE 사양에 따라 정의된 표준 폴더 구조 JSP 뷰 리졸버 설정 변경 
Step6 - 스프링 웹 개발 기초_MVC와 템플릿 엔진
MVC와 템플릿 엔진 MVC : Model, View, Controller MVC와 템플릿 엔진 가장 많이 하는 방법 JSP, PHP.. 서버에서 HTML을 동적으로 바꿔서 내려줌.. 이걸 하기 위해서 MVC패턴이 필요 Controller : 비즈니스 로직, 내부 처리 Model : 필요한 걸 담아서 화면에 넘겨줌 View : 화면을 그리는데에 모든 역량을 집중 정리 웹브라우저에서 localhost:8080에 hello-mvc를 넘기면 내장 톰캣 서버를 거치게 됨. -> 톰캣은 hello-mvc를 스프
Spring - View
View 뷰 환경설정 Spring Boot > 스프링 doc. > 기본 Welcome Page 경로 > resources/static/index.html > 스프링 부트가 제공하는 Welcome Page 기능 제공한 index.html 을 기본 화면으로 보여준다. thymeleaf 템플릿 엔진 Thymeleaf > thymeleaf 공식 사이트 > 컨트롤러 컨트롤러 패키지 생성 컨트롤러 클래스 생성 컨트롤러에는 @Controller 어노테이션을 달아야 한다. 리턴 값이 “hello” 면 /resources/tempates/hello.html 을 찾아서 렌더링 (스프링 부트 기본 매핑) > java/~/controller/HelloController.java > > res
[SpringBoot] thymeleaf form 사용
thymeleaf를 공부하는 중에 form태그를 이용하여 데이터를 주고 받는 과정에서 고민하고 검색하여 해결했던 내용을 기록한것 입니다. 자세한 내용은 공식 홈페이지를 참고해주세요 > 공식홈페이지로 이동 일단 thymeleaf를 이용한 form태그에서 자주 사용하는 대해서 간단히 설명하겠습니다. form 간단하게 form 태그에서 사용할 수 있는 3가지 입니다. 저는 이 3가지를 사용하였습니다. th:action form data를 보낼 url를 설정 th:object form data를 담을 객체를 설정 th:field 담는 객체의 필드을 동적으로 매핑 (사용시 객체의 필드로 id과 name이 자동생성)
.png)
Nodejs - pug의 문법
pug의 문법 express의 템플릿엔진으로 사용되는 pug(구: jade)의 사용법을 학습하면서 pug를 어떻게 써야하는지에 대한 것. 즉, 문법을 공부할 필요성을 느꼈다. pug를 사용하게 되면 html 문서를 상당히 축약해서 작성할 수 있어서 코드가 간결해지고 생산성이 향상되는 장점이 있다. 우리가 저번시간에 views 폴더를 만들고 렌더링해서 사용자에게 보여줄 temp.pug 파일을 생성했었다. 현재, temp에는 html 코드만 한 줄 작성된 상태인데, head 와 body 를 추가해보자. temp.pug 명령 프롬프트를 통해 app.js 를 실행하고 localhost:3000/template 에 접속해서 sourcecode보기를 통해 코드 내용을 살펴보면.. .png)
Nodejs - Template Engine
Template Engine 지난 시간에 정적으로 웹을 구성하기도 하고 동적으로 웹을 구성하기도 하면서 각각의 차이점과 장단점에 대해서 알게 되었다. 그렇다면 각 방법의 장점만을 취해서 이용하는 방식이 있다면 참 편리할 것 같다는 생각이 든다. 그 역할을 해주는 것이 바로 Template Engine(템플릿 엔진) 이다. 템플릿 엔진을 인터넷에 서칭 해보면 "템플릿 양식과 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어"라고 되어 있다. 이해를 위해 좀 더 쉽게 접근해보자. 만약 우리가 어떤 웹 앱을 제작한다고 했을 때 전체적으로는 정적으로 구성하고 그 안에 컨텐츠들은 동적으로 구성해야한다고 가정하자. 즉, 큰 틀은 변하지 않고 작은 내용들만 변경이 되는 상황이고 특정 이벤트에 따라 화면이 변경되는 상황이다. 이 때, 만약 정적으로 서비스를 한다면 html의 내용을 일일히 바꾸어주어야하는 불편함이 있다. 그렇다고 자주 변경되지 않는 페이지라 굳이 동적으로
Thymeleaf - Form 데이터 전송 2 (Radio Button, Select box)
🚀 간단한 Admin 페이지 정도는 스스로 만들 수 있도록 템플릿 엔진을 공부합니다 ! 🔎 RadioButton 데이터 전송 은 단일 선택만 지원하는 input태그의 옵션입니다. RadioButton 부분 HTML 코드입니다. 이전 포스트 에서 부분과 거의 동일합니다. 이전과 마찬가지로 에 의해 동적으로 생성되는 의 를 과 맞추기 위해 를 사용하였습니다. 이전에는 을 사용하였지만 이번에는 타입을 사용하였습니다. 다음으로 요청 객체를 볼께요. 은 단 건만을 받기 때문에 단순히 타입으로 해주었습니다. 컨트롤러 부분을 보겠습니다. 먼저 의 값을 세팅해주기 위해 를 사용합니다. 단순히 정의한 타입을 리턴하는 메서드입니다. 사용한 클래스입니다.
🌿 Thymeleaf - Form 데이터 전송 (Text, CheckBox, Multi Checkbox)
🚀 간단한 Admin 페이지 정도는 스스로 만들 수 있도록 템플릿 엔진을 공부합니다 ! 🔎 Text 데이터 전송 가장 단순한 Text 데이터 전송 예제입니다. 먼저 측 코드입니다. 으로 요청이 왔을 때 폼을 들고있는 view를 랜더링시키는 메서드를 갖고 있습니다. 이 때 에 빈 객체를 넘기는데 이 부분이 중요합니다. 다음으로 HTML 코드입니다. 태그의 속성으로 를 사용하고 있습니다. 의 이름은 으로 지정하였구요. 이 때 은 컨트롤러에서 넘겨준 빈 객체입니다. thymeleaf는 이렇게 빈 오브젝트를 받아서 값을 세팅할 수 있습니다. 로 빈 오브젝트를 전달받았다면 아래 태그에서 를 통해 해당 오브젝트의 필드에 접근할 수 있습니다. 는 이렇게 객체의 필드에 접근할 수 있는 것과 함께 여러 부가적인 기능을 제공해주니 꼭 기억해야 합니다. 는 문법으로 변수를 선택할 수 있습니다. 은 model객체로 전달된 form객체의 name필드에 접근한다는
2_ Template Engine 사용해서 쇼핑몰 목록 만들기.
1. 쇼핑몰 페이지 맛보기. : template engine을 사용해서 쇼핑몰의 첫페이지를 그려보자. 2. static 파일 추가. https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/node.js/week03/public.zip : 다운로드 > 압축 품 > public 폴더 안에 static 폴더 삽입. 3. index.js 수정 ejs 사용으로 홈페이지 생성 /home으로 들어오는 경로는 index.ejs로 rendering함.
🌿 Thymeleaf - Fragment (공통영역처리)
🚀 간단한 Admin 페이지 정도는 스스로 만들 수 있도록 템플릿 엔진을 공부합니다 ! 🔎 공통 영역 처리를 하는 이유 웹 페이지의 경우 공통으로 반복되는 영역이 많이 있습니다. 페이지의 정보를 나타내는 헤더부분, 메뉴 탭을 나타내는 네비게이션 바, 저작권 정보 등을 표시하는 푸터 등 여러 페이지에 거쳐 반복되는 영역이 존재합니다. 이런 공통의 영역들을 매 페이지의 HTML파일에 반복한다면 각 파일이 지저분해지는 것은 물론이고 변경의 지점 또한 분산되게 됩니다. 공통의 영역을 분리함으로써 변경지점을 최소화할 수 있어서 변경에 참 용이합니다. 🔎 th:fagment 문법 Thymeleaf가 제공하는 문법에 대해 간단하게 알아볼께요. 먼저 공통 영역을 정의합니다. 를 를 이용해 조각화하였고 이름은 로 설정하였습니다. fragment는 대표적으로 두 가지 방법으로 이용할 수 있습니다. 🔎 th:insert 는 태그 내로 조각을
20210607 TIL
Template Engine > 문서의 원형(template)과 data를 합쳐 새로운 document를 만들어 내는 software. 서버는 기본적으로 client가 요청한 데이터나 파일을 전달해준다. 여기에는 웹페이지도 해당된다. 예를 들어 여러 명의 사용자가 있고, 각 사용자에게 사용자의 이름만 다르고 동일한 내용의 웹페이지를 전달한다고 가정하자. 그렇다면 사용자의 이름만 다른 페이지를 사용자의 수 만큼 만들어놓아야할 것이다. 하지만 template engine을 이용한다면, 사용자 데이터와 파일 1개로 해결할 수 있다. Jinja Jinja는 python server framework인 flask에 내장된 template engine이다(flask와 제작사가 동일하다.). 일반적으로 flask에서 html 파일을 불러오는 방법은 다음과 같다. template engine을 사용하지 않는다면 hellouser.html 파일을 사용자 수 만큼 만들어야한다