Express 웹서버 만들기_템플릿 엔진 사용하기

HTML은 정적인 언어이기 때문에, 주어진 기능만 사용할 수 있고, 사용자가 기능을 직접 추가할 수 없다는 특징이 있다.

하지만 템플릿 엔진을 이용하면 자바스크립트를 사용해서 HTML을 렌더링 할 수 있다. 따라서, 기존 HTML 과는 문법이 살짝 다를 수 있고, 자바스크립트 문법이 들어있을수도 있다.

대표적인 템플릿 엔진은 Pug와 EJS 가 있는데, 내가 실무에서 사용하는건 EJS이기 때문에 해당 템플릿 엔진에 대해 배워봐야겠다~

---

📝 EJS 사용하기

Pug는 기존 HTML 문법과 많이 달라서 호불호가 갈리기도 한다. EJS는 HTML문법을 그대로 사용하되, 추가로 자바스크립트 문법을 사용할 수 있고, 자바의 JSP와 문법이 상당히 유사하기 때문에 Pug의 HTML문법 변화에 적응하기 힘든 사람이 사용하기 편리하다.

일단 사용하기에 앞서, app.js의 view engine을 pug에서 ejs로 바꿔준다.

• app.js

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

추가로, ejs 패키지도 설치해야한다.

npm i ejs

해당 명령어를 콘솔창에 입력해서 설치해주면 끝~

변수

EJS에서 변수는 <%= %> 로 감싸준다.

    <h1><%= title %></h1>
    <p>welcome to</p>
    <button class="<%= title %>" type ="submit"> 전송
    </button>
    <input placeholder="<%= title +'연습' %>">

내부 변수 선언은 <% %> 안에 적어주면 된다.

    <%
        var node = 'Node.js';
        var js = 'Javascript';
    %>

또, HTML을 이스케이프 하고 싶지 않다면 <%- %>으로 감싸준다.

<p><%= '<strong>이스케이프</strong>'%></p>
<p><%- '<strong>이스케이프</strong>'%></p>

반복문과 조건문

반복문,조건문 또한 <% %> 안에 써주면 된다. for 이나 while 같은 반복문을 그대로 작성 해 주면 되고, 조건문은 if~else 문이나 case 문을 그대로 작성 해 주면 된다.

    <ul>
        <% var fruits = ['사과','배','오렌지'] %>
        <% for(var i=0; i<fruits.length; i++) { %>
            <li> <%= fruits[i] %></li>
        <% } %>
    </ul>

include

HTML 파일을 포함하려면 <%- include(파일 경로, 데이터)%>를 작성 해 주면 된다.