- 외부 모듈 설치 방법
$npm install 모듈명
1. ejs 모듈
템플리 엔진 모듈로써 특정 형식의 문자열을 HTML 형식의 문자열로 변환함
- 모듈 설치
- ejs 모듈 Methodbaesunghan:~/Documents/workspace/nodejs$npm instal ejsejs@2.3.1 node_modules/ejsbaesunghan:~/Documents/workspace/nodejs$
. render : ejs 문자열을 HTML 문자열로 변환한다.
- ejs 에서 사용되는 특수 태그
. <% Javascript code %> : javascript code를 기술, ex) <% var name = 'Toven' %>
. <%= value %> : 변수값을 출력, ex) <%= name %>
- 특수 태그로 데이터 전달 : 아래와 같이 render에 데이터 값 입력
response.end(ejs.render(ejsdata, {
name: 'Toven',
desc: 'Ejs Module Sample'
}));
- 사용 예
2. jade 모듈baesunghan:~/Documents/workspace/nodejs$cat ejs.js// 모듈을 추출합니다.var http = require('http');var ejs = require('ejs');// 웹 서버를 생성 및 실행합니다.http.createServer(function (request, response) {var ejsdata = ejsMsg();response.writeHead(200, {'Content-Type': 'text/html'});response.end(ejs.render(ejsdata, {name: 'Toven',desc: 'Ejs Module Sample'}));}).listen(18080, function() {console.log('Server running at http://127.0.0.1:18080/');});var ejsMsg = function() {var str = '';str = str + '<h1><%= name %></h1>';str = str + '<p><%= desc %></p>';str = str + '<hr/>';str = str + '<% for(var i=0; i<10; i++) { %>';str = str + ' <h2>Count <%= i %> </h2>';str = str + '<% } %>';return str;}baesunghan:~/Documents/workspace/nodejs$
템플릿 엔진 모듈
- 모듈 설치
- jade 모듈의 Methodbaesunghan:~/Documents/workspace/nodejs$npm install jadejade@1.9.2 node_modules/jade├── character-parser@1.2.1├── void-elements@2.0.1├── commander@2.6.0├── mkdirp@0.5.0 (minimist@0.0.8)├── with@4.0.3 (acorn-globals@1.0.4, acorn@1.0.3)├── constantinople@3.0.1 (acorn-globals@1.0.4)└── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)baesunghan:~/Documents/workspace/nodejs$
. compile() : jade 문자열을 HTML 문자열로 바꿀수 있는 함수 생성
- .jade 파일 작성 예
- .jade 파일을 읽어서 client로 출력하는 예제baesunghan:~/Documents/workspace/nodejs$cat jadedata.jadedoctype htmlhtmlheadtitle Index Pagebody// JADE commenth1 Hello Jade!!!h2hra(href='http://wechatmanager.co.kr') Link Wechatmanagerbaesunghan:~/Documents/workspace/nodejs$
=> 실행 결과 생성 html tagbaesunghan:~/Documents/workspace/nodejs$cat jade.js// 모듈을 추출합니다.var http = require('http');var jade = require('jade');var fs = require('fs');// 웹 서버를 생성 및 실행합니다.http.createServer(function (request, response) {// jade 파일을 읽음fs.readFile('jadedata.jade', 'UTF-8', function(error, data) {console.log(data);var fn = jade.compile(data);response.writeHead(200, {'Content-Type': 'text/html'});response.end(fn());});}).listen(18080, function() {console.log('Server running at http://127.0.0.1:18080/');});baesunghan:~/Documents/workspace/nodejs$
- .jade 파일에 사용된 특수 기호
. - javascript : javascript 를 기술할 수 있음
. #{Value} : 데이터 출력
. = Value : 데이터 출력
- 특수 Tag 사용 .jade 파일 예
- 특수 기호에 데이터를 대치해서 출력하는 예baesunghan:~/Documents/workspace/nodejs$cat jadedata1.jadedoctype htmlhtmlheadtitle Index Pagebody// JADE commenth1 Hello #{name}h2= deschr// 자바스크립터 기술- for(var i=0; i<10; i++) {pa(href='http://wechatmanager.co.kr') Link Wechatmanager- }baesunghan:~/Documents/workspace/nodejs$
=> 실행 결과baesunghan:~/Documents/workspace/nodejs$cat jade.js// 모듈을 추출합니다.var http = require('http');var jade = require('jade');var fs = require('fs');// 웹 서버를 생성 및 실행합니다.http.createServer(function (request, response) {// jade 파일을 읽음fs.readFile('jadedata1.jade', 'UTF-8', function(error, data) {console.log(data);var fn = jade.compile(data);response.writeHead(200, {'Content-Type': 'text/html'});response.end(fn({name:'Teoven',desc:'Jade Testing'}));});}).listen(18080, function() {console.log('Server running at http://127.0.0.1:18080/');});baesunghan:~/Documents/workspace/nodejs$
==> "/자바스크립터 기술" 한글이 깨짐
==> readFile에서 encoding을 "EUC-KR"로 변경하면 다음 오류 발생함, 확인해보니 encoding은 "ascii", "utf8", "base64"만 가능함.
===> 해결방법, response.writeHead에 다음과 같이 설정baesunghan:~/Documents/workspace/nodejs$node jade.jsServer running at http://127.0.0.1:18080/fs.js:101throw new Error('Unknown encoding: ' + encoding);^Error: Unknown encoding: EUC-KRat assertEncoding (fs.js:101:11)at Object.fs.readFile (fs.js:252:3)at Server.<anonymous> (/Users/baesunghan/Documents/workspace/nodejs/jade.js:9:5)at Server.emit (events.js:110:17)at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:491:12)at HTTPParser.parserOnHeadersComplete (_http_common.js:111:23)at Socket.socketOnData (_http_server.js:343:22)at Socket.emit (events.js:107:17)at readableAddChunk (_stream_readable.js:163:16)at Socket.Readable.push (_stream_readable.js:126:10)
response.writeHead(200, {'Content-Type': 'text/html;charset=UTF-8'});
<출력결과>
