1. 뷰 엔진 EJS 템플릿

1. 무엇인가?

EJS 템플릿은 태그를 활용, 백엔드에서 렌더링 시 넘겨준 변수를 <%%> 혹은 <%=%>등의 태그로 간단히 활용할 수 있게 해주며, 또한 HTML 내에서 간단한 JS코드를 사용할 수 있게 해준다.

2. 왜 활용했는가?

Node.js를 배웠던 생활코딩에서는 백엔드 즉 서버단에서 html코드를 넣어 렌더링하는 형태였다. 예를 들면

exports.home = function(request, response){
    var title = 'Welcome!';
    var description = 'Hello, Node.js!';
    // template.js로 db에서 긁어온거 건네줌
    var list = template.list(request.list);
    var html = template.HTML(title, list,
      `<h2>${title}</h2><p>${description}</p>
      <img src="/images/hello.jpg" style="width:500px; display:block; margine-top=10px"/>
      `,
      `<a href="/topic/create">create</a>`,usermgmt.authStatusUI(request, response)
    );
    response.send(html);
};

이와 같은 형태로 작성되었다.
하지만 학교에서 배웠던 MVC패턴상에서 View가 분리되지 못하는 모습이라고 생각했다. 따라서 EJS템플릿을 활용하면 Controller에서 전달해 주는 변수들을 간단히 활용할 수 있고, Controller와 View를 편리하게 분리할 수 있다고 생각했다.

3. 어떻게 활용했는가?

먼저, View 파일들의 모습이다. 위에서 보다시피 View를 완전히 분리 성공한 모습을 볼 수 있다. 이 중 index.ejs. 즉 메인 화면을 예시로 실제 활용한 모습을 작성하겠다.

...
<main class="container">
    <%for(var i=0;i<Object.keys(post).length;i++) {
      if(i % 2 == 0){
      %><div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading"><%=post[i].title%></h2>
        <p class="lead"><%=post[i].content%></p>
      </div>
      <div class="col-md-5">
        <img src="<%=post[i].image_src%>" crossorigin="anonymous" class="img-fluid" width="100%" height="100%">
      </div>
    </div>
    <hr class="featurette-divider">
    <%}
    else{
      %><div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading"><%=post[i].title%> </h2>
        <p class="lead"><%=post[i].content%></p>
      </div>
      <div class="col-md-5 order-md-1">
        <img src="<%=post[i].image_src%>" crossorigin="anonymous" class="img-fluid" width="100%" height="100%">
      </div>
    </div>
    <hr class="featurette-divider">
    <%
    }
  }%>

  </main>
...

index.ejs

const indexmodel = require('../model/indexpost');

const indexView = async(req, res) => {
    post = await indexmodel.aboutmeAll();
    adminLogin = false;
    if(req.user === 'admin'){
        adminLogin = true;
    }
    // 홈페이지 소개글 전부 select해서 index.ejs로 pass
    res.render("index", {post, adminLogin});
    // render
};
...

boardController.js

위의 경우, boardController.js에서 자기소개 글에 해당하는 DB객체를 indexmodel을 활용하여 받은 후, render시 DB객체를 넘기게 되어있다.
ejs가 넘겨받은 객체(post)를 활용하여, 메인 게시판에서 몇 번 째 글이냐에 따라 좌 혹은 우측 정렬을 위해 for문과 if문을 html내에서 <% %> 태그로간단히 활용할 수 있었다.
또한 <%= %> 태그를 활용, post객체에 손쉽게 접근할 수 있는 모습을 볼 수 있다.

EJS를 활용, 이런 화면을 손쉽게 구성할 수 있었다.