13강. EJS(Embedded JavaScript) 템플릿 엔진
이번 강의에서는 Express에서 가장 많이 사용하는 템플릿 엔진인 EJS를 배웁니다.
목표: HTML 안에서 JavaScript를 사용하여 동적인 웹페이지를 만들 수 있습니다.
1. EJS란?
EJS는 HTML 안에서 JavaScript를 사용할 수 있게 해주는 템플릿 엔진입니다.
기존 HTML
<h1>홍길동</h1>
EJS
<h1><%= name %></h1>
브라우저 출력
<h1>홍길동</h1>
2. EJS 설치
터미널
npm install ejs
또는
npm i ejs
3. 프로젝트 구조
project
│
├── index.js
├── package.json
│
├── public
│
└── views
└── index.ejs
4. Express에 EJS 등록
const express = require("express");
const app = express();
app.set("view engine","ejs");
이제 views 폴더의 .ejs 파일을 사용할 수 있습니다.
5. 첫 번째 EJS 페이지
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EJS</title>
</head>
<body>
<h1>Hello EJS</h1>
</body>
</html>
6. render()
app.get("/",(req,res)=>{
res.render("index");
});
실행
http://localhost:3000
↓
Hello EJS
7. 변수 출력
Node.js
app.get("/",(req,res)=>{
res.render("index",{
name:"커사맨"
});
});
EJS
<h1><%= name %></h1>
출력
커사맨
8. 여러 개의 데이터 전달
app.get("/",(req,res)=>{
res.render("index",{
name:"커사맨",
age:50,
job:"AI 크리에이터"
});
});
EJS
<h2><%= name %></h2>
<p><%= age %></p>
<p><%= job %></p>
9. 조건문(if)
Node.js
res.render("index",{
login:true
});
EJS
<% if(login){ %>
<h2>로그인 성공</h2>
<% }else{ %>
<h2>로그인 필요</h2>
<% } %>
10. 반복문(for)
Node.js
res.render("index",{
fruits:["사과","바나나","포도"]
});
EJS
<ul>
<% for(let i=0;i<fruits.length;i++){ %>
<li><%= fruits[i] %></li>
<% } %>
</ul>
결과
사과
바나나
포도
11. forEach()
더 많이 사용하는 방법입니다.
<ul>
<% fruits.forEach(function(item){ %>
<li><%= item %></li>
<% }) %>
</ul>
12. HTML 태그 출력
res.render("index",{
title:"<h1>Node.js</h1>"
});
기본 출력
<%= title %>
↓
<h1>Node.js</h1>
태그가 그대로 출력됩니다.
HTML로 출력
<%- title %>
↓
<h1>Node.js</h1>
실제 제목으로 표시됩니다.
13. Header/Footer 분리
실무에서는 공통 영역을 분리합니다.
views
│
├── partials
│ header.ejs
│ footer.ejs
│
└── index.ejs
header 포함
<%- include("partials/header") %>
footer 포함
<%- include("partials/footer") %>
14. 전체 예제
app.get("/",(req,res)=>{
res.render("index",{
title:"Node.js",
fruits:["사과","포도","수박"]
});
});
index.ejs
<h1><%= title %></h1>
<ul>
<% fruits.forEach(function(item){ %>
<li><%= item %></li>
<% }) %>
</ul>
15. 실습 1
이름 출력
res.render("index",{
name:"홍길동"
});
<h2><%= name %></h2>
16. 실습 2
회원 목록
res.render("index",{
users:["철수","영희","민수"]
});
<% users.forEach(function(user){ %>
<p><%= user %></p>
<% }) %>
17. 실습 3
로그인 여부
res.render("index",{
login:false
});
<% if(login){ %>
로그인 완료
<% }else{ %>
로그인 해주세요
<% } %>
18. 실무 프로젝트 구조
project
│
├── app.js
│
├── routes
│
├── controllers
│
├── models
│
├── public
│
└── views
│
├── partials
│ header.ejs
│ footer.ejs
│
├── member
│
├── board
│
├── admin
│
└── index.ejs
19. EJS 사용 이유
장점
HTML 작성이 쉽다.
JavaScript 문법 그대로 사용 가능
반복문 사용 가능
조건문 사용 가능
공통 레이아웃 관리 가능
20. 이번 강의 핵심 정리
문법 설명
npm install ejs EJS 설치
app.set("view engine","ejs") EJS 등록
res.render() EJS 페이지 출력
<%= %> 변수 출력(HTML 이스케이프)
<%- %> HTML 그대로 출력
<% %> JavaScript 코드 실행
include() 공통 파일 포함
실무 팁
EJS는 중소 규모 프로젝트나 관리자 페이지에서 여전히 많이 사용됩니다.
하지만 React, Vue 같은 프런트엔드 프레임워크를 사용하는 경우에는 EJS 대신 JSON API를 제공하고 프런트엔드에서 화면을 그리는 방식이 일반적입니다.
실습 미션
간단한 회원 목록 페이지를 만들어 보세요.
기능
제목 출력
회원 5명 반복 출력
로그인 여부에 따라 다른 메시지 표시
Header/Footer를 include()로 분리
예시 화면
회원 목록
- 홍길동
- 김철수
- 이영희
- 박민수
- 최지훈
로그인 완료
이번 강의에서는 Express에서 가장 많이 사용하는 템플릿 엔진인 EJS를 배웁니다.
목표: HTML 안에서 JavaScript를 사용하여 동적인 웹페이지를 만들 수 있습니다.
1. EJS란?
EJS는 HTML 안에서 JavaScript를 사용할 수 있게 해주는 템플릿 엔진입니다.
기존 HTML
<h1>홍길동</h1>
EJS
<h1><%= name %></h1>
브라우저 출력
<h1>홍길동</h1>
2. EJS 설치
터미널
npm install ejs
또는
npm i ejs
3. 프로젝트 구조
project
│
├── index.js
├── package.json
│
├── public
│
└── views
└── index.ejs
4. Express에 EJS 등록
const express = require("express");
const app = express();
app.set("view engine","ejs");
이제 views 폴더의 .ejs 파일을 사용할 수 있습니다.
5. 첫 번째 EJS 페이지
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EJS</title>
</head>
<body>
<h1>Hello EJS</h1>
</body>
</html>
6. render()
app.get("/",(req,res)=>{
res.render("index");
});
실행
http://localhost:3000
↓
Hello EJS
7. 변수 출력
Node.js
app.get("/",(req,res)=>{
res.render("index",{
name:"커사맨"
});
});
EJS
<h1><%= name %></h1>
출력
커사맨
8. 여러 개의 데이터 전달
app.get("/",(req,res)=>{
res.render("index",{
name:"커사맨",
age:50,
job:"AI 크리에이터"
});
});
EJS
<h2><%= name %></h2>
<p><%= age %></p>
<p><%= job %></p>
9. 조건문(if)
Node.js
res.render("index",{
login:true
});
EJS
<% if(login){ %>
<h2>로그인 성공</h2>
<% }else{ %>
<h2>로그인 필요</h2>
<% } %>
10. 반복문(for)
Node.js
res.render("index",{
fruits:["사과","바나나","포도"]
});
EJS
<ul>
<% for(let i=0;i<fruits.length;i++){ %>
<li><%= fruits[i] %></li>
<% } %>
</ul>
결과
사과
바나나
포도
11. forEach()
더 많이 사용하는 방법입니다.
<ul>
<% fruits.forEach(function(item){ %>
<li><%= item %></li>
<% }) %>
</ul>
12. HTML 태그 출력
res.render("index",{
title:"<h1>Node.js</h1>"
});
기본 출력
<%= title %>
↓
<h1>Node.js</h1>
태그가 그대로 출력됩니다.
HTML로 출력
<%- title %>
↓
<h1>Node.js</h1>
실제 제목으로 표시됩니다.
13. Header/Footer 분리
실무에서는 공통 영역을 분리합니다.
views
│
├── partials
│ header.ejs
│ footer.ejs
│
└── index.ejs
header 포함
<%- include("partials/header") %>
footer 포함
<%- include("partials/footer") %>
14. 전체 예제
app.get("/",(req,res)=>{
res.render("index",{
title:"Node.js",
fruits:["사과","포도","수박"]
});
});
index.ejs
<h1><%= title %></h1>
<ul>
<% fruits.forEach(function(item){ %>
<li><%= item %></li>
<% }) %>
</ul>
15. 실습 1
이름 출력
res.render("index",{
name:"홍길동"
});
<h2><%= name %></h2>
16. 실습 2
회원 목록
res.render("index",{
users:["철수","영희","민수"]
});
<% users.forEach(function(user){ %>
<p><%= user %></p>
<% }) %>
17. 실습 3
로그인 여부
res.render("index",{
login:false
});
<% if(login){ %>
로그인 완료
<% }else{ %>
로그인 해주세요
<% } %>
18. 실무 프로젝트 구조
project
│
├── app.js
│
├── routes
│
├── controllers
│
├── models
│
├── public
│
└── views
│
├── partials
│ header.ejs
│ footer.ejs
│
├── member
│
├── board
│
├── admin
│
└── index.ejs
19. EJS 사용 이유
장점
HTML 작성이 쉽다.
JavaScript 문법 그대로 사용 가능
반복문 사용 가능
조건문 사용 가능
공통 레이아웃 관리 가능
20. 이번 강의 핵심 정리
문법 설명
npm install ejs EJS 설치
app.set("view engine","ejs") EJS 등록
res.render() EJS 페이지 출력
<%= %> 변수 출력(HTML 이스케이프)
<%- %> HTML 그대로 출력
<% %> JavaScript 코드 실행
include() 공통 파일 포함
실무 팁
EJS는 중소 규모 프로젝트나 관리자 페이지에서 여전히 많이 사용됩니다.
하지만 React, Vue 같은 프런트엔드 프레임워크를 사용하는 경우에는 EJS 대신 JSON API를 제공하고 프런트엔드에서 화면을 그리는 방식이 일반적입니다.
실습 미션
간단한 회원 목록 페이지를 만들어 보세요.
기능
제목 출력
회원 5명 반복 출력
로그인 여부에 따라 다른 메시지 표시
Header/Footer를 include()로 분리
예시 화면
회원 목록
- 홍길동
- 김철수
- 이영희
- 박민수
- 최지훈
로그인 완료
#13강. EJS(Embedded JavaScript) 템플릿 엔진