7. Template

1. Template 엔진 소개

Template 엔진을 사용하게 되면 우리는 복잡한 html 코드를 간단하게 표현할 수 있습니다./

   // html
   <html>
 <head>
     <title>Hello world</title>
 </head>
 <body>
     <h1>Hello Template & Pug</h1>
     <ul>
         <li> coding </li>
         <li> coding </li>
         <li> coding </li>
         <li> coding </li>
         <li> coding </li>
     </ul>
     <div></div>
 </body>
 </html>

   // template
   html
 head
     title Hello world
 body
     h1 Hello Template & Pug
     ul
         -for(var i=0; i<5; i++)
         li coding
     div= time

위와 같이 비교적 간단하게 표현할 수 있게 됩니다.

2. Template 엔진 사용하기

다양한 Template 엔진들이 존재합니다. 이번에는 우리는 pug를 설치해서 사용해보도록 하겠습니다.
패키지 형태이기 때문에 npm을 이용해서 해당 내용을 가져 와야 겠지요?
이제는 익숙해지셔야 합니다.
```
   npm install pug --save
```
설치가 완료 되었다면, 이제 어떠한 템플리트를 사용할지를 알려줘야 합니다. 그리고 어디에 템플릿을 저장할지에 대해서도 알려줘야 합니다.
```
   app.set('view engine', 'pug');
   app.set('views', './views');
```
물론 default로 템플릿이 저장되는 곳을 views로 저장되어 있기 때문에 명시적으로 적을 필요는 없지만 익숙해진다는 의미에서 일단 남겨 두겠습니다.
pug라는 확장자를 가지는 파일을 만들고 내부에는 html만 입력해 놓습니다.
크롬 브라우져에서 실행 시킨 후 개발자툴을 확인해 보면 html이 있는 것을 확인 할 수 있을 것입니다.