최대 1 분 소요



📖 ejs란?

템플릿 엔진이란, 템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈입니다. Express에서 인기리에 사용되고 있는 Jade 템플릿 엔진은 기존의 HTML에 비해 작성법이 아주 다른데, 그에 비해 EJS는 똑같은 HTML에서 <%%>를 사용해 서버의 데이터를 사용하거나 코드를 실행할 수 있습니다.



📖 EJS에서 알아야 하는 2가지 Point

  • <%자바스크립트 코드%>
  • <%출력 할 자바스크립트 객체%>
  • 바로 여기서 자바스크립트 객체를 router에서 받아 올수도 있습니다.

VIEW로 데이터 넘기기

module.exports = function(app, fs) {
  app.get('/', function(req, res) {
    res.render('index', {
      title: 'ejs공부'
      length: 5
    })
  });
}

JSON 데이터를 render 메소드의 두번째 인자로 전달함으로서 페이지에서 데이터를 사용가능하게 됩니다.

VIEW에서 데이터 접근 및 루프코드 실행


//Views/index.ejs
<html>
  <head>
  <title><%= title %></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <h1>Loop it!</h1>
    <ul>
        <% for(var i=0; i<length; i++){ %>
            <li>
                <%= "LOOP" + i %>
            </li>
        <% } %>
    </ul>
  </body>
</html>

출력해보면 title의 값을 ejs공부 받게되고 length의 값으로 5 를 받아왔습니다.

댓글남기기

참고

최대 1 분 소요