🔖 이론

템플릿 엔진

[지정된 템플릿 양식 + 데이터]를 HTML 문서로 출력해주는 소프트웨어

(= 지정된 템플릿과 데이터를 이용해서 HTML 을 생성 하는 템플릿 엔진)

• 웹 사이트 화면을 어떤 형태로 만들지 도와주는 양식
• HTML (view code)와 data logic code (DB connection)을 분리해줌
• 종류 2가지 : 서버 (사이드) 템플릿 엔진 / 클라이언트 (사이드) 템플릿 엔진

📄서버 템플릿 엔진

EX. JSP, Freemarker, Thymeleaf

• 서버에서 구동 됨
• 화면 생성 과정 : Java 코드로 문자열 생성 (in 서버) → 문자열을 HTML로 변환 → 브라우저에 전달
  • DB (or API)에서 가져온 데이터를 미리 정의된 템플릿에 넣음 → HTML 그림 (in 서버) → 클라이언트에게 전달
  • 즉, HTML에서 틀이 되는 부분은 템플릿으로 생성해 두고, 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워 넣는 방식으로 동작

📄클라이언트 템플릿 엔진

EX. React, View (자바스크립트 계열), Mustache, Squirrelly, Handlebars

• 브라우저에서 화면을 생성함 (서버에서 코드가 이미 벗어남)

  • 서버에선 Json (or Xml) 형식의 데이터만 전달 후 클라이언트에서 조립
  • HTML형태로 코드 작성 가능 → 동적으로 DOM 그리게 해줌 (데이터 받아서 DOM 객체에 동적으로 그려줌)

• 클라이언트: 공통적인 프레임을 미리 템플릿으로 생성해 놓음

  → 서버에서 필요한 데이터 받으면 → 템플릿 적재 적소에 배치 해 렌더링

• URL이 바뀌어도 HTML 다시 내려받음 X → 클라이언트에서 알아서 그림

머스테치