안녕하세요! 보안전문가가 꿈인 부산공수니입니다~!
오늘은 일반 개발자가 만들어 배포한 외부모듈에 대해 알아보겠습니다!
서버를 만들겠다고 해서 서버를 구성하는 부품을 하나하나 만들 필요는 없습니다. 컴퓨터를 만들려면 조립을 해야지 제품 하나하나를 다 생산하는 게 아닌 거 처럼 말입니다. 그럼 시작해 보겠습니다.
| 개념 | 설명 |
| ejs 모듈/ jade 모듈 | 웹 페이지를 동적으로 생성하는 템플릿 엔진 모듈 |
| supervisor 모듈 | 파일의 변경 사항을 자동으로 인식하고 종료 후 다시 실행 |
| forever 모듈 | 웹 서비스 장애와 같은 예외 상황을 대비하고자 만들어진 모듈 |
| npm install 명령 | 외부 모듈을 설치할 때 사용 |
| package.json 파일 | Node.js 프로젝트의 환경 설정 정보를 담은 파일 |
| npm int 명령 | Node.js 프로젝트를 생성할 때 사용 |
Node.js 는 npm(Node Package Manager) 을 기반으로 모듈을 공유합니다.
외북 모듈을 설치할 때는 콘솔 화면에 아래 명령어를 입력하면 됩니다.
npm install 모듈명
이렇게 설치한 모듈은 내장 모듈처럼 사용할 수 있습니다.
//모듈을 추출
var ejs = require('ejs');
var jade = require('jade');
//내장 모듈과 별다른 차이 없음*2016년 부터 jade 모듈이 pug로 변경되었습니다.*
-ejs 모듈 : 템플릿 엔지 모듈로 특정 형식의 문자열을 HTML 형식의 문자열로 반환합니다.
//간단한 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>
<% } %>
자주 봐왔던 코드가 아니라 좀 당황스럽지만 조금만 보면 금방 이해할 수 있습니다.
| 태그 | 설명 |
| <% Code %> | 자바스크립트 코드 입력 |
| <%= Value %> | 데이터를 출력 |
-ejs 모듈의 메서드
render(str, data,option) : ejs 문자열을 HTML 문자열로 변경합니다.
http.createServer(function (request,response){
fs.readFile('ejsPage.ejs','utf8',function(error,data){
response.writeHead(200,{'Content-Type':'text/html'});
response.end(ejs.render(data));//HTML 로 변환
});
}).listen(52273,function(){
console.log('Server Running');
});
이런 걸 어디다가 사용하나요?
-> HTML 페이지 소스코드는 정적 코드 한 번 생성하면 절대 변하지 않습니다. 즉 HTML 페이지를 제공하는 서버는 클라이언트에게 늘 같은 데이터를 보여줍니다. 하지만 템플릿 엔진을 사용하면 항상 다른 페이지를 보여줄 수 있습니다. 우리가 보는 네이버나 다음 포털 사이트의 뉴스 기사들도 이러한 템플릿 엔진을 통해 제작되었습니다.
-jade 모듈 (현재는 pug 모듈)
이 역시 템플릿 엔진 모듈입니다. Node.js에서 가장 많이 사용되는 웹 프레임워크인 express 프레임 워크가 템플릿 엔진으로 주로 ejs 와 jade 모듈을 주로 사용하기에 이 두가지를 설펴봅니다.
일단 'npm install jade'로 모듈을 설치하셔야합니다.
jade 모듈의 메서드
compile(string, option) : 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 ');
});
doctype html
html
head
title Index Page
body
//JADE String
#header
h1 Hello Jade .. !
h2 Lorem ipsum
hr
.article
a(href="http://habit.co.kr",data-test="multiple Attribute") Go To Hanbit Media
-jade 기본 형식
위에 있는 jade 기본 형식도 희한 합니다. 하지만 이것도 보다 보니 뭔가 알거 같기도 합니다. jade 에서 가장 중요한 것은 ' 들여쓰기'입니다. 들여쓰기로 HTML 구조를 형성합니다. 반드시 탭과 띄어쓰기 중 한 가지 형태만 사용해야합니다. 첫 줄에 탭을 쓰고 다음 줄에 띄어쓰기를 쓰면 오류가 발생합니다.
태그 안에 글자를 입력하고 싶을 땐 지정한 태그 아래에 한 단계 더 들여쓰기를 한 후 원하는 글자를 입력합니다. 태그에 속성에 여러 개 입력하고 싶을 때는 쉼표를 사용해 구분합니다.
div 태그 입력하지 않고 #header 태그로 생성할 수 있습니다.
마찬가지로 .article 태그를 입력하는 것만으로 도 가능합니다.
script 태그와 style 태그는 '.' 기호를 찍어줍니다.
-jade 특수 기호
-Code : 자바스크립트 코드 입력
#{Value} : 데이터 출력
=Value : 데이터 출력
전역 모듈
-supervisor
파일 내용을 변경해도 현재 실행 중인 스크립트에는 영향을 끼치지 못합니다. 하지만 supervisor 모듈은 이런 사항을 자동으로 인식하고 종료한 뒤 다시 실행 시켜줍니다.
-forever
error가 발생할 경우 프로그램이 터지는데 forever을 사용하면 error 나지 않는 부분에서는 계속 실행이 됩니다.
글이 도움이 되셨나요?
좋아요와 구독하기 부탁드립니다.