기본 콘텐츠로 건너뛰기

개발 공부 - Web 템플릿 엔진

서버 사이드 템플릿 엔진
: JSP, Thymleaf, Velocity, Freemarker
타임리프는 Spring boot 공식 지원!

📌 서버 사이드 템플릿 엔진 (Server Side Template Engine)

서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 Html을 그려서 클라이언트에 전달해주는 역할입니다.

HTMl 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 꺼워 넣는 방식으로 동작할 수 있도록 해줍니다.

🛠️ 동작 과정

  1. 클라이언트의 요청을 받는다.
  2. 필요한 데이터 DB나 API에서 가져온다.
  3. 미리 정의된 Template에 해당 데이터를 배치한다.
  4. 서버에서 HTML(데이터가 반영된 Template)을 그린다.
  5. 해당 HTML을 클라이언트에 전달한다.

서버에서 최종 html 결과를 만들어서 브라우저에 전달하기 때문에 주로 화면 이동이 많은 곳에서 사용됩니다.

대표적인 서버 사이드 템플릿 엔진으로는 Thymeleaf, JSP, Freemarker가 있습니다.


클라이언트 사이드 템플릿 엔진
: Mustache, Squirrelly

📌 클라이언트 사이드 템플릿 엔진 (Client Side Template Engine)

HTML 형태로 코드를 작성할 수 있으며 동적으로 DOM을 그리게 해주는 역할입니다.

데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당하고 있습니다.

🛠️ 동작 과정

  1. 클라이언트에서 공통적인 프레임을 미리 Template로 만든다.
  2. 서버에서 필요한 데이터를 받는다.
  3. 데이터를 Template에 배치하고 DOM 객체에 동적으로 그려준다.

URL이 바뀌어도 HTML을 다시 내려받지 않고 클라이언트에서 알아서 그리기 때문에 주로 단일 화면에서 화면이 변경되는 경우에 사용됩니다.

대표적인 클라이언트 사이드 템플릿 엔진으로는 Mustache, Squirrelly, Handlebars가 있습니다.



템플릿 엔진을 사용하는 이유

1. 많은 코드를 줄일 수 있다.

템플릿 엔진을 사용하면 기존의 HTML에 비하여 간단한 문법을 사용한다. 따라서 코드를 훨씬 간결하게 작성할 수 있다.

 

2. 재사용성이 높다.

웹 페이지는 똑같은 디자인의 페이지에 데이터만 바뀌는 경우가 매우 많다. 이럴 때 템플릿 엔진을 사용하면 미리 템플릿을 만들어 놓고 데이터를 바꿔가면서 수많은 페이지를 만들어 낼 수 있으므로 효율적이다.

 

3. 유지보수에 용이하다.

하나의 템플릿을 미리 만들어 놓고 관리하는 것은 수백개의 비슷한 모양의 HTML 페이지를 관리하는 것보다 훨씬 효율적이다.









참조 : https://code-lab1.tistory.com/211
https://velog.io/@hi_potato/Template-Engine-Template-Engine



댓글

이 블로그의 인기 게시물

Ebook - 전자책 drm 상관 없이 pdf로 만들기

yes24와 교보문고에서 ebook을 구매 해야 했는데 너무 불편하고, 필기가 매우 화날 정도로 안 좋아서 원시적으로 사용하기로 했다. 1. 목적 : ebook에서 필기 및 사용이 불편하여 pdf로 변환  2. 용도 : 개인 사용 목적이며 화질이 다소 저하되어도 필기만 용이하면 상관 없음 3. 방법 1) 휴대폰 및 카메라로 동영상을 촬영했다. DRM 때문에 프로그램으로는 촬영이 안 되는 것을 확인했다. 2) 마우스 클릭 해주는 매크로를 사용했다. (1) key_macro.exe > https://blog.daum.net/pg365/250 듀얼 모니터에서 위치 이탈 현상이 있긴 해도 괜찮았다. (2) AutoClick.exe > http://bestsoftwarecenter.blogspot.com/2011/02/autoclick-22.html 이 걸로 잘 사용했다. 3초마다 한 번 클릭하도록 사용했다. 3) 동영상을 이미지로 변경해주는 프로그램을 사용했다. Free Video to JPG Converter > https://free-video-to-jpg-converter.kr.uptodown.com/windows 일 하면서 듀얼 모니터에 켜 놨는데 속도가 괜찮았다. * Every frame 으로 사용해야 한다. 4) 중복 사진 제거해주는 프로그램을 사용했다. VlsiPics  > http://www.visipics.info/index.php?title=Main_Page 생각보다 느리니 퇴근시에 걸어놓고 가면 된다. 한번 play가 끝나면 Auto-select 하고 Delete 하면 된다. 5) 이미지를 일괄 Crop 작업 해주는 프로그램을 사용했다. JPEGCrops > https://jpegcrops.softonic.kr/ * https://joker1209.tistory.com/11 도 참고했다. View -> Large 로 크게 본 뒤, Edit -> Syncronize Crops 로 일괄 동일하게 적용하는 방식을 사

