Node.js - 템플릿 엔진 (EJS)

mingyu Lim·2024년 1월 4일

node.js

목록 보기

4/5

템플릿 엔진

사용자 동작에 따라 내용이 달라지는 동적인 콘텐츠를 보여주기 위해 필요한 템플릿 엔진
템플릿 엔진은 템플릿 파일을 만들고, 데이터베이스에서 가져온 자료를 템플릿 파일에 연결해줌

템플릿 파일: DB에서 가져온 데이터 중 어떤 값을 어느 위치에 넣을지 미리 만들어 놓은 폼
템플릿 엔진: 템플릿 파일을 만들고 DB에서 가져온 동적인 데이터를 템플릿 파일에 연결해주는 역할

템플릿 엔진(뷰 엔진) 설정

Node에서 앞으로 어떤 템플릿 엔진을 사용할 것인지 알려주는 과정

npm i ejs

app.js

// ejs view engine 세팅
app.set("view engine", "ejs");
app.set("views", "./views");

EJS 엔진 기본 사용법

컨트롤러에서 템플릿 파일로 값 넘기기 - res.render

res.render(ejs 파일, { 변수: 전송자료})

// getAll.ejs 파일에 User List라는 텍스트를 넘겨줄 때 heading 변수 사용
res.render("getAll", { heading: "User List"} );

템플릿 파일에서 동적인 콘텐츠 처리하기

ejs 태그: ejs 파일에서는 자료를 넘겨받을 위치를 표시하는 법

<%= 변수 %>
<% 자바스크립트 코드 %>
<%- HTML 코드 %>
  
<!-- heading 변수 값 표시 -->
  <%= heading %>
<!-- 자바스크립트 코드 -->
  <% if (age > 10) { %>
    <p> 나이 : <%= age%></p>
  <% } else { %>
    <p> 나이가 너무 어립니다. </p>
  <% } %>
 
 <!-- HTML 코드 삽입 -->
    <%- include('include/header') %>

예시

contactController.js

const getAllContacts = asyncHandler(async (req, res) => {
  // 전체 연락처 보기
  const contacts = await Contact.find();
  const users = [
    { name: "Kim", email: "kim@abc.com", phone: "12345" },
    { name: "Lim", email: "Lim@abc.com", phone: "12341235" },
  ];

  // getAll.ejs에 user 내용 전달
  res.render("getAll", { users: users });
});

getAll.ejs

	<ul>
      <% users.forEach( user => { %>
      <li><%= user.name %></li>
      <li><%= user.email %></li>
      <li><%= user.phone %></li>
      <% }); %>
    </ul>

localhost:3000 결과 값

정적인 파일 연결

웹에서 사용하는 css, js파일, 이미지 등 -> 별도의 폴더에 모아놓고 사용
주로 public 폴더에 express.static 함수를 사용해서 연결

작업 폴더에 public 폴더 만들고
public 안에 css,js 등 각 폴더를 만들고, 각 폴더에 맞게 넣어준다.
(ex: public/css/style.css)
app.js에 정적인 파일이 어디있는지 추가

app.js

...

app.use(express.static("./public"));

EJS파일 반복 사용 모듈화

헤더와 푸터 같이 모든 페이지에서 공통으로 사용되는 태그들을 모듈화 시켜서 코드의 반복을 줄일 수가 있다.

<%- include("파일 주소")%>

예시

index.ejs (include 사용전)

<!DOCTYPE html>
<html lang="ko">
  <!-- header -->
  <head></head>
  <body>
    <main></main>
  </body>
  <!-- footer -->
</html>

index.ejs (사용 후)

<!DOCTYPE html>
<html lang="ko">
  <!-- header -->
  <%- include("./include/_header")%>
  <body>
    <main></main>
  </body>
  <!-- footer -->
<%- include("./include/_footer")%>

위와 같이 공통된 부분들을 따로 파일로 만들어 모듈화를 한 후, include를 이용해 코드의 반복을 줄일 수가 있다.

실습

contactController.js

const getAllContacts = asyncHandler(async (req, res) => {
  // 전체 연락처 보기
  const contacts = await Contact.find();
 
  // getAll.ejs에 user 내용 전달
  res.render("index", { contacts: contacts });
});

index.ejs

<%- include("./include/_header")%>

<!-- Main -->
<main id="site-main">
  <div class="button-box">
    <a href="#" class="btn btn-light"
      ><i class="fa-solid fa-user-plus"></i>연락처 추가</a
    >
  </div>

  <table class="table">
    <thead>
      <tr>
        <th>이름</th>
        <th>메일 주소</th>
        <th>전화번호</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <% contacts.forEach( contact => { %>

      <tr>
        <td><%= contact.name%></td>
        <td><%= contact.email%></td>
        <td><%= contact.phone%></td>
        <td>
          <a href="#" class="btn update" title="수정">
            <i class="fas fa-pencil-alt"></i>
          </a>
          <a href="#" class="btn delete" title="삭제">
            <i class="fas fa-times"></i>
          </a>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table>
</main>
<!-- /Main -->
<%- include("./include/_footer")%>