ejs, jade 외부모듈

ejs와 jade는 특수한 형태로 html 페이지를 생성해주는 외부모듈 라이브러리다.

 

 

예를 들어 ejs모듈 같은경우

jsp에서와 같은 <%= %>(데이터 출력), <% %>(자바스크립트 코드 입력) 같은 표현을 사용한다.

 

html같은 경우 정적인 페이지 이기 때문에 서버에서 받아오는 매번 바뀌는 동적인 데이터를 표현할 방법이 없다.

하지만 ejs를 이용하면 동적 데이터를 웹페이지에 나타낼 수 있다.

 

 

사용방법은 우선 설치를 해야한다.(CMD에서)

>npm install ejs

>npm install jade

모듈이 잘 설치되었는지 확인한다.

>npm list

 

 

인터넷이나 책을 보면 바로 require('ejs')라는 형식으로 바로 모듈을 사용하지만 본인은 오류가 나서 직접 로컬 프로젝트 폴더에 라이브러리를 옮겨서 사용했다.

 

 

 

간단하게 테스트를 해봤다.

post_test.ejs

<form id="forms" method="post">

아이디<input type="text" name="id" value="" />

비밀번호<input type="password" name="pw" value="" />

<input type="submit" />

</form>

<%= byte %>

<br>

<%= 5 * 2 %>

 

 

server.js

var http = require('http'); 
var fs = require('fs'); 
var ejs = require('./ex_module/ejs'); 

console.log("현재 폴더 위치 : " + __dirname);  
var server = http.createServer(function(request,response){ 
    if(request.method === 'GET'){ //GET 요청시 
        fs.readFile('./jspFile/post_test.ejs','utf-8', function(error, data){ 
            response.writeHead(200, "text/html"); 
            response.end(ejs.render(data,{byte : '8bit', port : 7777}));
            //ejs의 render함수로 ejs파일의 데이터를 집어넣으면 html형식으로 변환된다. 
            //두번째 매개변수에는 함께 전달할 데이터를 생성할 수 있다. 필요없으면 매개변수 안 넣어도 됨 
        }); 
    }else if(request.method === 'POST'){ //POST 요청시
        request.on('data', function(data){ 
            response.writeHead(200, "text/html"); 
            response.end('<h1>' + data + '</h1>');
        }); 
    } 
     
}); 
server.listen(7777);

GET 요청시 화면

POST 요청시 화면