개발 공부 - json JSONObject 사용 시 백슬래시(\), 원화 표시(\) 제거 및 치환

import org.json.simple.JSONObject; String dataString = new String(authData.toJSONString()); dataString = dataString.replaceAll("\\\\", ""); String 으로 안 바뀌는 가 싶어서 String 으로 변환 해 주고 작업 하였다. 사실 toJSONString 해도 정상 동작 해야 하는데 이유를 잘 모르겠음. 그리고 나서 다시 이클립스 구동 하니 toString 도 먹은 걸로 봐서 이상하다고 생각! String dataString = authData.toString(); dataString = dataString.replaceAll("\\\\", ""); 어쨌든 백 슬래시 제거를 해줘야 하는데 \\ 도 아니고 \\\\를 해야 변환이 가능했다는 결말이었습니다. 참고 : https://stackoverflow.com/questions/15450519/why-does-string-replace-not-work/15450539 test =test.replace("KP", "");  replace 후에 담아 주지 않으면 적용이 안 됩니다!

카카오 계정 삭제 - 카카오 계정 탈퇴 하는 법

몇일 동안 카카오톡 계정 삭제를 하려고 신경질이 나 있었습니다. 간단하게 말하면 그냥 https://accounts.kakao.com/weblogin/deactivate 이 링크만 알려줬으면 될 걸 왜 이렇게 어렵게 만들어!! 안녕하세요. kakao입니다. 문의해주신 내용 관련하여 답변 드리겠습니다. 카카오톡을 이용해 주셔서 감사합니다. 카카오에서는 고객님의 카카오계정을 임의로 탈퇴 처리 해드리기어려운 점 양해 부탁드리며,  번거로우시더라도 탈퇴를 원하시는 카카오계정으로 로그인 하시어  아래의 방법을 통해 직접 탈퇴 하실 수 있습니다. 카카오계정은 카카오톡을 포함하여 카카오스토리, 카카오게임, 카카오페이지 등  다른 카카오 서비스를 모두 이용할 수 있는 통합 계정입니다.  따라서, 카카오톡을 탈퇴하여도 카카오계정에 연결된 다른 서비스가 있다면  카카오계정은 자동으로 탈퇴되지 않습니다.  카카오톡, 카카오스토리 서비스를 이용하고 계신 경우  카카오계정에 연결된 카카오 서비스를 모두 탈퇴하신 후  마지막으로 카카오스토리, 카카오톡을 탈퇴하시면 카카오계정이 함께 탈퇴됩니다.    ※ 카카오계정에 연결된 서비스는      ' 카카오톡, 카카오스토리 앱> 더보기> 내 프로필> 카카오계정> 연결된 서비스 관리' 에서       확인하실 수 있습니다.  ※ 카카오톡, 카카오스토리 탈퇴 시에 '카카오계정은 탈퇴되지 않는다'는 안내를 받으셨다면     카카오톡, 카카오스토리 탈퇴한 이후에 카카오계정 탈퇴 페이지에서     별도로 카카오계정 탈퇴를 진행하시면 됩니다. 단, 카카오계정 탈퇴 시 금전적인 문제가 발생할 수 있거나,  타인의 서비스 이용에 영향을 줄 수 있는 경우에는 바로 탈퇴할 수 없으며,  해당 서비스를 해지하거나 설정을 변경하신 후 카카오계정을 탈퇴하실 수 있습니다.  ※ 이미 카카