1. One Day Code-Lab
- AngularJS와 Express로 하루만에 쇼핑몰 만들기 -
webFrameworks.kr
Express 맛보기
2. NodeJS란?
• 서버사이드 자바스크립트 프레임워크
• Event loop을 이용하여 이벤트 기반으로
동작하며, Non-blocking I/O방식
Event Queue
Event
Loop
Thread Pool
File-system
network
process
other
8. Express의 폴더구조(1)
/bin/www: 서버 구동을 위한 코드가 기록되어
있습니다. 익스프레스 서버설정 코드가 기록된
app.js 파일을 가져와 노드의 HTTP 객체와
연동하는 작업이 이뤄집니다.
/public: 정적 파일을 위한 폴더로서 자바스크립트
파일, 이미지 파일, 스타일시트 등을 포함합니다.
브라우져에 로딩된 HTML파일에서 해당 파일을
호출하면 내려주는 역할을 합니다.
/routes: 라우팅을 위한 폴더입니다. 라우팅
리소스 별로 모듈을 만들어 라우팅 로직을 각
파일에 구현 합니다.
/views/index.jade: 템플릿 파일일 제이드(Jade)
파일입니다. 이 파일을 제이드 엔진을 통해 HTML
코드로 변환됩니다. 위에서 설정한 라우팅 로직
중 redner()함수에서 파라매터로 이 파일을
사용합니다.
9. Express의 폴더구조(2)
app.js: bin/www 에서 사용되는 이 파일은
익스프레스 설정 파일이 담겨있는 핵심
코드입니다.
/routes: 라우팅을 위한 폴더입니다. 라우팅
리소스 별로 모듈을 만들어 라우팅 로직을 각
파일에 구현 합니다.
package.json: 노드에서는 package.json 파일에
프로그램 이름, 버전 등 노드 프로그램의
정보를 기술합니다. 또한 필요에 따라 다양한
모듈을 함께 사용하는데 이러한 모듈들의
목록을 package.json에 나열합니다. NPM은 이
정보를 참고하여 필요한 모듈을 모두 설치할
수 있는 것입니다.
10. REST API
* REST = REpresentational safe transfer (REST)
* Why?
- 자원의 식별
- 메시지를 통한 리소스의 조작
- 자기 서술적 메시지
- 애플리케이션의 상태에 대한 엔진으로서의 하이퍼미디어
* Example
Item을 등록하기 => (POST) /items
3번 Item을 조회하기 => (GET) /items/3
3번 Item 삭제하기 => (DELETE) /items/3
3번 Item 수정하기 => (UPDATE) /items/3
(참고) HTTP Method를 아래의 행위와 매칭하면 이해하기 쉽습니다.
POST = 생성 / GET = 조회 / DELETE = 삭제 / UPDATE = 수정
11. Express의 라우팅과 REST URI
* 라우트란?
클라이언트의 요청을 위한 URL 스키마를 라우트라고 합니다. 이미 설명한 GET /을
예로 들면 클라이언트가 GET 메소드를 이용해 / URI에 해당하는 서버자원을
요청한다는 의미로 해석합니다. 만약 POST 메소드를 사용한다면 서버에 자원을
생성하는 요청입니다. 이렇게 URL 스키마는 서버와 클라이언트간의 통신
인터페이스를 제공해 주는 역할을 합니다.
* 구현할 REST URI
(GET) /items?q=XXXXXX // item 검색
(POST) /items/:itemId // item 구매
(GET) /items/:itemId // item 세부정보
* 프로토콜의 메소드에 따른 라우트의 객체
함수
GET: router.get()
POST: router.post()
PUT: router.put()
DELETE: router.delete()
13. Request 구성하기
• 라우트 객체의 두번째 파라매터는 콜백으로 설정하는데 URL에 접속했을때
실행되는 함수입니다.
• 함수의 첫번째 파라매터 request는 클라이언트 응답에 대한 정보를 담는
객체입니다. 이 객체는 req.params, req.param(), req.body 등의 함수 혹은
객체를 이용하여 클라이언트로 부터 요청하는 데이터에 접근 할 수 있다.
* Request 파라미터 접근
- req.params : 파라미터 경로에 매핑된 값들을 포함하는 객체로
/user/:name일 경우 req.params.name으로 접근 가능
- req.query : 쿼리문자열을 포함하고 있는 객체. 예로
/items?q=“abc”이면 req.query.q로 접근 가능
- req.param(name) : 파라미터에 name값이 존재하는 경우 반환.
쿼피문자열, 포스트 등 동일하게 사용된다.
- req.body : body에 담겨온 request parameter값을 획득한다.
15. Response 구성하기
* Response 함수 종류
- res.send(): 문자열로 응답
- res.json(): 제이슨(Json) 객체로 응답
- res.render(): 제이드 템플릿을 렌더링
- res.sendfile(): 파일 다운로드
• Response 파라매터는 클라이언트로 응답을 위한 객체입니다. res.send() 함수를
이용해 문자열로 응답할 수 있습니다. 이 외에도 응답을 위한 몇 가지 함수를
더 사용할 수 있습니다.
* Response sample
“meta”: {
errCode: 0
msg: “”
}
“data”: {
}
16. Response Sample Code
* Response 함수 종류
- res.send(): 문자열로 응답
- res.json(): 제이슨(Json) 객체로 응답
- res.render(): 제이드 템플릿을 렌더링
- res.sendfile(): 파일 다운로드
exports.result = function(res, statusCode, errCode, msg, data) {
var output = {
meta: {
errCode: errCode,
msg: msg
},
data: data
};
res.status(statusCode).json(output);
}; /lib/apiResponse.js
17. DATABASE 연동
• 데이터를 관리하기 위하여 MySQL 데이터베이스와 연동
• Mysql 모듈 설치 확인 package.json
* Sample Database 환경
- HOST: 54.64.145.4
- PORT: 3306
- USERNAME: dev01
- PASSWORD: a20150829
- SCHEMA: codelab
내용추가 예정
18. dbHelpers Component
var mysql = require('mysql');
var state = {
pool: null
};
exports.connect = function() {
state.pool = mysql.createPool({
..
});
};
exports.query = function(q, cb){
if(!state.pool) new Error();
state.pool.getConnection(function(err, conn){
if (err) cb(err, '');
conn.query(q, function (err, results) {
// error will be an Error if one occurred during the query
// results will contain the results of the query
conn.release();
if (err) {
cb(err, '');
}
cb(null, results);
})
});
}
19. Main Application File - app.js
'use strict';
// Set default node environment to development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
var express = require('express');
var config = require('./config/environment');
// Setup server
var app = express();
var server = require('http').createServer(app);
require('./config/express')(app);
require('./routes')(app);
require('./components/dbHelpers').connect();
// Start server
server.listen(config.port, config.ip, function () {
console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});
// Expose app
exports = module.exports = app;
20. DATABASE Sample Code
var d = require("../../components/dbHelpers");
var q = (req.query.q) ?
'select * from codelab.item where title like "%' + req.query.q + '%"' :
'select * from codelab.item ';
d.query(q, function (err, data){
// logic after DB-Job
});
24. Angular-Full-Stack : CLI (1)
(APP) $ yo angular-fullstack
(API) $ yo angular-fullstack:endpoint message
> server/api/message/index.js
> server/api/message/message.spec.js
> server/api/message/message.controller.js
(ROUTE) $ yo angular-fullstack:route myroute
> client/app/myroute/myroute.js
> client/app/myroute/myroute.controller.js
> client/app/myroute/myroute.controller.spec.js
> client/app/myroute/myroute.html
> client/app/myroute/myroute.scss
(CONTROLLER) $ yo angular-fullstack:controller user
> client/app/user/user.controller.js
> client/app/user/user.controller.spec.js
(DIRECTIVE) $ yo angular-fullstack:directive myDirective
> client/app/myDirective/myDirective.directive.js
> client/app/myDirective/myDirective.directive.spec.js
> client/app/myDirective/myDirective.html
> client/app/myDirective/myDirective.scss
25. Angular-Full-Stack : CLI (2)
(FILTER) $ yo angular-fullstack:filter myFilter
> client/app/myFilter/myFilter.filter.js
> client/app/myFilter/myFilter.filter.spec.js
(SERVICE) $ yo angular-fullstack:service myService
> client/app/myService/myService.service.js
> client/app/myService/myService.service.spec.js
(DECORATOR) $ yo angular-fullstack:decorator serviceName
> client/app/serviceName/serviceName.decorator.js
26. Angular-Full-Stack으로 시작하기
• Node 설치
• Angular-Full-Stack 다운로드받기
또는 git clone
• API 설계하기
• Response 포멧 설계하기
• 데이터베이스를 이용하기 위한 컴포넌트
만들기
• 실제 개발 시작!
27. One Day CodeLab Sample
https://github.com/KoreaHTML5/one-day-codelab
Notes de l'éditeur
Node.js는 구글의 크롬 V8 자바스크립트 엔진을 기반으로 한, 고성능 네트워크 서버이다.
Single Thread 기반의 Event Loop를 기반으로 하고 있으며, File, Network 등에 대해서 비동기 IO 처리를 하는 서버 미들웨어이다.
근래에 들어서 다시금 node.js 가 많은 주목을 받고 있는데, Paypal이나 Groupon과 같은 굴지의 서비스 기업들이 내부 서버 플랫폼을 node.js로 전환하는 것이 계기가 되고 있다.
Node.js는 일반적으로 성능이 매우 빠른 고성능 서버로 알려져 있다. 이 고성능은 자바스크립트등에서 오는 것이 아니라, node.js의 기본적인 구조인 Single Thread기반의 비동기 IO 처리에서 온다. 하나의 쓰레드가 request를 받으면, 처리를 하고, File IO나 Network 처리 (데이타 베이스 접근)등이 있을 경우에는 IO 요청을 보내 놓고, 작업을 처리하다가, IO 요청이 끝나면 이벤트를 받아서 처리하는 이벤트 방식을 사용한다. 이로 인해서, CPU가 IO 응답을 기다리는 시간이 필요 없고, 대부분의 연산 작업에 사용되기 때문에 높은 효용성을 가질 수 있으며, 특히 하나의 Thread로 여러개의 요청을 처리하는 구조로 되어 있기 때문에, C10K 문제를 처리할 수 있는데 아주 최적화 되어 있다.
사실 node.js 자체의 구조로만 본다면 자바 보다 성능이 빠르다고 이야기할 수 없다. 이는 어디까지나 시나리오에 따라서이다. 상대적으로 CPU Intensive한 작업이 없고,많은 Connection을 동시에 처리해야 하는 시나리오 대해서는 아무래도 node.js의 성능이 압도적으로 높다.
