https://jungwoon.github.io/node.js/2017/08/01/ejs/

먼저 템플릿 사용이유를 알아봅시다.

템플릿 예시) 네이버
템플릿 예시) 다음

첫 번째 사진과 두 번째 사진을 보시면 공통적인 부분이 있는데요. 바로 이런 것이 바로 템플릿입니다. 사용자에 요청에 따라 응답하는 내용은 다르지만 제목, ui 가 같은 걸 알 수 있습니다.   만약 html으로 만든다면 사용자에 요청에 따라 매번 다른 html 파일로 응답해야 합니다. html을 정적이고 html템플릿은 동적이라고 알 수 있습니다.

  이 글은 ejs 템플릿을 나타냅니다. ejs는 html을 안다면 아주 쉽게 알 수 있습니다. 
우선 npm install express --save , npm install ejs --save 로 추가해야합니다.

node.js 에서 플랫폼 사용법
<!DOCTYPE html> <html> <head> <% include ../part/header %> </head> <body> example ejs <footer> <% include ../part/footer %> </footer> </body> </html>
include ../part/header
<meta charset="utf-8"> <title>ejs example</title>
include ../part/footer
<a href="http://blog.naver.com/rwans0397">ejs 예제</a>

우선 각파트들을 나누어서 실제 출력파일들에게 include합니다. 이렇게 include 한다면 모든 페이지마다 일일이 선언할 필요가 줄어듭니다. 

이번엔 node.js에서 출력하는 법을 알아봅시다.

express 사용시 npm install express --save 를 해야합니다.
var express = require('express'); var app = express(); app.set('view engine','ejs'); app.set('views','./views'); app.get('/',function(req,res){ res.render('view'); });

익스프레스를 실행한뒤 set 메서드로 사용할 파일들을 설정합니다. html템플릿파일을 사용하려면  4번째줄과 5번째줄은 필수적입니다.
 익스프레스는 html템플릿파일에 기본주소값을 ./views 으로 지원합니다. 플랫폼을 랜더할때는  ./views를 생략가능합니다.
'/'으로 접속하면 res.render('view'); 을 실행합니다. res는 응답한다라는 뜻이고  render는 플랫폼을 웹페이지에 표시합니다.

이번엔  어떻게 동적으로 하는지 알아봅시다. 

//app.js var express = require('express'); var app = express(); app.set('view engine','ejs'); app.set('views','./views_ejs'); app.get('/',function(req,res){ res.render('view',{data:'kim'}); }); app.get('/next',function(req,res){ res.render('view',{data:'lee'}); }); app.get('/next/:id',function(req,res){ res.render('view',{data:'park'}); }); app.listen(3000,function(){ console.log('hello ejs'); });
//view.ejs <!DOCTYPE html> <html> <head> <% include ../part/header.ejs %> </head> <body> example ejs <h1><%= data %></h1> <footer> <% include ../part/footer %> </footer> </body> </html>

동적인 html템플릿은 어떻게 하는걸까요? 그건바로 언어로 합니다. ejs에는 자바스크립트로 합니다. <% %>,<%= %> 이 두가지 태그안에 자바스크립트 코드를 넣어 사용합니다. <% %>태그는 일반적인 자바스크립트를코드를 사용할때 사용합니다.

<% if(data) %> <li> <%= data %> <li>

위 코드를 보시면 알수있드시 <%= %> 태그는 res.render('view',data);에서 보낸 변수를 사용할때 사용합니다.

ejs 템플릿 실행 결과
ejs 템플릿 실행 결과
ejs 템플릿 실행 결과

이렇게 템플릿은 한개의 템플릿으로 여러 페이지를 나타낼수있습니다. 템플릿은 데이터베이스와 같이 사용하는데요 데이터베이스에 값을 조회해서 템플릿으로 보내 다양한 내용을 나타낼수있습니다.

ejs 템플릿 더 알아보기


저작자표시 비영리 변경금지

'frameworks > NodeJs' 카테고리의 다른 글

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)  (0) 2019.12.03
nodejs 로그인 로직  (0) 2019.03.12
npm 명령어  (0) 2019.01.08
PM2로 Nodejs어플을 서비스 가동시키기  (0) 2018.06.15
forever로 Nodejs어플을 서비스 가동시키기  (0) 2018.06.15

+ Recent posts

티스토리툴바