- 일반 개발자가 만들어 배포한 외부 모듈을 사용하고자 한다.
- Node.js는 npm(Node Package Manager)을 기반으로 모듈을 공유한다.
- npm을 활용해 ejs 모듈, jade 모듈처럼 웹과 관련된 모듈을 살펴보자
- 아래와 같이 콘솔 화면에 다음 명령을 입력한다.
[ 코드 - 외부 모듈의 사용 ]
//모듈을 추출한다.
var ejs = require('els');
var jade = require('jade');
1. ejs 모듈
[ ejs 모듈 설치 ]
$ npm install ejs
- 콘솔에서 명령어를 입력하여 설치한다.
- npm이 자동으로 외부 모듈을 다운로드하고 설치한다.
[ 코드 - ejs 모듈 추출 ]
//모듈을 추출한다.
var ejs = require('els');
- 내장 모듈 추출하는 방법과 동일하다.
- 템플릿 엔진 모듈이다.
- 템플릿 엔진 모듈이란?
- 특정 형식의 문자열을 HTML 형식의 문자열로 변환하는 모듈을 의미.
1.1 ejs 모듈의 메서드
- ejs 페이지를 HTML 페이지로 바꾸어 제공하는 서버를 만들어보자.
[ ejs 모듈의 메서드 ]
- render(string[, option]) : ejs 문자열을 HTML 문자열로 변경한다.
[ 코드 - ejs 모듈을 사용한 웹 페이지 제공 ]
//모듈을 추출한다.
var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
//서버를 생성하고 실행한다.
http.createServer(function (request, response) {
//ejsPage.ejs 파일을 읽는다.
fs.readFile('ejsPage.ejs', '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');
});
※ 꼭 인코딩해서 ejs 파일을 읽어야 한다.
[ 실행 - ejs 모듈을 사용한 웹 페이지 제공 ]
- ejsPage.ejs 파일에 아무런 내용도 입력하지 않았기 때문에 빈 페이지로 제공한다.
- 얼핏 보면 HTML 페이지와 차이점을 느끼지 못할 수 있지만 HTML 형식에서 살펴볼 수 없는 특수한 태그와 그 안에 자바스크립트 코드가 들어있는 것을 확인할 수 있다.
- <% Code %> : 자바스크립트 코드를 입력한다.
- <%= value %> : 데이터를 출력한다.
- 이 두가지 특수 태그는 render() 메서드를 사용하여 ejs 페이지를 HTML 페이지로 변환할 때 적절한 형태로 변환된다.
[ 코드 - ejsPage.ejs 파일 ]
<% var name = 'RintIanTta'; %>
<h1><%= name %></h1>
<p><%= 52 * 273 %></p>
<hr/>
<% for (var i = 0; i < 10; i++) { %>
<h2>The Square of <%= i %> is <%= i * i %></h2>
<% } %>
[ 실행 - ejs 모듈을 사용한 웹 페이지 제공 ]
[ 소스 보기 ]
- 웹 페이지를 소스보기하면 아래와 같이 ejs 코드가 HTML 코드로 변환된 것을 볼 수 있다.
| <h1>RintIanTta</h1> | |
| <p>14196</p> | |
| <hr/> | |
| <h2>The Square of 0 is 0</h2> | |
| <h2>The Square of 1 is 1</h2> | |
| <h2>The Square of 2 is 4</h2> | |
| <h2>The Square of 3 is 9</h2> | |
| <h2>The Square of 4 is 16</h2> | |
| <h2>The Square of 5 is 25</h2> | |
| <h2>The Square of 6 is 36</h2> | |
| <h2>The Square of 7 is 49</h2> | |
| <h2>The Square of 8 is 64</h2> | |
| <h2>The Square of 9 is 81</h2> | |
1.3 데이터 전달
- ejs 페이지에 데이터를 전달하는 방법을 알아보자.
- js 코드에서 render() 메서드의 두 번째 매개변수에 전달하고자 하는 데이터를 입력하면 된다.
- ejs 페이지에 name 속성과 description 속성을 전달한다.
- Node.js 코드에서 전달한 name과 description 변수가 출력된다.
- ejs 모듈과 같은 템플릿 엔진은 동적 웹 페이지를 생성할 때 사용한다.
- 템플릿 엔진 모듈
$ npm install jade
2.1 jade 모듈의 메서드
[ jade 모듈의 메서드 ]
complie(string) : jade 문자열을 HTML 문자열로 바꿀 수 있는 함수를 생성한다.
[ 코드 - jade 페이지를 HTML 페이지로 변환 ]
//모듈을 실행한다.
var http = require('http');
var jade = require('jade');
var fs = require('fs');
//서버를 생성하고 실행한다.
http.createServer(function (request, response) {
//jadePage.jade 파일을 읽는다.
fs.readFile('jadePage.jade', 'utf8', function (error, data) {
//jade 모듈을 사용한다.
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 jade 기본 형식
- 특수한 형태의 HTML 페이지 위에 특수한 태그를 몇 개 추가한 것.
- 특수한 평태의 HTML. 즉 jade 기본 형식에서 가장 중요한 것은 들여쓰기이다.
※ 들여쓰기는 탭과 띄어쓰기 중 한 가지 형태만 사용해야 한다. 두 가지 형태를 모두 사용하면 오류가 발생한다.
※ 태그에 속성을 여러 개 입력하고 싶을 때는 쉼표를 사용하여 구분한다.
[ 코드 - jadePage.jade 파일 - 속성 및 내용 입력 ]
html
head
title Index Page
body
h1 Hello jade .. !
h2 Lorem ipsum
hr
a(href="http://blog.movenext.co.kr", data-test="multiple Attribute") Go To MoveNext Blog
[ 실행 - Jade 형식 ]
[ 코드 - jadePage.jade 파일 - 주석 ]
doctype 5
html
head
title Index Page
body
//JADE String
h1 Hello jade .. !
h2 Lorem ipsum
hr
a(href="http://blog.movenext.co.kr", data-test="multiple Attribute") Go To MoveNext Blog
- doctype 5 : <!Doctype html> 로 변환된다.
- //JADE String : <!--JADE String-->으로 변환된다. (주석 처리)
[ 코드 - jagePage.jade 파일 - div 태그 생성
doctype 5
html
head
title Index Page
body
//JADE String
#header
h1 Hello jade .. !
h2 Lorem ipsum
hr
.article
a(href="http://blog.movenext.co.kr", data-test="multiple Attribute") Go To MoveNext Blog
- #header : id 속성이 header인 div 태그를 생성한다.
- .article : class 속성이 article인 div 태그를 생성한다.
[ 코드 - jade 기본 형식의 script 태그와 style 태그 ]
doctype 5
html
head
title Index Page
style
* { margin:0px; padding:0px; }
h1 {
color:Red;
}
script(src="http://code.jquery.com/jquery-1.10.2.js")
script
$(document).ready(function () {
var alpha = 10;
});
body
h1 Index Page
- style 속성을 정의하는 방법, 외부에 있는 js파일을 가져오는 방법, script를 직접 정의하는 방법을 보여주고 있다.
- Code : 자바스크립트 코드를 입력한다.
#{value} : 데이터를 출력한다.
= Value : 데이터를 출력한다.
[ 코드 - jade 코드로 전달한 데이터 ]
//모듈을 실행한다.
var http = require('http');
var jade = require('jade');
var fs = require('fs');
//서버를 생성하고 실행한다.
http.createServer(function (request, response) {
//jadePage.jade 파일을 읽는다.
fs.readFile('jadePage.jade', 'utf8', function (error, data) {
//jade 모듈을 사용한다.
var fn = jade.compile(data);
//출력한다.
response.writeHead(200, {'Content-Type' : 'text/html'});
response.end(fn({
name : 'RintIanTta',
description : 'Hello ejs With Node.js .. !'
}));
});
}).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});
- name 속성과 description 속성을 jade 페이지에 전달한다.
doctype html
html
head
title Index Page
body
//JADE String
h1 #{name} .. !
h2= description
hr
- for (var i = 0; i < 10; i++) {
p
a(href="http://blog.movenext.co.kr") Go To MoveNext Blog #{i}
- }
- #{name} : 전달받은 name 속성을 출력한다.
- = description : 전달받은 description 속성을 출력한다.
- - Code : 자바스크립트 코드를 입력한다.
3. 서버 실행 모듈
- 지금까지 살펴본 모듈은 지역 모듈로 자바스크립트 파일 내부에서 require() 함수로 추출했다.
- 지급부터 살펴볼 모듈은 전역 모듈로 터미널에서 곧바로 사용할 수 있는 모듈이다.
- 전역 모듈을 설치할 때는 g 옵션을 사용한다.
- npm install -g supervisor : 설치할 때 에러가 발생하여 터미널에서 root로 로그인하여 설치하니 정상적으로 설치되었다. (Mac)
- root 계정으로 로그인한 상태가 아니면 sudo 명령어를 이용하면 된다.(아래에 있음)
3.1 supervisor 모듈
- Node.js 개발을 하다보면 터미널에서 다음 명령어를 지속적으로 반복한다.
- 파일을 변경해도실행된 스크립트에 반영되지 않으므로 다시 종료하고 실행하는 것이다.
- supervisor 모듈은 파일의 변경을 자동으로 인식하고 종료 후에 실행해준다.
[ supervisor 설치 - 리눅스 or 맥 ]
$ sudo npm install -g supervisor
[ sudo ] password for USER: 비밀번호 입력
[ supervisor 설치 - 윈도우 ]
> npm install -g supervisor
[ 터미널 명령어 - supervisor 기본 명령어 보기 ]
$ supervisor
[ 실행 - supervisor 기본 명령어 보기 ]
[ 코드 - supervisor 기본 파일 ]
//모듈을 추출한다.
var http = require('http');
//서버를 생성 및 실행한다.
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type' : 'text/html'});
response.end('<h1>Test - File - 1</h1>');
}).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});
- 코드를 입력한 뒤 아래의 supervisor 명령어를 사용하여 실행한다.
[ 실행 - 터미널 명령어 - supervisor 사용하기 ]
[ 실행 - 기본 실행 결과 ]
[ 코드 - 파일 변경 ]
//모듈을 추출한다.
var http = require('http');
//서버를 생성 및 실행한다.
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type' : 'text/html'});
response.end('<h1>Test - File - 2</h1>');
}).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});
- 파일 내용을 변경하고 저장하면 supervisor 모듈이 서버를 재시작한다.
- 따라서 http://127.0.0.1:52273 에 들어가면 파일 내용이 변경된 대로 출력된다.
- 파일 변경후 서버를 재실행할 필요없이 바로 적용되는 것을 확인할 수 있다.
- Node.js는 단일 스레드 기반의 웹 서비스이므로 예외 하나가 발생해도 웹 서비스가 죽어버린다.
- 이러한 예외 상황을 대비하고자 만들어진 모듈이 forever 모듈이다.
- 사용자가 기본 경로로 접근하면 정상적으로 응답하지만 다른 경로로 접근하면 오류를 발생하도록 하였다.
- http://127.0.0.1:52273 에 들어가면 정상적인 웹 페이지를 호출한다.
- http://127.0.0.1:52273/error 에 들어가본다. 루트 경로가 아닌 곳에 접근했으므로 서버에서 예외가 발생해 서버가 죽어버린다.
- 우리는 forever 모듈로 웹 서버를 실행하였으므로 다시 http://127.0.0.1:52273에 들어가보면 웹 서버가 정상적으로 동작한다.
- http://127.0.0.1:52273에 들어갔을 때 웹 서버가 정상적으로 동작함을 확인할 수 있다.
[ 명령어 - 프로세스 번호로 서버 종료하기 ]
$ forever stop 0
- forever list 로 현재 실행되고 있는 웹 서버 목록을 볼 때 프로세스 번호도 나온다.
- forever stop 프로세스번호 : 프로세스 번호를 입력하여 서버를 종료시킬 수 있다.
'Node.js' 카테고리의 다른 글
| Node.js express 4.x 프레임워크 설치 및 실행 (0) | 2016.02.11 |
|---|---|
| Node.js express 모듈 (6) | 2015.01.25 |
| Node.js http 모듈 (0) | 2014.11.05 |
| Node.js 이벤트 (0) | 2014.07.06 |
| Node.js 기본 내장 모듈 (2) | 2014.06.29 |
