프로젝트를 만들기 위해서는 New > Node.js Express Project

여기서는 ejs의 template engine을 사용하기 때문에 ejs로 변경시켜준다.



MVC Patterm으로 프로젝트가 생성되었다. 


app.js의 코드를 보면 아래와 같다. 자동적으로 모든 환경설정을 자동으로 생성해주는 것을 볼수 있다.
이제 MVC에 맞도록 코딩을 하면 끝... 이렇게 쉽다니...







이클립스에서 작업을 하다보면 현재 프로젝트 디렉토리에서 File Manager, Shell 에서 작업을 해야할 경우가 있다. 

이번에 소개해 드릴 Eclipse 플러그인 StartExplorer입니다. 

1. 설치 방법

설치하는 방법은 Eclipse에서 상단바에 메뉴에서 Help >> Eclipse Marketplace..

StartExplorer를 검새하고 설치하면 됩니다.




2. 사용 방법
예를 들어 NodeJs 프로젝트에서 global하게 module을 설치를 하지 않고, 프로젝트 내부에서만 사용하는 모듈을 설치할때는

프로젝트 우클릭 >> StartExplorer >> Start Shell Here 또는 Ctrl+Alt+D를 누르면 커맨드창이 뜬다.

현재 상태에서 $npm install <module_name>을 해주면 끝 


기존에는 

var reqHandler = function(req, res) {

res.writeHead(200, {"Content-Type":"text/html"});

res.end("<h1>Welcome to Server.</h1>");

};

var server = http.createServer(reqHandler);

server.listen(8080, function() {

console.log('running on 8080...');

});

로 사용을 했지만. reqHandler를 만들지 않고, express()를 사용했다.

express를 사용하면 


var app = express();

app.use(function(req, res) {

res.send("<h1>Welcome to Server.</h1>");

});


http 모듈만 사용할 경우에는 res.writeHead(), res.end()를 항상 작성해줘야했지만

express를 사용하면 res.send만 사용하면 된다. (이미 writeHead(), end()는 내부에서 동작)


var server = http.createServer(app);

server.listen(8080, function() {

console.log('running on 8080...');

});



var app = express();

app.use(function(req, res, next) {

console.log("url:" + req.url);

next();

});

app.use(function(req, res) {

res.send("<h1>Welcome to Server.</h1>");

});

app.use()는 n번 이상을 사용할 수 있고, 다음 use를 호출하기 위해서는 이전 use 함수에서 next()를 호출해야 합니다. 


모듈 단위로 작업을 하기 위해서는 아래와 같이 할 수 있다. (MVC 모듈로 사용할 수 있는 기반이 마련)
/plus에 대한 작업을 하기 위해서는 req.url =='/plus'를 하면 
localhost:8080/plus 라고 할 경우에는 console.log('doing for plus')가 호출이 될 것이다. 
localhost:8080/minus 라고 할 경우에는 console.log('doing for plus')가 호출이 될 것이다. 
localhost:8080/ 라고 할 경우에는 console.log('url:/')가 호출이 될 것이다. 


app.use(function(req, res, next){
if (req.url == '/plus') {
console.log('doing for plus');
}
next();
});
app.use(function(req, res, next){
if (req.url == '/minus') {
console.log('doing for minus');
}
next();
});
app.use(function(req, res) {
res.send("<h1>Welcome to Server.</h1>");
});

var server = http.createServer(app);
server.listen(8080, function() {
console.log('running on 8080...');
});

GET / POST 를 나누어 보자.

app.get('/div', function(req, res) {
console.log('doing for div');
res.send('<h1>div</h1>');
});

라고 코드를 작성하면 get에 대한 처리를 해주고 응답을해준다. 이때 주위해야할 점은 
app.use에서 next가 없는 function의 위치는 맨 마지막에 가야한다.







