EJS Include란?

ejs란?

EJS란? Embedded JavaScript Template의 약자로써 NodeJS와 Express에서 많이 사용하고 있는 템플릿 엔진입니다. 사용자 수가 많은 Jabe 템플릿은 HTML과 작성법이 많이 다른 반면에 ejs는 기존의 HTML 문법에 한..

eundol1113.tistory.com

ejs에 대한 개념 설명은 위 참고

Include

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

이럴 때 중복되는 코드를 하나하나 작성한다면 수정사항이 생길 때마다 해당하는 모든 코드를 찾아야 합니다.

따라서 템플릿을 이용하여 중복하는 코드를 모듈화 할 수 있습니다.

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

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');
});

일반적인 node 코드입니다.

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

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

<!-- 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>

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

템플릿 파일은 views 내에 .ejs 확장자로 생성합니다.

<!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>

main 페이지입니다.

각각의 템플릿이 들어갈 영역은 <% include "템플릿 파일 경로" %>와 같은 코드로 설정 해줍니다.

해당 경로에 있는 템플릿을 태그 영역 내부에 추가 해준다는 의미입니다.

<!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>

about 페이지입니다. main 페이지와 중간의 내용만 다를 뿐

header와 footer는 동일하기 때문에 include를 사용하여 모듈화 해줍니다.

[NodeJS] ejs include (Include Template)

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

blog.naver.com

'더 알아보기 > 개념' 카테고리의 다른 글

CSS 모듈화 (0)	2022.07.13
JS의 메모리 누수 (0)	2022.06.15
EJS란? (0)	2022.03.01
Git fork vs clone (0)	2022.02.05
옵셔널 체이닝 → ?. (0)	2022.02.05