'프로그래밍/Express.js'에 해당되는 글 1건

  1. 2014.10.10 Express 4 요약(Express 3와 차이)
2014. 10. 10. 16:52

Express 3.x to 4.x Migration Guide 요약 원문보기


Express4는 더이상 Connect에 의존하지 않습니다. 

그리고 모든 미들웨어(middleware)를 express core에서 제거했습니다.
(express.static만 예외)

이제는 Express가 독립적인 routing/미들웨어 웹 프레임워크입니다.

따라서 이제는 독립적인 미들웨어 업데이트에 영향을 받지 않습니다.

예전에 express core에서 그 자체로는 변한게 없는데도 많은 미들웨어의 변화때문에

express를 버전업했던 것을 상상해보세요.

이제는 필요에 의해서 미들웨어를 꼭 추가해야합니다. 

다음은 Express3과 비교한 Express4의 미들웨어 리스트입니다.

 

Express 3

Express 4

express.bodyParser

body-parser + multer

express.compress

compression

express.cookieSession

cookie-session

express.cookieParser

cookie-parser

express.logger

morgan

express.session

express-session

express.favicon

serve-favicon

express.responseTime

response-time

express.errorHandler

errorhandler

express.methodOverride

method-override

express.timeout

connect-timeout

express.vhost

vhost

express.csrf

csurf

express.directory

serve-index

express.static

serve-static

express.timeout

connect-timeout



express4의 미들웨어의 대부분은 express3의 middleware에 대응하는 drop-in 교체입니다.



The routing system


이제는 라우팅 미들웨어는 암시적으로 앱 안에서 로드됩니다. 

그래서 더이상 미들웨어가 로드 되는 순서에 대해 걱정하지 않아도 됩니다. 

routes을 정의(define)하는 방식은 Express3와 동일합니다. 

라우팅시스템은 더 효과적으로 routes을 조직할 두 가지 새로운 기능을 소개합니다. 

첫 번째는 app객체의 route() 메서드 입니다. 

app.route()를 사용해서  route handlers을 route path로 묶을(chainable) 수 있습니다. 

path가 한 경로에 지정되었기 때문에, 모듈단위의 routes을 만드는 것을 도와주고

중복(redundancy)과 typos(오탈자)를 줄일 수 있게 되었습니다.


다음은 app.route()를 이용해서 정의된 chained route handlers입니다.

1

2

3

4

5

6

7

8

9

10

app.route('/book')

 .get(function(req, res) {

   res.send('Get a random book');

 })

 .post(function(req, res) {

   res.send('Add a book');

 })

 .put(function(req, res) {

   res.send('Update the book);

 })




나머지 한 기능은 routes을 조직하는 것을 돕는 새로운 클래스입니다. 

express.Router

이것을 사용해서 모듈단위로 쌓을 수 있는 route handlers을 만들 수 있습니다. 

Router 인스턴스는 완전한 미들웨어이고 routing system입니다. 그 이유는

이 인스턴스가 종종 mini apps로서 참조되기 때문입니다. 


Router 인스턴스가 독립적인 미들웨어이고 라우팅 시스템이기 때문에, 

app의 구조를 짜고 route를 모듈화하는 데 Router class를 사용하는 몇 가지 방법이 존재한다. 

다음 예에서 모듈로써 router를 만들어 보자. 그리고 그 모듈 안에서 미들웨어를 로드하자. 그리고 몇 가지 routes을 

정의하자. 그리고 main app안에 경로로 지정된 path에 그 routes을 쌓자.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var express = require('express');

var router = express.Router();

 

// middleware specific to this router

router.use(function timeLog(req, res, next) {

 console.log('Time: ', Date.now());

 next();

})

// define the home page route

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

 res.send('Birds home page');

})

// define the about route

router.get('/about', function(req, res) {

 res.send('About birds');

})


module.exports = router;


그리고 나서 앱 안에서 라우터 모듈을 로드하자. 

1

2

3

var birds = require('./birds');

...

app.use('/birds', birds);

이제 이 앱은 /birds와 /birds/about 요청을 처리할 수 있을 것이다. 동시에 