morgan (logger) 미들웨어
express에서 사용할 수 있는 Third-party middleware (추가적으로 설치를 해야합니다.
1. 설치하기
npm install morgan (http://github.com/expressjs/morgan)
요청에 따른 로그 출력

var http = require('http');
var express = require('express');
var morgan = require('morgan');

var logger = morgan('combined');
var app = express();
app.use(logger);
app.use(function(req, res) {
res.send('<h1>Logger Test</h1>');
});

var server = http.createServer(app);
server.listen(8080, function() {
console.log("running on 8080.");
});

실행 화면은
::1 - - [17/Mar/2016:06:45:30 +0000] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36"
::1 - - [17/Mar/2016:06:45:30 +0000] "GET /favicon.ico HTTP/1.1" 304 - "http://localhost:8080/" "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36"


combined 포맷 말고 다른 포맷을 사용하고 싶으면 https://www.npmjs.com/package/morgan
에서 참조


winston
npm install winstom
log를 file로 떨어뜨려주는 역할을합니다. 찾아보시길...
console.log를 사용하지 않고 winston.log를 하면 콘솔과 파일에 출력이 된다. 
winston.log('info' 
winston.info 등 다양한 레벨로 사용이 가능하다. 
winston.log('debug'

데이터 베이스, 파일, 원격저장소에 저장또한 가능하니 찾앙보면서 하면 좋을 것 같습니다.


router 미들웨어 (길잡이를 해주기 때문에 이름이 router입니다.)
- 요청 메서드와 url에 따른 분기
- 개별 함수를 통한 1:1 작업 분화
- app.use()라는 것을 app.get()처럼 표현.. ?
- router.get()이 많이 나온다구...?
- use에서 if 문으로 분기를 나눠서 처리하는게 너무 많은거야.. 그래서 router로 만들어보자. use함수 제조기를 router라고 만들자.
- 필요에 의해 새로운 router 생성
- 별도의 context 생성의 의미

var router = new Router();
router.get('/plus', function() {});
router.get('/minus', function() {});
app.use(router);

있었는데, 살아지고
Express 4.x부터 지금은 app.get()에 암묵적으로 기본 router 미들웨어에 추가되었음.
app.get('url', function(req, res){}); post, put, delete, all 
 
router를 등록하면 1차적으로 calendar에 관련된 이벤트를 처리하고 그 이벤트 안에서도 2차적인 events를 처리하는 함수를 정의.
하위 context를 만들어낼때 사용한다. calendar의 하위 context.
이렇게 하면 /calendar/events/, calendar/normal 의 이벤트를 처리할 수 있다.

예제 )
var http = require('http');
var express = require('express');

var app = express();
var router = express.Router();

app.get('/', function(req, res) {
res.send('<h1>index page</h1>');
});

router.get('/events', function(req, res){ 
console.log('events');
res.send('<h1>events</h1>');
});
router.get('/normal', function(req, res){ 
console.log('normal');
res.send('<h1>normal</h1>');
});
app.use('/calendar', router);

http.createServer(app).listen(8080, function() {
console.log('running on 8080.');
});

Parameter 전달

- GET 방식
    - request.param('key') : value 
    - request.query.key : value
※ POST 방식과 동일한 코드를 하기 위해서는 request.param('key')가 더 올바르다.(?)


예제 )

app.get('/', function(req, res) {

console.log(req.query);

console.log(req.param);

res.send('<p>id:' + req.query.id + "</p><p>"

+ req.param('pwd') +"</p>");

}); 


-  POST 방식
    - bodyParaser 미들웨어 추가 설치
    - npm install body-parser

예제 )

app.use(bodyParser.urlencoded({extended: false}));

app.post('/', function(req, res) {

console.log(req.query);

console.log(req.param); // function

res.send('<h1>POST</h1><p>id:' + req.param('id') + "</p><p>"

+ req.param('pwd') +"</p>");

});



※ GET과 POST의 함수 Body가 동일한 경우에는 app.all('url', function(){}); 으로 해도 상관 없습니다.

express 모듈 사용하기.

expressjs.com

1. 설치하기

npm install express --save (--save는 나중에 배포하기 쉽게 하기 위해서 옵션을 넣습니다.)

http의 모듈의 불편함을 개선하고자

request와 response 객체에 추가된 기능

다양한 미들웨어를 제공TISTROY

- use() 함수

- request 이벤트 리스너를 연결

- 연쇄적, 구간별 작업 처리 (waterfall의 callback과 유사한 작업 처리)

minimal하고 flexible node.js web application framework입니다. web과 mobile application


2. Express란 

Request 이벤트를 핸들하기 위한 Framework입니다.

[참고] http://expressjs.com

Web Applications

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

APIs

With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.

Performance

Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love

Frameworks

Many popular frameworks are based on Express.

API Docs

- http://expressjs.com/en/4x/api.html
- 정말 너무 친절하게 하나하나 설명이 있다. 필요한건 찾아가면서 하시길 




3. 사용하기

express 간단한 웹 서버 만들기

예제 )



request 기능
- header() : 요청 헤더 추출
- accepts() : 요청 헤더의 accept 속성
- param() : 요청 매개변수 추출
- is() :요청 헤더의 Content-Type

response 기능
- response.send() : 매개변수 자료형에 따라 적절한 응답
- response.json() : JSON 형식으로 응답
- response.jsonp() : JSONP 형식으로 응답
- response.redirect() : 웹 페이지 리디렉션
- response.status(status code) : 응답 코드 지정, 생략하는 경우 - 200 OK


