템플릿 엔진
HTML 상 데이터를 넣어서 보여주는 도구 (소프트웨어)
== 지정된 양식과 데이터가 합쳐져 HTML 문서 출력
✔️서버 사이드 템플릿 엔진 Server Side Templete Engine
서버 : 데이터 처리- 가공, HTML 완성했어 ^0^
클라이언트 : 응~ 받아갈게
서버에서 HTML 랜더링 - 페이지 로딩시 한번만 이루어짐
(이후 변경사항이 생기면 새로고침을 해야지 업데이트 됨)
== 서버에서 Java 코드로 문자열을 만든 후 서버에서 HTML로 변환하여 완성된 페이지를 클라이언트 (브라우저)로 전달
DB 또는 API에서 가져온 데이터를 정의된 템플릿에 넣어서 html 완성 클라이언트에게 전달해주는 역할
종류로는 JSP, Thymeleaf, Velocity, Freemarker 등이 있음
📍서버 사이드 템플릿 엔진의 작동 과정
- 클라이언트(브라우저)가 웹 페이지를 요청하면, 웹 서버는 해당 요청을 받습니다.
- 웹 서버는 템플릿 엔진을 사용하여 클라이언트로부터 받은 정보를 템플릿에 삽입합니다.
- 삽입된 데이터를 가진 HTML 문서를 생성합니다.
- 생성된 HTML 문서를 클라이언트에게 전송합니다.
- 클라이언트는 받은 HTML 문서를 렌더링하여 사용자에게 보여줍니다.
이러한 방식은 서버에서 모든 작업이 이루어지고, 클라이언트는 완성된 HTML 문서만 받기 때문에 서버의 부하가 클 수 있습니다. 그러나 한 번의 요청-응답 과정만으로 완성된 페이지를 볼 수 있기 때문에 초기 로딩 속도가 빠르고, SEO(검색 엔진 최적화)에 유리합니다.
선택 기준
- 웹 사이트 상호작용이 별로 없을때
- 웹 페이지가 크게 변경 되지 않을때
- 화면 이동이 많은 곳
✔️클라이언트 사이드 템플릿 엔진 Client Side Templete Engine
서버 : 데이터만 줄게 ^^
클라이언트 : ..응 내가 HTML 완성할게
브라우저에서 화면을 생성 (서버에서는 JSON,XML 형식의 데이터만 전달) 후 클라이언트에서 이를 혼합해 화면 로딩
HTML 형태의 코드로 작성할 수 있으며 동적으로 DOM을 그리게 해주는 역할
주로 같은 형식의 프레임에서 내용만 바뀌는 경우 (카테고리 선택시) 사용됨
종류로는 React , Vue, Angular 등이 있다.
📍클라이언트 사이드 템플릿 엔진의 작동 과정
1. 클라이언트에 공통적인 프레임 개발
2. 서버에 필요한 데이터 요청
3. 데이터를 프레임 (템플릿)의 적절한 위치에 replace 후 DOM 객체로 동적으로 그려준다
이 방식은 서버에서 HTML을 전달하는 대신, 필요한 데이터와 템플릿만 클라이언트로 전송하며, 실제 HTML 문서의 생성과 업데이트는 클라이언트에서 이루어집니다. 따라서 서버의 부하가 크게 줄어들며, 사용자의 상호작용에 따라 페이지의 일부만 빠르게 업데이트할 수 있어서 반응성이 뛰어납니다. 또한, 데이터가 변경될 때 마다 전체 페이지를 다시 로드하거나 새 HTML을 생성하여 보내줄 필요 없이, 웹 페이지의 특정 부분만 변경할 수 있게 해주므로 효율적입니다. 하지만 이 방식은 자바스크립트를 필요로 하며, 초기 로딩 시간이 길어질 수 있습니다. 또한, SEO(검색 엔진 최적화)에 불리할 수 있습니다.
선택 기준
- 사용자의 상호작용에 따라 콘텐츠가 빈번하게 변경될 때
- 서버 성능이 좋지 않을때
| 항목 | 서버 템플릿 엔진 | 클라이언트 템플릿 엔진 |
|---|---|---|
| 설명 | 서버에서 HTML을 렌더링함. 페이지 로딩 시에 한 번만 이루어지며, 이후에는 페이지를 새로 고침해야만 업데이트됨 | 브라우저에서 HTML을 렌더링함. 페이지 로딩 후에도 데이터가 변경될 때마다 동적으로 업데이트됨 |
| 장점 | 서버 측에서 데이터를 HTML에 직접 삽입할 수 있음 | 웹 페이지의 특정 부분만 동적으로 업데이트하여 빠른 반응성을 제공. 전체 페이지를 다시 로드하지 않아도 되므로 트래픽을 줄일 수 있음 |
| 단점 | 페이지를 새로 고침해야만 업데이트됨,서버 부담 있음 | JavaScript가 비활성화된 경우 작동하지 않음. 초기 로딩 시간이 길어질 수 있음 |
| 주로 사용하는 이유 | 웹 페이지가 크게 변경되지 않을 때 사용됨. 서버에서 HTML을 생성하고 완성된 페이지를 클라이언트로 보내기 때문에, 페이지의 내용이 사용자에 따라 크게 달라지지 않는 경우에 효율적임 (클라이언트 하드/소프트 웨어 성능에 영향을 덜 받는다) | 동적인 웹 페이지에 적합함. 사용자의 상호작용에 따라 콘텐츠가 빈번하게 변경되는 웹 페이지에 적합함 |
타임리프 Thymeleaf
타임리프는 서버 사이트 템플릿 엔진의 일종
- 순수 HTML을 유지하면서 동적 HTML이 가능 "네츄럴 템플릿" 이라고도 함
- (서버구동 없이)웹 브라우저에서 직접 파일을 열어서 확인 가능 (th:속성 못읽음)
- 서버를 구동하여 동적 HTML도 확인이 가능
- 스프링 통합 지원 - 스프링의 다양한 기능을 편리하게 사용가능
Thymeleaf 예시 코드
<!DOCTYPE html>
<html xmlns:th="<http://www.thymeleaf.org>">
<head>
<title>Thymeleaf 예시</title>
</head>
<body>
<p th:text="'안녕하세요, ' + ${name} + '님!'">안녕하세요, 세계!</p>
</body>
</html>JSP 예시 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>JSP 예시</title>
</head>
<body>
<% String name = "세계"; %>
<p>안녕하세요, <%= name %>님!</p>
</body>
</html>Thymeleaf 표현식
${...}: 변수 표현식{...}: 선택 변수 표현식#{...}: 메시지 표현식@{...}: 링크 표현식~{...}: 프래그먼트 표현식${#strings}: 문자열 함수${#dates}: 날짜 함수${#numbers}: 숫자 함수${#booleans}: 불리언 함수${#arrays}: 배열 함수
Thymeleaf 문법
th:text: 텍스트 내용을 교체th:each: 반복 처리th:if,th:unless: 조건 처리th:switch,th:case: 다중 조건 처리th:attr: 속성값을 설정th:value:value속성값을 설정th:href:href속성값을 설정th:src:src속성값을 설정th:include,th:replace: 프래그먼트를 삽입th:fragment: 프래그먼트를 정의
⭐참고
https://code-lab1.tistory.com/211
'스프링 일지' 카테고리의 다른 글
| [Spring] OAuth2 / 액세스 토큰 개념 정리 (1) | 2024.01.10 |
|---|---|
| [Spring] 토큰 기반 인증과 JWT 개념 정리 (0) | 2023.12.14 |
| [Spring] 스프링 시큐리티, BCryptPasswordEncoder, 암호화 개념 정리 (0) | 2023.12.13 |
| [Spring] 테스트 - JUnit (0) | 2023.11.16 |
| [Spring] 개념 IoC/DI (2) | 2023.11.15 |