Node.js

Node.js - ejs

J-non 2024. 6. 30. 20:35

<목차>

1. ejs란?

2. 사용법

 

 

1. ejs란?

ejs는 Embedded JavaScript Template의 약어로 서버사이드 템플릿 엔진이다.

html 파일과의 차이점은 script 태그 내부가 아닌 body 태그 내부에서 javascript 문법을 사용할 수 있다는 것.

 

템플릿 엔진이란?

지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어다. 쉽게 말해, 웹 애플리케이션에서 동적으로 HTML 페이지를 표시하기 위한 도구 중 하나라고 보면 된다.

 

 

ejs문법

<% %> : 자바스크립트의 코드가 들어가는 태그, 줄 바꿈이 생길 시 새로운 <% %>가 필요하다.

<% for(let i = 0; i < 5; i++) { %>
    <span>5번 반복</span>
<% } %>

 

<%= %> : 안에 들어있는 변수 값을 옮겨주는 태그

<% for(let i = 0; i < 5; i++) { %>
    <span><%= i + 1 %>번째 실행</span>
<% } %>

 

 

2. 사용법

express 환경에서 ejs를 사용하는 간단한 예시를 들어보자.

우선, ejs를 사용하기 위해 외부 노드 모듈인 express와 ejs를 설치해야 한다.

npm i express
npm i ejs

 

 

설치가 완료되었다면 express의 set메서드를 통해 사용할 view engine을 ejs로 설정하고, ejs파일 디렉터리 경로를 설정해줘야 한다.

const express = require("express");
const app = express();

// view engine을 ejs로 설정
app.set("view engine", "ejs");

// ejs 파일 디렉터리 경로 설정
app.set("views", "ejs파일 디렉터리 경로");

app.get("/", (req, res) => {
    res.render("ejs파일명", { 전달할 data });
});

// 예시

const dataArr = [{a: 1, b: 2}, {a: 2, b: 3}];

app.get("/", (req, res) => {
    res.render("ex", { dataArr });
});

 

<!-- ejs 예시 -->
<body>
    <% dataArr.forEach((el) => { %>
        a : <%= el.a %>, b : <%= el.b %>
    <% } %>
<body>