미들웨어
- use() 함수
- request 이벤트 리스너를 연결
- 연쇄적, 구간별 작업 처리

예제 ) 



static 미들웨어
- Built-in middleware
- 정적인 파일 기반 웹서버
- public 디렉토리 생성
- index.html, image 파일 등을 위치

예제 )

app.use(express.static(__dirname + "/public")); (ROOT를 지정)
을 하용하게 되면 프로젝트에서 /public의 index.html로 static하게 참조한다.
실제로 구현을 하기 위해서는 mime-type에 맞게 코드를 작성해야 한다. {"Content-Type" : "html/text"} 하지만
static에서는 모든게 구현이 자동으로 되어있기 때문에 그냥 사용하면 됩니다. 



















Async Module

콜백함수의 문제를 해결하기 위해서 사용해요.

1. 설치하기

npm install async

- waterfall([fn, fn, ...], fn) : 배열의 함수를 한단계씩 실행, 파라미터를 다음 콜백에게 전달

- series([fn, fn, ...], fn) : 배열의 함수를 실행, 각각의 파라미터를 마지막 함수에게 전달.

예제 )

 

var async = require('async');


async.parallel([ function(callback) {

console.log('1st ');

setTimeout(function() {

callback(null, 'one');

}, 3000);


}, function(callback) {

console.log('2nd ');

setTimeout(function() {

callback(null, 'two');

}, 1000);

}, function(callback) {

console.log('3rd ');

callback(null, 'three');

} ], function(err, results) {

console.log(arguments);

});

http://fortawesome.github.io/Font-Awesome/


EJS (Embedded JavaScript (http://embeddedjs.com)

Template Engine


1. 설치하기 

npm install ejs


2. 사용하기

EJS 특수태그

<% code %>

<%= value %>


3. 예제 코드

ejstest.js

test.ejs.html


4. 실행화면








블로그에 소스코드를 작성하려고 할때, Ctrl+C, Ctrl+V를 하게 되면 그 누가 보고 얻어가겠는가. 
나조차 다시 보고 싶지 않을 것 같다. 
그렇기 때문에 Syntax Highlighter를 적용하는 방법을 공유하려고 한다. 



HTML과 CSS를 몰라도 적용하는 방법은 매우 쉬우니 천천히 따라하면 가능.
코드를 넣는 방법은 아래 두가지 방법이 있다.
첫 번째 그냥 막 복붙

import sys
import os

print 'test python code style'

두번째 SyntaxHighlighter를 적용하여 아름답고 깔끔하고 소유하고싶고 공유하고싶으고 나중에 보기 좋게 소스코드를 넣는 방법

당신은 무엇을 선택할 것인가? 두번째? 그럼 아래를 천천히 따라하자 (예상소요시간 지금 일어나서 물떠 오는 시간)

1. 설치

SyntaxHighlighter 3.0.83버전이 가장 최근 버전이다. [Download] <--- 다운로드 Link
http://alexgorbatchev.com/SyntaxHighlighter/download/
파일 크기는 대략 175KB, 다운로드 받은 파일을 압축을 풀면 아래와 같이 파일들이 나온다. 
우리가 사용해야 할 파일은 scripts와 styles



2. 적용

적용하기 위해 관리자 페이지로 들어가 HTML/CSS편집을 선택한다.



다운받은 syntaxhighlighter 폴더 안에 있는 scripts와 styles의 폴더 내에 있는 모든 파일을 업로드한다. 

 

1) <Head> 부분 추가 <Ctrl + F 를 누른뒤에 찾으면 더 빨리 찾을 수 있겠지요.>

</head> 바로 위에 아래의 코드를 추가한다.

2) <body> 부분을 변경 <Ctrl + F 를 누른뒤에 찾으면 더 빨리 찾을 수 있겠지요.>

※ <head>와 <body> 부분을 변경한 최종 결과는 아래와 같다. 


3. 사용법

1) HTML 체크 

글쓰는 오른쪽 위에 HTML을 체크한 후에


2) 소스코드 Style 적용하기

brush:python에서 python대신 cpp를 넣으면 cpp코드가 삽입 가능하다.

<textarea name="code" class="brush:원하는 언어;">
에디터 모드에서 이 사이에 코드를 작성하면 된다.
</textarea>

예) python 코드 삽입하기.
<textarea name="code" class="brush:python;">
print 'hello world'.
</textarea>

2-1) 적용 가능한 언어 목록

[참고] http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js



+ Recent posts