이 라우터에 명시된 timeLog 미들웨어를 콜 한다. 


다양한 미들웨어를 path에 load하고 router handler를 통해 파라미터 값을 얻어 올 수 있다. 


1

2

3

4

app.use('/book/:id', function(req, res, next) {

 console.log('ID:', req.params.id);

 next();

})





다른 변화들 (Express4에서 중요)


1) Node : Node 0.10.x or 그 이상이 요구됨 (0.8.x 지원 drop)


2) http.createServer() : 더이상 http 모듈은 필요 없다. app에서 app.listen()을 사용한다. 

(신)

var server = app.listen(3000, function() {

console.log('Listening on port %d', server.address().port);

(구) 

http.createServer(app).listen(app.get('port'), function(){

  console.log('Express server listening on port ' + app.get('port'));

});


3)app.configure() 제거됨 (환경 감지와 앱 설정)

= > 이제는 app..get('env') 사용 (or process.env.NODE_ENV)

4)json space : 기본값으로 이용할 수 없다. 

5)req.accepted() : 

- req.accepts()

-req.acceptsEncodings()

-req.acceptsCharsets()

-req.acceptsLanguages() 를 사용한다.


6)req.location() : 더이상 relative URLs를 해결하지 않는다. 

*absolute URLs : http://www.keycode.me/index.html

*relative URLs : /index.html

=>절대경로는 //가 context, 상대경로는 /가 context


7)req.params : 예전에는 배열(array)였지만 이제는 객체다(object)

8)res.locals : 예전에 함수(function)였지만 이제는 객체다(object)

9)res.headerSent : res.headersSent로 변경

10)app.route : 이제는 app.mountpath로써 이용할 수 있다.

11)res.on('header') : 제거됨

12)res.charset : 제거됨

13)res.setHeader('Set-Cookie', val) : 기본 쿠기값 설정하는 데 기능적으로 제한됨

=>추가된 기능을 사용하려면 res.cookie()를 사용해라.



Express3 app에서 Express4 app으로 이주하는 예제들


Express4에서 변한 것들을 알아봤으니까 기존에 express3 app에서 express4 app으로 이주해보자.

우리의 관심파일인 app.js와 package.json이다. 

다음 app.js파일을 살펴보자. (./는 현재 directory를 의미)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

var express = require('express');

var routes = require('./routes');

var user = require('./routes/user');

var http = require('http');

var path = require('path');

 

var app = express();

 

// all environments

 

app.set('port', process.env.PORT || 3000);

//app.set('views', __dirname + '/views');

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

app.use(express.favicon());

app.use(express.logger('dev'));

app.use(express.methodOverride());

//추가

app.use(express.session({ secret: 'your secret here' }));

app.use(express.bodyParser());

app.use(app.router);

app.use(express.static(path.join(__dirname, 'public')));

 

// development only 

if ('development' == app.get('env')) {

 app.use(express.errorHandler());

}

 

app.get('/', routes.index);

app.get('/users', user.list);

 

http.createServer(app).listen(app.get('port'), function(){

 console.log('Express server listening on port ' + app.get('port'));

});


이 파일을 분석해보자.

1)http 모듈은 더이상 필수가 아니다. 

2)내장된 express 미들웨어인 

express.favicon

express.logger

express.methodOverride

express..session

express.bodyParser

express.errorHandler

는 더이상 express object상에서 이용할 수 없다. 

우리는 app안에 그것들을 로드하기 위해서 그 대안으로 교체된 미들웨어를 install 해야할 것이다. 

3) app.router는 로드되야하는 필수가 아니며 Express4 app 객체로 유효하지 않다. 

4) Express4 apps은 http.createServer로 시작하지 않고 app.listen()으로 시작한다. 


예전의 package.json 파일

1

2

3

4

5

6

7

8

9

10

11

12

{

 "name": "application-name",

 "version": "0.0.1",

 "private": true,

 "scripts": {

   "start": "node app.js"

 },

 "dependencies": {

   "express": "3.12.0",

   "jade": "*"

 }

}


최신의 미들웨어 설치

