본문 바로가기
IT/node.js

node.js ejs 사용법

by 뉴코딩맨 2023. 5. 7.
Node.js는 서버 사이드 자바스크립트를 구현할 수 있는 도구이며, EJS는 Node.js에서 사용되는 템플릿 엔진 중 하나입니다. EJS는 Embedded JavaScript Templates의 약어로, HTML 템플릿을 사용할 수 있어 웹 개발에 효과적입니다.

 

 
EJS는 HTML과 유사한 문법을 사용합니다. HTML 템플릿 안에 <% %>와 같은 EJS 태그를 사용하여 서버 측 로직을 작성할 수 있습니다. EJS는 JavaScript 코드를 사용하여 동적 콘텐츠를 생성할 수 있기 때문에, 클라이언트와 서버 사이드에서 동일한 코드를 사용할 수 있어서 유지 보수가 용이합니다.
 
 

사용법

EJS를 사용하면 변수를 선언하고, 조건문과 반복문을 작성할 수 있습니다. 이를 통해 HTML 코드를 반복적으로 작성하지 않고도 동적 콘텐츠를 생성할 수 있습니다. 예를 들어, EJS를 사용하여 다음과 같이 반복문을 작성할 수 있습니다.
 
<ul>
    <% for(var i=0; i<fruits.length; i++) { %>
    <li><%= fruits[i] %></li>
    <% } %>
</ul>
 
위 코드에서는 fruits 배열의 모든 요소를 리스트로 출력합니다. EJS는 <%= %> 태그를 사용하여 변수를 출력합니다. 이를 통해 서버 측 데이터를 HTML 코드와 결합하여 동적으로 생성된 콘텐츠를 출력할 수 있습니다.
 
 
또한 EJS는 include 문을 사용하여 템플릿을 포함시킬 수 있습니다. 이를 통해 코드의 재사용성을 높일 수 있습니다. 예를 들어, 다음과 같이 템플릿 파일을 생성할 수 있습니다.
 
<!-- header.ejs -->
<header>
        <h1><%= title %></h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    	</nav>
</header>

 

 
<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <% include header %>
    <h2>Welcome to my site!</h2>
</body>
</html>
 
위 코드에서는 include 문을 사용하여 header.ejs 파일을 포함시켰습니다. 이를 통해 index.ejs 파일에서 중복 코드를 제거하고 코드의 가독성과 유지 보수성을 높일 수 있습니다.
 

'IT > node.js' 카테고리의 다른 글

BSON(Binary JSON)이란?  (0) 2023.05.12
MongoDB란?  (0) 2023.05.11
Node.js nodemon  (0) 2023.05.01
node.js express  (0) 2023.04.30
Node.js package.json  (0) 2023.04.29

댓글