-
[Spring Boot] view 페이지, 템플릿 엔진에 대해서(jsp VS thymeleaf)Spring/Spring Boot 2024. 8. 5. 20:15
▤ 목차
✔ view 환경 설정
📌 스프링의 시작페이지(index.html)
파일에서 static폴더에 index.html 라는 이름의 파일을 만들자.
이는 spring에서 제공하는 welcome page이다.
이 파일은 정적페이지로 파일을 그대로 웹브라우저에 전달한다.
전달받은 웹브라우저는 해당 파일을 파싱한다.
🌐 파싱(parsing)과 파서(parser)
👏 파서(parser)
문법이나 형식으로 작성된 데이터를 읽어서 그 구조를 해석, 변환하는 프로그램을 말한다.
컴파일러나 인터프리터의 구성 요소 가운데 하나이며 입력 토큰에 내재된 자료 구조를 빌드하고 문법을 검사할때 사용된다.
웹 개발에서 html, xml, json 등의 문서를 처리하는데 사용된다.
https://developerpearl.tistory.com/54 문서 형식에 따라 다양한 파서가 사용된다.
HTML 파싱
HTML 문서는 브라우저에서 파서에 의해 DOM(Cocument Object Model) 트리로 변환되며, CSS와 JavaScript와의 상호작용을 통해 웹 페이지를 렌더링한다.
👏 파싱
파싱은 파서의 과정을 말한다.
https://www.scrapingbee.com/blog/data-parsing/
✔ 템플릿 엔진(Template Engine)
⌨ 템플릿 엔진이란?
서버측에서 동적으로 HTML, XML, JSON 등을 생성하는 데 사용하는 도구이다.
웹 애플리케이션 개발에서 템플릿 엔진은 클라이언트에게 동적으로 생성된 내용을 제공하는데 중요한 역할을 한다.
프로그램 로직을 표현하는 계층과 서비스를 사용하는 유저가 보는 데이터 출력을 위한 프리젠테디션 계층을 분리한다. controller에서 view로 데이터를 보내면 데이터를 view에서 볼 수 있게 도와준다.
주요 템플릿 엔진
- Thymeleaf : 스프링 프레임워크와 통합되어 있다. html5 기반의 템플릿 엔진이다.
- JSP : 서블릿 기반의 동적 웹 페이지를 생성하기 위한 Java 기반 템플릿 엔진이다.
- Velocity : Apache Velocity는 간단한 문법과 높은 확장성을 제공하는 템플릿 엔진이다.
- mustache
- Freemarker
서버지원 템플릿 엔진 (SSR : Server Side Rendering)
서블릿에서 동작하는 템플릿을 말한다..
템플릿 양식과 데이터를 이용해 html을 생성하여 브라우저에 전달한다.
정해진 템플릿 양식과 데이터가 매핑하여 html 문서를 만들어주는 소프트웨어이다.💻 thymeleaf
Thymeleaf is a modern server-side Java template engine for both web and standalone environments.
타임리프는 view Template라고 부른다.
Thyeleaf를 사용하여 view 페이지에 동적으로 html을 생성할 수 있다.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Example Page</title> </head> <body> <h1>Hello, <span th:text="${name}">Guest</span>!</h1> <p th:if="${isAdmin}">Welcome, Admin!</p> <ul> <li th:each="item : ${items}" th:text="${item}"></li> </ul> </body> </html>위와 같이 사용할 수 있다.
thmeleaf 문법을 사용하여 서버에서 전달 받은 데이터를 html에 동적으로 반영할 수 있다.
html이 정적이기에 모델 1에서는 jsp를 서버에서 데이터를 받아 사용했었다.
하지만 thymeleaf을 사용해서 해당 문법에 맞춰 사용하면 html에서도 동적으로 표현할 수 있다.
HTML vs Thymeleaf
보통 JSP와 같이 같은 템플릿 엔진끼리 비교를 하지만 우선 HTML과의 차이를 알아보도록 하자.
👏 HTML
html은 클라이언트측 템플릿 엔진이다. 컴파일 과정없이 브라우저에서 해석(파싱)해 바로 출력한다.
파싱(Parsion)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정이다.
https://velog.io/@do_dam/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95 📌 JSP vs Thymeleaf
JSP (JavaServer Pages) Thymeleaf 기술 Java 기반, Java EE(현재 Jakarta EE) 서버 환경에 종속적 XML, HTML5 기반, 독립적인 사용 가능 문법 스크립트릿(<% %>) 및 JSP 액션 태그(<jsp:...>) 사용 태그 속성(th:...)을 통해 데이터 바인딩 및 논리 흐름 제어 가능 설계 디자인과 로직이 섞일 가능성이 있음 HTML과 비슷한 문법을 사용하여 코드와 디자인을 분리 가능 자바 코드 입력 <% %> 형식으로 Java 코드 사용이 가능 가능하지만 권장되지 않으며, 태그 속성을 사용하여 데이터를 바인딩함 유연성 Java 기능에 직접 접근 가능 HTML과 유사한 구조로 인해 디자이너와 협업이 용이함 확장성 Java EE의 일부이며, 다른 자바 프레임워크와 잘 통합됨 스프링과 잘 통합되지만 다른 프레임워크와도 사용 가능 성능 초기 렌더링 속도가 빠르지만, 큰 규모의 프로젝트에서 성능 저하 가능 초기 렌더링 속도가 느리지만, 디자인과 로직 분리가 더욱 용이함 배포(패키징 형식) jsp 파일들은 컴파일되어 java Servlet 코드로 변환된다. 이는 war 파일에 포함된다. thymeleaf 템플릿 파일들은 jar(JAVA Archive) 파일에 포함된다. (servlet 코드로 변환X) 💻 spring에서 제공하는 Template Engines
https://docs.spring.io/spring-boot/reference/web/reactive.html#web.reactive.webflux.template-engines 👏 thymeleaf.org
Thymeleaf
Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati
www.thymeleaf.org
공식 홈페이지 ( API )
✔ 기본 Controller와 view 생성
📎 thymeleaf 실행
이와 같은 html이 있다고 해보자.
이 파일만 실행되면 <p></p>테그의 사이 데이터인 '안녕하세요'가 찍힌다.
thymeleaf의 html은 templates 폴더에 넣는다. 
Model(hash구조)로 키 값으로 매핑되어 haha라는 이름의 데이터가 넘어와 값이 찍힌 것을 확인할 수 있다.
주소값을 보면 forwarding으로 전달되었다.
Spring의 기본 페이지 전달은 forwarding임을 알 수 있다.
즉, 해당 페이지는 서버에서 서버로 전달되었다.📎thymeleaf 실행 동작
👏 viewResolver 작동 방식
스프링 부트 템플릿 엔진의 기본 viewName(controller의 return)에 매핑된다.
resources:templates/ + [viewName] +.html
'Spring > Spring Boot' 카테고리의 다른 글
[spring Boot] Controller 어노테이션 정리 (0) 2024.08.08 [spring Boot] Thymeleaf 페이지 레이아웃 (0) 2024.08.06 [springBoot] spring boot 실행 시 로그 (0) 2024.08.02 [springBoot] 기본 환경 설정 (0) 2024.08.01