$ npm install 

serve-favicon 

morgan 

method-override 

express-session 

body-parser 

multer 

errorhandler 

express@latest 

jade@latest --save

package.json 다음과 같이 update 될 것이다. 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

{

 "name": "application-name",

 "version": "0.0.1",

 "private": true,

 "scripts": {

   "start": "node app.js"

 },

 "dependencies": {

   "body-parser": "^1.5.2",

   "errorhandler": "^1.1.1",

   "express": "^4.8.0",

   "express-session": "^1.7.2",

   "jade": "^1.5.0",

   "method-override": "^2.1.2",

   "morgan": "^1.2.2",

   "multer": "^0.1.3",

   "serve-favicon": "^2.0.1"

 }

}


이제는 유효하지 않은 코드를 삭제해보자. 

그리고 필요한 미들웨어를 로드하고 다른 변경사항들을 바꿔보자.

다음은 변경한 app.js이다.


var express = require('express');

var routes = require('./routes');

var user = require('./routes/user');

var path = require('path');

 

//이제는 필요한 미들웨어를 설치해야함

//(express4에서 미들웨어가 분리)(예외,static)

var favicon = require('serve-favicon');

var logger = require('morgan');

var methodOverride = require('method-override');

var session = require('express-session');

var bodyParser = require('body-parser');

var multer = require('multer');

var errorHandler = require('errorhandler');

 

var app = express();

 

// all environments

app.set('port', process.env.PORT || 3000);

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'jade');

app.use(favicon(__dirname + '/public/favicon.ico'));




이것으로 우리의 이주 과정은 완료됬다. 우리 앱은 이제 Express4 app이다. 

확인하기 위해서 앱을 시작하고 http://localhost:3000 에 들어가서 Express4로 렌더링되고 있는지 봐라.


Express 4 app generator

더이상 npm install express -g(글로벌 모듈로 설치) 한다고 해서 generator가 설치 되지 않는다. 

이제 generator는 독립적인 npm package인 express-generator를 설치해야한다. 

만약 이미 Express3 app generator가 시스템에 설치되어 있다면, 우선 기존의 generator uninstall이 필요하다. 

다음은 기존 Express3 app generator를 삭제하는 command이다.

> npm uninstall express -g

삭제가 됬다면 이제는 Express 4 generator를 설치하자.

> npm install express-generator -g

Command 옵션과 방법은 크게 바뀌지 않았다.(옵션에서 --sessions와 --jshtml은 제거됨, --hogan은 추가됨)

앞으로 생성되는 앱은 Express 4 app이다.


Express 4 app을 생성해보자.

> express app4

app.js파일은 이제는 Node Module이다.


이제 app.js는 Express4 generator에 의해 생성된 노드 모듈이다. 

더이상 앱으로써 독립적으로 시작할 수 없다. 

노드파일 안에서 로드되고 시작되야 한다. 

우리의 경우, 노드파일은 node ./bin/www 에서 발생한다.  


 bin directory, www directory  은 의무사항이 아니다, 

이부분을 수정해서 사용 가능하다. 


www directory를 제거하고 예전 Express 3 방식을 이용하려면

app.js에서 마지막 라인인 “module.exports = app;” 제거하고 

아래 코드를 붙여 넣어라.


1

2

3

4

5

6

app.set('port', process.env.PORT || 3000);

 

var server = app.listen(app.get('port'), function() {

 debug('Express server listening on port ' + server.address().port);

 

});


app.js 최상단에 debug 모듈을 로드하는 것이 좋다. 

var debug = require('debug')('app4');


package.json파일 안에서 "start":"node ./bin/www"을  "start":"node app.js" 로 변경해라.


위 변경을 통해서 ./bin/www 이 가진 기능적인 부분을 app.js로 되돌려 놓았다. 이것은 추천되지는 않지만 이 연습을 통해서 ./bin/www이 어떻게 작동하는 지를 이해하고 왜 app.js 그 자체로 더이상 시작하지 않을 것인지에 대해 이해하는 데 도움이 될 것이다. 







 



Posted by 루피아빠