본문 바로가기
개발

[NodeJS] ejs include (Include Template)

by 마스터누누 2017. 4. 18.
728x90
반응형

ejs include (Include Template)



작업을 하다보면 header나 footer등의 내용이 중복되는 경우가 발생한다.

중복되는 코드를 하나하나 다 써준다면 

변화가 생길때마다 해당하는 모든 코드를 찾아 고쳐야한다.

따라서 템플릿을 이용해서 이렇게 중복되는 코드를 모듈화하여 사용할 수 있다.

템플릿 엔진으로는 ejs를 사용한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var express = require('express');
var app = express();
 
app.listen(3000, function(){
  console.log("server start on port 3000");                                                                  
})
 
app.set("view engine", "ejs");
 
// index page
app.get('/', function(req, res) {
    res.render('main');
});
 
// about page
app.get('/about', function(req, res) {
    res.render('about');
});
cs
 

일반적인 node 코드이다.

3000번 포트로 서버를 열고 템플릿 엔진에 대한 세팅을 해준다.

결과를 비교하기 위해 main과 about, 2개 루트를 설정한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- views/head.ejs -->
 
<meta charset="UTF-8">
<title>Super Awesome</title>
 
<!-- views/header.ejs -->
 
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>
                EJS Is Fun
            </a>
        </div>
 
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
      
    </div>
</nav>
 
<!-- views/footer.ejs -->
 
<p class="text-center text-muted">© Copyright 2014 The Awesome People</p>
cs


head, header, footer에 해당하는 3개의 템플릿을 작성한다.

템플릿 파일은 views 안에 생성한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./head %>
</head>
<body class="container">
 
    <header>
        <% include ./header %>
    </header>
 
    <main>
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>                                                        
        </div>
    </main>
 
    <footer>
        <% include ./footer %>
    </footer>
 
</body>
</html>
cs


main 페이지이다.

각각의 템플릿이 들어갈 영역을 


<% include "템플릿 파일 경로" %>


위와 같은 코드로 설정해준다

해당 경로에 있는 템플릿을 태그 영역 내부에 추가해준다는 뜻이다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./head %>
</head>
<body class="container">
 
    <header>
        <% include ./header %>
    </header>
 
    <main>
        <div class="row">
            <div class="col-sm-8">
 
                <div class="jumbotron">
                    <h1>This is great</h1>
                    <p>Welcome to templating using EJS</p>                                                 
                </div>
 
            </div>
            <div class="col-sm-4">
 
                <div class="well">
                    <h3>Look I'm A Sidebar!</h3>
                </div>
 
            </div>
        </div>
    </main>
 
    <footer>
        <% include ./footer %>
    </footer>
</body>
</html>
cs


about 페이지 이다

main 페이지와 중간의 내용만 다를 뿐 header와 footer는 동일하다.




 



좌측이 main, 우측이 about 페이지이다.

동일한 header, footer를 가지고 있으며 내용이 다른것을 확인할 수 있다.


예제코드



반응형

'개발' 카테고리의 다른 글

[JSP] 톰캣의 기본포트가 이미 사용중 일 때  (0) 2017.04.18
[JSP] JDBC Driver를 찾을 수 없을 때  (0) 2017.04.18
[NodeJS] Passport - logout 처리  (0) 2017.04.18
[NodeJS] Passport - Ajax 기반의 인증 처리  (0) 2017.04.18
[NodeJS] Passport 기반 세션처리  (0) 2017.04.18

관련글

댓글

티스토리툴바