Nodejs 프로그래밍6. 경량 웹 프레임워크 익스프레스               아키텍트를 꿈꾸는 사람들 오전반 스터디                                 전효성( itmentor@gmail.co...
이번 발표에서 다룰 내용1.   Express 프로젝트 셋팅2.   app.js 소스 살펴보기3.   Jade 뷰 템플릿 엔진4.   폼 전송 웹사이트 예제5.   데이터베이스 연동6.   비동기 패턴의 의존성 문제  ...
1. Express 프로젝트 셋팅아래의 명령어를 순차적으로 입력합니다.$ npm install express -g$ express simpleweb$ cd simpleweb$ npm install$ npm install...
Simpleweb 웹페이지 server-side구성•   node_modules     –   해당 웹프로젝트에서 사용하는 모듈들이 위치함.•   Public     –   정적 리소스 파일 저장 ( css, 이미지 등...
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// 모듈 종속성var express = require(express)  , routes = require(./routes);var app = module.exports = express....
2. app.js 소스 살펴보기// Routes – HTTP 명령어( get, put, post, delete )에 대한 이벤트 핸들러 연결app.get(/, routes.index);// 3000번 포트 오픈app.l...
3. Jade 뷰 템플릿 엔진                   13
채수원님 블로그 : http://blog.doortts.com/223   14
HTML  Jade도 가능합니다.    http://html2jade.aaron-powell.com/   15
4. 폼 전송 웹사이트 예제            app.js                               route/index.jsapp.get(/, routes.index);app.get(/join, rout...
5. 데이터베이스 연동 - mysql  설치 및 테이블 생성// install$ npm install mysql// TABLE생성CREATE TABLE members (name VARCHAR(20), email VARC...
5. 데이터베이스 연동 - mongodbRepository.js                       외부 인터페이스                          DB접근 로직                코드     ...
6. 비동기 패턴의 의존성 문제• 비동기로 수행된다  수행시점을 알 수 없  다.• 해당 시점에 실행될 함수를 function  parameter로 전달 var result = db.query(‘SELECT …’ );...
6. 비동기 패턴의 의존성 문제 – 해결책방법1. callback을 이용하여 의존성 분리// a.jsvar b = require( ./b );b.funcA( function( err, result1 ) {  b.func...
6. 비동기 패턴의 의존성 문제 – 해결책방법2. event를 이용하여 의존성 분리// b.js                                                 // a.js             ...
6. 비동기 패턴의 의존성 문제 – 해결책비동기 호출 순서를 보장하는 방법func repeater(i){  if( i < length )  {      requestAsyncWork ( function() {      ...
7. 정리• 웹서버 생성 – express.createServer()• 서버 설정 – express.createServer().configure( callback ) – Callback에서 express.createSe...
질문 받겠습니다. Express에 대한 자세한 설명은 생략한 다.http://firejune.io/express/guide를 참조 한다.                                           24
Upcoming SlideShare
Loading in …5
×

Nodejs express

2,401 views
2,191 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,401
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Nodejs express

  1. 1. Nodejs 프로그래밍6. 경량 웹 프레임워크 익스프레스 아키텍트를 꿈꾸는 사람들 오전반 스터디 전효성( itmentor@gmail.com ) 1
  2. 2. 이번 발표에서 다룰 내용1. Express 프로젝트 셋팅2. app.js 소스 살펴보기3. Jade 뷰 템플릿 엔진4. 폼 전송 웹사이트 예제5. 데이터베이스 연동6. 비동기 패턴의 의존성 문제 2
  3. 3. 1. Express 프로젝트 셋팅아래의 명령어를 순차적으로 입력합니다.$ npm install express -g$ express simpleweb$ cd simpleweb$ npm install$ npm install express jade 3
  4. 4. Simpleweb 웹페이지 server-side구성• node_modules – 해당 웹프로젝트에서 사용하는 모듈들이 위치함.• Public – 정적 리소스 파일 저장 ( css, 이미지 등 )• Route – url에 따라 호출될 함수를 모아두는 디렉토리.• Views – 클라이언트에 보여줄 화면의 템플릿이 위치함.• App.js – main()함수 개념• Package.json – npm으로 설치하면 여기에 설치된 모듈의 정보( 버전 )가 들어간다. 4
  5. 5. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); app.set(view engine, jade); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + /public));});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ app.use(express.errorHandler());}); 5
  6. 6. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer(); 현재 파일의 절대 경로// configurationapp.configure( function() { app.set(views, __dirname + /views); app.set(view engine, jade); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + /public));});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ app.use(express.errorHandler());}); 6
  7. 7. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); • View template엔진과 view tempalte위치 지정 app.set(view engine, jade); • app.set()  특정 키에 값을 지정 app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + /public));});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ app.use(express.errorHandler());}); 7
  8. 8. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); • View template엔진과 view tempalte위치 지정 app.set(view engine, jade); • app.set()  특정 키에 값을 지정 app.use(express.bodyParser()); • app.use()  사용할 미들웨어 결정 app.use(express.methodOverride()); • express.static  리소스파일 위치 지정 app.use(app.router); • express.bodyParser()  application/x-www-form- app.use(express.static(__dirname + /public)); urlencoded나 application/json의 바디를 파싱하여}); req.body변수에 할당app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ app.use(express.errorHandler());}); 8
  9. 9. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); app.set(view engine, jade); app.use(express.bodyParser()); • app.router  요청 url을 라우팅한다. app.use(express.methodOverride()); app.use(app.router); 예, http://localhost:3000/id에 따라 페이지를 다르게 구성하고 싶 app.use(express.static(__dirname + /public)); 을 경우});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});app.configure(production, function(){ app.use(express.errorHandler());}); 9
  10. 10. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); app.set(view engine, jade); app.use(express.bodyParser()); • express.methodOverride() app.use(express.methodOverride()); • <input>태그의 method를 오버라이드하여 브라우저 app.use(app.router); 에서 지원 못하는 PUT, DELETE를 처리 app.use(express.static(__dirname + /public));});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, HTTP명령어 })); 클라이언트의 의도 showStack: true}); GET 서버에서 정보를 얻어온다.app.configure(production, function(){ POST 정보를 서버에 보낸다. app.use(express.errorHandler());}); PUT 기존에 존재하는 정보를 갱신한다. DELETE 특정 항목을 제거한다?! • 참고 : http://code.google.com/intl/ko-KR/apis/gdata/docs/2.0/basics.html 10
  11. 11. 2. app.js 소스 살펴보기// 모듈 종속성var express = require(express) , routes = require(./routes);var app = module.exports = express.createServer();// configurationapp.configure( function() { app.set(views, __dirname + /views); app.set(view engine, jade); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(__dirname + /public));});app.configure(development, function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 개발 중일때 stack trace 출력});app.configure(production, function(){ app.use(express.errorHandler()); 실 서비스시 error를 출력하지 않음}); 11
  12. 12. 2. app.js 소스 살펴보기// Routes – HTTP 명령어( get, put, post, delete )에 대한 이벤트 핸들러 연결app.get(/, routes.index);// 3000번 포트 오픈app.listen(3000);// 서버 콘솔에 메시지 출력console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);simpleweb/route/index.js/* * GET home page. */exports.index = function(req, res){ res.render(index, { title: Express })}; 12
  13. 13. 3. Jade 뷰 템플릿 엔진 13
  14. 14. 채수원님 블로그 : http://blog.doortts.com/223 14
  15. 15. HTML  Jade도 가능합니다. http://html2jade.aaron-powell.com/ 15
  16. 16. 4. 폼 전송 웹사이트 예제 app.js route/index.jsapp.get(/, routes.index);app.get(/join, routes.form); exports.index = function(req, res){app.post(/join, routes.join) res.render(index, { title: Express }) }; exports.form = function(req,res) { res.render(join-form, { title: Express }); }; exports.join = function(req,res) { res.render(join-result, { username: req.body.name, useremail: req.body.email, title: Express }); }; views./layout.jade views./index.jade views./join-result.jade views./join-form.jade 16
  17. 17. 5. 데이터베이스 연동 - mysql 설치 및 테이블 생성// install$ npm install mysql// TABLE생성CREATE TABLE members (name VARCHAR(20), email VARCHAR(30)); route/index.js repository.jsvar repo = require( ‘../repository’ ); insertUser: function(user,res) { ...exports.index = function(req, res){ }… , hasNameAndEmail: function(user, res) { client.query(exports.join = function(req,res) { SELECT * FROM + TABLE + WHERE name = ? OR email = ? // repo.insertUser( req.body, res ); , [user.name, user.email] repo. hasNameAndEmail( req.body, res ); , function(err, results, fields) {}; if (err) { throw err; } if( results.length > 0 ) { res.render(join-fail, { title: Express } ); } else { mysqlUtil.insertUser( user, res ); } }); } 17
  18. 18. 5. 데이터베이스 연동 - mongodbRepository.js 외부 인터페이스 DB접근 로직 코드 가시화 로직 구조 뷰 렌더링 / DB접근 로직을 분리하자. 18
  19. 19. 6. 비동기 패턴의 의존성 문제• 비동기로 수행된다  수행시점을 알 수 없 다.• 해당 시점에 실행될 함수를 function parameter로 전달 var result = db.query(‘SELECT …’ ); //동기 방식 function call db.query(‘SELECT … ‘, 처리하는 함수) //비동기 방식 function call 19
  20. 20. 6. 비동기 패턴의 의존성 문제 – 해결책방법1. callback을 이용하여 의존성 분리// a.jsvar b = require( ./b );b.funcA( function( err, result1 ) { b.funcB( result1, function( err, result2 ) { //result를 사용하는 코드 : 렌더링 로직 });});// b.jsvar B = module.exports = { funcA: function( callback ) { db.query( SELECT ... , callback ); }, funcB: function( callbck ) { db.query( SELECT ... , callback ); }} 20
  21. 21. 6. 비동기 패턴의 의존성 문제 – 해결책방법2. event를 이용하여 의존성 분리// b.js // a.js var b = require( ./b );var EventEmitter = require(events).EventEmitter; var resultA = b.funcA();var B = module.exports = { resultA.on( end, function( err, result ) { funcA: function() { var resultB = b.funcB(result); var evt = new EventEmitter(); db.query( SELECT ... , function( err,result ) { resultB.om( end, function( err, result ) { evt.emit(end, err, result ); //result사용하는코드 }); }); return evt; }); }, funcA: function() { var evt = new EventEmitter(); db.query( SELECT ... , function( err,result ) { evt.emit(end, err, result ); }); return evt; }} 21
  22. 22. 6. 비동기 패턴의 의존성 문제 – 해결책비동기 호출 순서를 보장하는 방법func repeater(i){ if( i < length ) { requestAsyncWork ( function() { repeater(i+1) }) }}repeater(0) • 0번 요청 끝  1번 요청  1번 요청 끝  2번 요청 … • 결국 동기와 동일한 방식을 비동기로 구현한 것. 22
  23. 23. 7. 정리• 웹서버 생성 – express.createServer()• 서버 설정 – express.createServer().configure( callback ) – Callback에서 express.createServer().set()과 express.createServer().use()사용• GET/POST의 라우팅 – express.createServer().get() – express.createServer().post()• HTML노가다 하지 말고 jade로 작성하자. – 디자이너와 소통이 어려울수도 있음. 23
  24. 24. 질문 받겠습니다. Express에 대한 자세한 설명은 생략한 다.http://firejune.io/express/guide를 참조 한다. 24

×