템플릿 엔진 ejs

Jinno·2022년 8월 10일
0

Express

목록 보기
7/11

1. ejs 설치
npm install ejs


2. index.js에 사용 설정

//index.js
app.set('view engine', 'ejs');


3. ejs 파일 생성

  • html과 똑가은데 확장자를 '.ejs'로 저장
  • 주의사항: 'views'라는 폴더를 만들고, 그 안에 생성


4. ejs 사용법


// 값 가져오기
<h2><%= user.name %></h2>

// 문법 사용
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>
  
// 다른 ejs 삽입. 예를 들면 nav var
<%- include('nav.ejs', {active:'edit'}) %>
  • 값 가져오기 : <%= %>
  • 문법사용 : <% %>
  • 다른 ejs 파일 사용: <%- %>


5. js에서 ejs로 보내기

//index.js file

// list.ejs 파일로 posts라는 변수에 담아서 result를 보내라
res.render('list.ejs', {posts: result});        


6. js에서 ejs로 보내고, 받아서 출력하는 예시

app.get('/list', function (req, res) {
    db.collection('post').find().toArray(function (error, result) {        
        res.render('list.ejs', {posts: result});        
    });
});
  • list.ejs 파일로 post collection의 모든 내용을 posts라는 변수에 담아서 전달
<!-- views/list.js 파일 -->
 <div class="container">
      <ul class="list-group">        
        <% for (var i=0; i<posts.length; i++) { %>              
          <li class="list-group-item">
            <p>post no: <%= posts[i]._id %></p> 
            <h4><a href="/detail/<%= posts[i]._id%>"><%= posts[i].name %></a></h4>
            <p>due: <%= posts[i].date %></p>                  
          </li>        
        <% } %>
      </ul>
    </div>
  • <%=posts[i].name%>, <% for (var i=0; i<posts.length; i++) { %> 로 ejs 사용해서 출력
profile
Innovation, 기록용

0개의 댓글