템플릿 엔진이란 무엇인가?

2018. 7. 31. 10:24개발을 파헤치다/쉽게 풀어쓴 개념

반응형

자, 여기 인형을 만드는 업자가 있습니다. 


이 업자는 인형을 만들기 시작한지 얼마 되지 않아 바느질에 익숙하지 않습니다.

고객으로부터 원하는 인형을 주문 받으면 업자는 창고에서 몸통, 눈, 코, 입을 가져와서 바느질을 시작합니다.

한참을 만들어서 고객에게 보내는데 문제가 발생합니다. 


고객이 눈의 색깔을 바꿔달라고 합니다. 


요령이 없던 업자는 처음부터 인형을 만들기 시작합니다. 


굉장히 비효율적이죠. 


시간이 흘러 일이 손에 익은 업자는 고객이 인형의 일부를 바꿔달라는 요청을 해낼 수 있게됩니다. 


깨끗하게 수정 부분을 제거하고 딱 그 부분만 바꿔서 고객에게 돌려주는 거죠. 


당연히 시간이 줄어듭니다. 하지만 문제가 여기서 또 생깁니다. 


업자가 바질을 원래 못했기 때문에 수정을 하다가 자꾸 실수를 하게 됩니다. 


이 때문에 고객들에게 불만이 쌓이고 매출이 줄게 됩니다.


업자는 고민하다 결국 전문 재봉인을 고용해서 사용하기로 합니다. 


이제 완벽합니다. 


업자는 고객에게 주문을 받으면 그저 창고에서 재료를 가져다가 재봉인에게 건네주기만 하면 되었습니다.





이 스토리에 템플릿 엔진이 무엇인지 들어있습니다. 


웹이라는 세계에서 업자는 서버, 고객은 클라이언트(예를들면 브라우저)로 볼 수 있습니다. 


기존의 방식에서는 서버에서 데이터베이스의 데이터를 가져온 뒤 HTML로 만들어 클라이언트에게 보내주었습니다. 


이 방식은 페이지의 일부만 변할 때에도 전체 페이지를 다시 그려야(이것을 렌더링이라고 합니다)하는 비효율적인 방식이었습니다.

이 때문에 많은 사람들이 Ajax가 나왔을 때 열광했습니다. 


Ajax로 요청을 보내면 서버는 요청한 데이터만 주고 프론트엔드단에서 해당 부분만 재가공하여 보여주면 되었습니다. 


전의 방식에 비해 서버의 부담을 줄이는 혁신적인 방법이었지만 문제가 끝난 것은 아니었습니다. 


데이터를 가공하는데 손이 많이가는 것이었습니다. 


보통 jquery를 사용하거나 javascript를 사용하여 HTML에 가공된 데이터를 보여주는데 조금의 실수라도하면 페이지가 보이지 않거나 이상하게 보이는 경우도 있었습니다.

이 때문에 사람들은 쉬운 표현으로 서버에서 받아온 데이터를 효과적으로 보여줄 중간 매개체를 원하게 됩니다. 


위의 예에서는 전문 재봉업자가 되겠죠? 


이 역할을 한 것이 바로 템플릿 엔진입니다.

템플릿 인진을 사용하면 비교적 간략한 표현(조건문, 변수, 반복문)을 통해 효과적으로 데이터를 가공하여 웹 페이지를 보여줄 수 있습니다. 


Template Engine을 왜 쓰는가?


많은 코드를 줄일 수 있다

대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용합니다.

아래의 예시는 HTML과 Node.js에서 사용하는 Jade Template Engine입니다.

<body>
<div>
<h1>Practical Node.js</h1>
<p>The only book most people will ever need.</p>
</div>
<div>
<footer>&copy; Apress</footer>
</div>
</body>


Body
div
h1 Practical Node.js
p The only book most people will ever need.
div
footer &copy; Apress

훨씬 간결함을 알 수 있습니다.

코드가 길어지면 길어질 수록 이 간결함은 더욱 빛을 발휘합니다.

재사용성이 높다

웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많습니다.

이 경우 Template Engine을 사용하는 것은 매우 효율적입니다.

해당 페이지를 Template Engine 문법으로 만들어 놓고(Template을 만든다) 여기에 데이터를 바꿔가면서 렌더링(그리는 작업)을 해주면 수 백의 페이지들을 나타낼 수 있습니다.



유지보수에 용이하다

하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있습니다. 


바로 유지보수에 굉장히 용이하다는 점입니다.

수백개의 비슷한 모양의 HTML 페이지를 수정해야 한다고 상상해보십시오!

이는 단순 반복작업일 뿐만 아니라 매우 비효율적입니다.

Template Engine을 사용하면 동일한 Template을 사용한다는 전제하에 Template과 넘겨주는 데이터만 수정하면 끝입니다.

반응형