EJS란?

혼자 개인사이트를 작업하면서 프론트엔드분들이 없어 내가 배웠던 프론트엔드 기술과 백엔드 기술을 한꺼번에 적용하기 위해서 node.js에서 사용하는 ejs로 작업하기로 했다.

ejs란?

ejs는 Embedded Javascript Template의 약자로 Node.js에서 사용하는 템플릿 뷰 엔진이다. 가장 큰 특징은 쉬운 문법으로 html내에서 인자로 넘겨받은 변수를 사용할 수 있다는 것이다. ejs는 기존의 HTML 문법에 <% %>를 사용하여 기존 문법에 크게 벗어나지 않아 더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행할 수 있는 장점이 있다.

ejs 문법

변수 출력 : <%= ... %>

ex)

<div><%=nickname %></div>

<div class="loginId">
    <% if(nickname){%>
       <div class="id">
          <span><%=nickname%></span>님 환영합니다
       </div>
          <% } else {%>
          <div class="navi"><a href="/login">로그인</a></div>
          <%}%>
</div>

변수출력과, if/else 조건문을 통해 출력하는 법이 있다.

---

Node.js 와 연동

axios를 이용해서 데이터를 프론트엔드에서 백엔드로 보냈다.
ex) POST방식으로 전송 <함수명 add()를 클릭했을때>

function add() {
  const title = document.getElementById('title').value;
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const phone = document.getElementById('phone').value;
  axios
    .post('/health', {
      name,
      title,
      email,
      phone,
    })
    .then((res) => {
      div.innerText = res.data.name;
      div.innerText = res.data.title;
      div.innerText = res.data.email;
      div.innerText = res.data.phone;
    });
}