전영호의 개발 블로그

EJS 템플릿 엔진 설치

ejs : node 에서 사용하는 변수를 html 파일에서 사용할 수 있게 보내준다 ( if 문, for 문 등등... )

ejs 파일은 html 코드 내에서 if, for 등의 기능을 사용할 수 있게 해준다.

실습 예제

예제 풀이

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

app.set("views", "./views");
// (./views)에서 기능을 찾고
app.set("view engine", "ejs");
// 기능 중 ejs 라는 기능을 사용하겠다

app.get("/", (req, res) => {
  res.render("index");
  // index.ejs 파일을 불러서 response(응답)
});

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

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

app.listen(3000, () => {
  console.log("3000port 서버 구동");
});

main03.js

<h1>index</h1>
<a href="/login">login</a>
<a href="/logout">logout</a>

index.ejs

<h1>login 페이지 입니다</h1>
<a href="/">index</a>
<a href="/logout">logout</a>

login.ejs

<h1>logout 페이지 입니다</h1>
<a href="/">index</a>
<a href="/login">login</a>

logout.ejs

ejs 파일을 불러올때 값을 전달하기

ejs 파일은 전달받은 키와 값을 <% %> 식 안에 표현하여 사용할 수 있다

<% %> 식 안에 변수를 선언할 수도 있고 <%= %> 를 사용하여 바로 표현할 수도 있다

실습 예제

예제 풀이

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

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/member", (req, res) => {
  context = {
    arr: ["홍길동", "20살", "산골짜기"],
    obj: { name: "김개똥", age: "30살", addr: "개똥별" },
    name: "고길동",
    age: "40살",
    addr: "마포구",
  };
  res.render("member", { context: context });
});

app.listen(3000, () => {
  console.log("3000port 서버 구동");
});

test01.js

<table border="1px">
  <thead>
    <th>이름</th>
    <th>나이</th>
    <th>주소</th>
  </thead>
  <tr>
    <td><%=context.arr[0]%></td>
    <td><%=context.arr[1]%></td>
    <td><%=context.arr[2]%></td>
  </tr>
  <tr>
    <td><%=context.obj.name%></td>
    <td><%=context.obj.age%></td>
    <td><%=context.obj.addr%></td>
  </tr>
  <tr>
    <td><%=context.name%></td>
    <td><%=context.age%></td>
    <td><%=context.addr%></td>
  </tr>
</table>

member.ejs

ejs 파일에 for 문 사용하기

실습 예제 1

예제 풀이 1

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

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/for_quiz", (req, res) => {
  context = {
    "rank" : [
        [1,2,3,4,5],
        ["육","7","팔","구","10"],
        [11,12,13,14,15]
    ]
  };
  res.render("for_quiz", { context: context });
});

app.listen(3000, () => {
  console.log("3000port 서버 구동");
});

test02.js

<h1>단순 for으로 출력</h1>
<% for(let i=0; i < context.rank.length; i++) {%>
  <%=context.rank[i]%> <br />
  <%}%>

<hr />

<h1>이중 for으로 출력</h1>
<table border="1px">
    <%for(let i=0; i < context.rank.length; i++) {%>
        <tr>
        <%for(let j=0; j < context.rank[i].length; j++) {%>
            <td>
                <%=context.rank[i][j];%>
            </td>
        <%}%>
        </tr>
    <%}%>
</table>

for_quiz.ejs

실습 예제 2

예제 풀이 2

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

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/url", (req, res) => {
  context = {
    url: [
      { 네이버: "https://www.naver.com/" },
      { 구글: "https://www.google.co.kr/" },
      { 다음: "https://www.daum.net/" },
    ],
  };
  res.render("url", context);
});

app.listen(3000, () => {
  console.log("클라이언트 접속");
});

test03.js

<%for(let i=0; i < url.length; i++){%>
    <li>
        <a href="<%=Object.values(url[i])%>"><%=Object.keys(url[i])%></a>
    </li>
<%}%>

url.ejs