[Spring] Thymeleaf 와 동적 페이지 & 정적 페이지

[ 동적페이지 & 정적페이지 ]

동적 페이지와 정적페이지는 웹 페이지의 콘텐츠가 어떻게 생성되는지를 기준으로
구분된다. 

 

 

* 정적 페이지 - Static Page *

 

-  정의 : 서버에 저장된 html파일이 그대로 클라이언트에게 전송된다.
즉, 페이지의 내용이 고정되어 있고, 요청할 때마다 변하지 않는다.
-  예시 : 일반적인 HTML 파일이나 CSS로 만든 홈페이지 

 

- 특징 :

• 빠르게 로드됨.
• 변동이 없으므로 업데이트가 필요할 때마다 파일을 수정해야 함.
• 주로 정보 제공용 웹사이트에 사용됨.

* 동적 페이지 - Dynamic Page *

 

- 정의 : 서버에서 요청에 따라 실시간으로 콘텐츠가 생성되어 클라이언트에게 
전송된다. 데이터베이스와 연결되어 동적인 정보를 보여줄 수 있다.
- 예시 : 사용자 로그인, 블로그, 소셜 미디어 피드 등.
- 특징 : 

• 사용자나 상황에 따라 내용이 달라짐.
• 서버에서 데이터베이스에서 정보를 가져와서 실시간으로 페이지를 생성.
• 업데이트가 용이하고, 다양한 사용자 경험을 제공할 수 있음.

 

 

[요약]

 

정적페이지: 변하지 않는 콘텐츠, 빠른로드.
동적페이지: 실시간으로 변하는 콘텐츠, 데이터베이스와 연동.

이렇게 두 종류의 페이지는 각각의 용도와 상황에 따라 선택된다.

---

 

 

[Thymeleaf와 Templates]

 

 

* Thymeleaf *

 

Thymeleaf는 템플릿 엔진이다. HTML 파일안에 동적으로 데이터를 삽입하고 웹 페이지를 생성하는데 도움을 준다.

 

[주요 특징]

• HTML 템플릿 : Thymeleaf는 HTML 파일을 그대로 사용하므로, 디자이너가 작성한
  HTML 구조를 변경할 필요 없이 사용할 수 있다.
• 서버 사이드 렌더링 : 서버에서 데이터를 처리하고, 최종적으로 완성된 HTML을 클라이언트에 전달한다. 사용자는 렌더링된 HTML을 보게된다.
•  유연한 데이터 삽입 : HTML 속성이나 텍스트 콘텐츠에 동적으로 데이터를 삽입할 수 있는 다양한 기능을 제공한다. 예를 들어, 변수, 조건문, 반복문 등을 사용할 수 있다.
  
  

 

* Templates *

기본적인 구조나 형식을 미리 정해 놓은 파일.

웹 페이지를 만들 때, 템플릿은 HTML 문서의 뼈대가 되는 부분이라고 
생각하면 된다.

예를 들어, 웹 페이지에서 공통적으로 사용되는 헤더, 푸터, 사이드바 같은 
요소들을 템플릿에 미리 만들어 놓고, 필요한 내용만 바꾸거나 추가해서 사용하면
훨씬 효율적이다.

템플릿을 사용하면

•  재사용성 : 같은 구조를 여러 페이지에서 쉽게 쓸 수 있다.
• 유지 보수 용이: 디자인이나 구조를 한 번 수정하면, 그 템플릿을 사용하는
  모든 페이지에 적용된다.
• 동적 컨텐츠: 서버에서 데이터를 받아와서 템플릿에 쉽게 넣을 수 있다.

 

 

즉, 템플릿은 웹 페이지를 만드는 데 도움을 주는 일종의 "형식"이나 "설계도"이다.

 

 

Thymeleaf는 템플릿을 만드는 도구이고, 템플릿은 Thymeleaf를 통해
작성된 HTML 파일이다.



[기본 사용법]

템플릿 파일 생성: src/main/resources/templates 폴더에 .html 파일을 생성한다.
컨트롤러에서 데이터 전달: Sprong Boot 컨트롤러에서 모델에 데이터를 추가하고 
템플릿 이름을 반환한다.

@GetMapping("/greet")
public String greet(Model model){
model.addAttribute("name", "사용자");
return "greet";  // greet.html 템플릿을 참조
}