스터디를 통해 스프링부트와 AWS로 혼자 구현하는 웹 서비스(저자 이동욱) 서적을 공부하는 중입니다.

공부/실습한 내용을 정리한 포스팅입니다.
책에 모르는 부분이 있으면 구글링하거나 챗gpt에 물어봐서 보충하였습니다.
(아직 초보라 모르는 부분이 많아 이것저것 다 적었습니다.)

참고한 사이트 출처는 포스팅 맨 하단에 적었습니다.

템플릿 엔진

• 웹 개발의 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어(또는 컴포넌트)이다.
• 서버 템플릿 엔진, 클라이언트 템플릿 엔진으로 나눌 수 있음.
• 서버 템플릿 엔진에는 JSP, FreeMaker 등 있고 클라이언트 템플릿에는 React.js, Vue.js가 있음.
  (엄밀히 말하면 JSP는 템플릿 엔진이 아니지만, Spring+JSP로 사용 시 JSP가 View의 역할만 하도록 구성할 땐 템플릿 엔진으로 사용 가능)

서버 템플릿 엔진

• HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, 동적으로 생성된 부분만 템플릿에 소스코드를 끼워넣는 방식으로 동작.
• 서버에서 Java코드로 문자열 생성 후 이 문자열을 HTML로 변환하여 브라우저로 전달.

클라이언트 템플릿 엔진

• Vue.js나 React.js를 이용한 SPA(Single Page Application)는 브라우저에서 화면 생성. 즉, 서버에서 이미 코드가 벗어난 경우.
• Ajax의 등장으로, 서버에서는 JSON 혹은 XML 형식의 데이터만 전달하고 클라이언트에서 조립.
• HTML 형태로 코드 작성 가능하며, 동적으로 DOM을 그리게 해주는 역할을 함.
• 계속해서 페이지를 이동하며 서버로 요청을 보낸다면 서버 사이드 템플릿 엔진을 이용하면 되지만, 서버 통신 없이 화면 변경이 필요하다면 클라이언트 사이드 템플릿이 필요.

※원래 js로 HTML에 가공된 데이터만 보여줬는데 조금의 실수라도 하면 페이지가 보이지 않거나 이상하게 보이는 경우가 많아서, 중간 매개체인 템플릿 엔진 등장

SPA(Single Page Application)

• 기존 웹 서비스는 요청 시마다 서버로부터 리소스들과 데이터를 받아서 해석하고 렌더링하는 방식.
• SPA의 경우, 브라우저에 한 번 페이지 전체 로드 후 그 이후론 특정 변경 사항이 일어나는 부분만 Ajax를 통해 데이터를 바인딩하는 방식. 트래픽이 낮아지는 효과를 볼 수 있으며 새로고침을 하지 않아도 되어 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 제공.

Mustache

수많은 언어를 지원하는 가장 심플한 템플릿 엔진.
Ruby, js, python, php, Java, Go, ASP 등 현존하는 대부분의 언어 지원.
Java에서 사용 시 서버 템플릿 엔진으로, JavaScript에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용 가능.

Java 서버 템플릿 엔진 종류

• JSP, Velocity : SpringBoot 권장X
• Freemaker : 과하게 많은 기능을 지원하여 템플릿에 비즈니스 로직이 추가될 가능성이 높음.
• Thymeleaf : 문법이 어려움. Vue 사용 경험 있을 시 Thymeleaf 추천.

장점

• 문법이 다른 템플릿 엔진보다 심플.
• 로직 코드를 사용할 수 없어서 View의 역할과 서버의 역할이 명확하게 분리됨.
• 하나의 문법으로 클라이언트/서버 템플릿 모두 사용 가능.

플러그인 설치

• Ctrl+Shift+A로 Action 검색 창 띄워서 Plugins 검색.
  마켓에서 Mustache 검색해서 install
• Mustache 문법 체크, HTML 문법 지원, 자동완성 등 개발할 때 큰 도움이 됨.

의존성 등록

아래와 같이 build.gradle 의존성에 코드 작성

dependencies {
    implementation('org.springframework.boot:spring-boot-starter-mustache')
}

Template 위치

• src>main>resouces>templates
• 기본 위치이며, SpringBoot에서 자동으로 로딩.

출처

[Spring]템플릿 엔진이란, 템플릿 엔진의 종류
[WEB] SPA 란?
SPA와 기존 웹사이트의 차이
SPA란 무엇인가