ejs모듈은 템플릿 엔진 모듈 템플릿 엔진 모듈은 특정 형식의 문자열을 HTML 형식의 문자열로 변환하는 모듈
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var ejs = require('ejs');
var http = require('http');
var fs = require('fs');
http.createServer(function (request, response) {
fs.readFile('ejstest.ejs', 'utf8', function (error, data) {
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end(ejs.render(data));
});
}).listen(5000, function () {
console.log('Server Running...');
});
| cs |
서버 측 코드 간단한 구성
ejs페이지를 HTML 페이지로 바꾸어 제공하는 코드가 된다.
-> 이 부분을 해주는 메서드가 render()메서드가 된다.
ejs페이지를 HTML페이지로 변환하여 클라이언트에게 제공.
response.end(ejs.render(data));
이 부분에서 data를 넘기지 않는다면 서버에 접속을 할 수가 없다.
1
2
3
4
5
6
|
<% var name = 'Gallery Jung'; %>
<h1><%= name %></h1>
<p><%= 10 * 11 %></p>
<% for (var i = 0; i < 10; i++) { %>
<h3>Result is <%= i %></h3>
<% } %>
| cs |
클라이언트 측 코드는 더 간단. 확장자를 .ejs로 하면 된다.
먼가 ejs는 %가 많이 들어가서 그런지 동글동글 해보이네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
for문에서 10번을 반복하여 출력을 해준다. 그냥 C언어랑 같은 문법..
ejs의 특수 태그
<% code %> 자바스크립트 코드릴 입력
<%= value %> 데이터를 출력
다음과 같이 소스코드가 바뀌어 있다.
| cs |
이 처럼 node에서 변수를 넘겨줄수 있다.
1
2
3
4
5
|
<h1><%= name %></h1>
<p><%= description %></p>
<% for (var i = 0; i < 10; i++) { %>
<h3>Result is <%= i %></h3>
<% } %>
| cs |
이렇게 node에서 받은 데이터를 출력을 할수 있다.
출력된 페이지의 소스 부분이다. 앞 부분이랑 다른건 처음에 name과 description이 출력되는거 빼면 다른 부분이 없다.
보통 ejs에서는 변수를 node에서 받아서 사용하게 된다.
그렇다면 ejs 같은 템플릿 엔진은 어디에 사용이 될까?
이러한 템플릿 엔진은 동적 웹 피이지를 생성할 때 사용이 된다..
많이 쓰이는 HTML페이지 소스 코드는 한번 생성되면 절대 변화가 일어나지 않는다.
즉, 서버측은 항상 같은 페이지를 클라이언트에게 보여주게 된다.
하지만 템플릿 엔진을 사용하게 되면 서버는 클라이언트에게 다른 페이지를 제공을 할 수 있다.
댓글
댓글 쓰기