[Node.js] 6. 외부 웹 모듈 - Node.js 강좌

Chapter 6. 외부 웹 모듈

 이 장에서 Node.js가 기본적으로 내장하고 있지 않아 일반 개발자가 만들어 배포한 외부 모듈을 살펴볼 것입니다.

 이 장에서는 NPM(Node Package Manager)를 이용하여 EJS 모듈, Jade 모듈처럼 웹과 관련된 모듈을 살펴봅니다.

 npm install ejs

 npm install jade 

 각각 cmd 창에서 수행해주세요.

 

1. EJS 모듈

 EJS 모듈은 템플릿 엔진 모듈입니다. 

 템플릿 엔진 모듈은 특정한 형식인 파일로부터 HTML 페이지를 생성하는 모듈을 의미합니다.

1-1. EJS 모듈의 메서드

 EJS 모듈의 메서드

 - render(str[, option]) : EJS 페이지를 HTML 페이지로 바꿉니다.

 

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
 
http.createServer(function (request, response) {
    // EJSPage.js File Read
    fs.readFile('EJSPage.js', 'utf8', function(error, data) {
        response.writeHead(200, { 'Content-Type': 'text/html'});
        response.end(ejs.render(data));
    });
}).listen(52273, function() {
    console.log('Server running at http://127.0.0.1:52273');
});

EJSPage.js

 

<% var name = 'Yeonsu'; %>
 
<h1><%= name %></h1>
<p><%= 52 * 273 %></p>
<hr/>
 
<% for (var i = 0; i < 10; i++) { %>
    <h2>The Square of <%= i %> is <%= i * i %></h2>
<% } %>

변형된 소스

1-2. EJS 파일 형식

 EJS 파일의 특수 태그

 - <% CODE %> : 자바스크립트 코드를 입력합니다.

 - <%= Value %> : 데이터를 출력합니다.

1-3. 데이터 전달

 EJS 페이지에 데이터를 전달하는 방법은 굉장히 간단합니다. 

 render() 메소드의 두 번째 매개 변수에 전달하고자 하는 데이터를 입력하여 전달합니다.

 

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
 
http.createServer(function (request, response) {
    // EJSPage.js File Read
    fs.readFile('EJSPage.js', 'utf8', function(error, data) {
        response.writeHead(200, { 'Content-Type': 'text/html'});
        response.end(ejs.render(data, {
            name: 'Yeonsu',
            description: 'Hello EJS with Node.js... '
        }));
    });
}).listen(52273, function() {
    console.log('Server running at http://127.0.0.1:52273');
});

EJSPage.js

 

 
<h1><%= name %></h1>
<p><%= description %></p>
<hr/>
 

 

2. Jade 모듈

 

2-1. Jade 모듈의 메서드

 EJS 모듈과 마찬가지로 Jade 페이지를 HTML 페이지로 부꾸어 제공하는 서버를 만들어봅니다.

 Jade 모듈의 메서드

 - Compile(str) : Jade 문자열을 HTML 문자열로 바꿀 수 있는 함수를 생성합니다.

 

 
var http = require('http');
var fs = require('fs');
var jade = require('jade');
 
http.createServer(function (request, response) {
    fs.readFile('JadePage.jade', 'utf8', function(error, data) {
        var fn = jade.compile(data);
        
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.end(fn());
    });
}).listen(52273, function () {
    console.log('Server running at http://127.0.0.1:52273');
});

2-2. HAML 파일 형식

 EJS 페이지가 HTML 페이지 위에 특수한 태그를 몇 개 추가한 것처럼 Jade 페이지는 HAML 페이지 위에 특수한 태그를 몇 개 추가합니다.

 

 JadePage.jade

 

html
    head
        title Index Page
    body
        h1 Hello HAML & Jade
        h2 Palpit
        jr
        a(href = "http://zhfldi4.blog.me", data-test = "multiple Attribute") Go To Palpit's blog

코드 변형

 

 다음으로 HAML 페이지에서 div 태그를 쉽게 생성하는 법을 알아봅시다. 

 HAML에서는 CSS의 구분자 형태로 id와 class를 구분할 수 있습니다.

 

html
    head
        title Index Page
    body
        // Jade String
        #header
            h1 Hello HAML & Jade
            h2 Palpit
        hr
        .article
            a(href = "http://zhfldi4.blog.me", data-test = "multiple Attribute") Go To Palpit's blog

 

2-3. Jade 파일 형식

 Jade 파일의 특수 태그

 - - Code : 자바스크립트 코드를 입력합니다.

 - #{Value} : 데이터를 출력합니다.

 - = Value : 데이터를 출력합니다.

 

var http = require('http');
var fs = require('fs');
var jade = require('jade');
 
http.createServer(function (request, response) {
    fs.readFile('JadePage.jade', 'utf8', function(error, data) {
        var fn = jade.compile(data);
        
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.end(fn({
            name: 'Yeonsu',
            description: 'Hello Jade With Node.js.. !'
        }));
    });
}).listen(52273, function () {
    console.log('Server running at http://127.0.0.1:52273');
});

 

doctype html
html
    head
        title Index page
    body
        // Jade String
        h1 #{name} .. !
        h2= description
        hr
        - for (var i = 0; i < 5; i++) {
            p
                a(href = "http://zhfldi4.blog.me") Go To Yeonsu's Blog #{i}
        - }

 

 

* connect 모듈은 서적과 상당히 많은 부분이 바뀌어 진행을 하지 않겠습니다.

node 강좌, nodejs 강좌, node.js

 

 

 

* 이 포스팅은 '모던 웹을 위한 Node.js 프로그래밍'을 참고로 작성하였습니다.