ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 4장 express 를 활용한 Routing 처리
    MeanStack (deprecated) 2016. 6. 8. 00:55



    이번엔 express 모듈을 활용한 요청 라우팅 처리를 해보자.  

    사용자가 들어오는 주소에 따라 다양한 응답을 선보일려면 라우팅처리는 필수이다. 


    먼저 코드를 보자.


    app.get('/', function(req,res) {
      res.send('This is a GET')
    })
    
    app.post('/', function(req,res) {
     res.send('This is a POST')
    })
    


    위 코드는 get 과 post 로 들어오는 요청에 대한 미들웨어 함수를 수행한다. 

    여기서 express 는 아래와 같이 미들웨어를 연쇄 형태로 만들 수도 있다. 


    app.route('/').get(function(req,res) {
     res.send('This is a GET');
    }).post(function(req,res) {
     res.send('This Is a POST');
    })
    


    여기서 한가지 더 예를 들자면 express 는 단일 라우팅에 대해서도 미들웨어를 연쇄 형태로 정의하는 방법도 

    존재한다. next() 함수를 사용하여 미들웨어를 넘기는 식으로 수행 순서를 결정할 수 있다. 



    var express = require('express');
    var app = express();
    
    var question = function(req, res, next) {
     if(req.param('answer')) {
       next();
      }else {
       res.send('so what is your answer?')
      }
    };
    
    var result = function(req,res) {
      res.send('good')
    }
    
    app.get('/', question , result);
    app.listen(3000);
    console.log('server start');
    
    


    위 코드를 살펴보면 먼저 express 모듈을 불러오고 question 과 result 미들웨어를 정의 하였다. 

    question 에는 req.param 으로 answer 이라는 파라미터가 있는지 확인하고 있다면 next() 메소드로 

    result 미들웨어로 이동한다.  없다면 so what is your answer? 이라는 응답을 보낸다. 


    app.get을 살펴보면  '/' 라우팅 경로로 들어오는 사용자에게 question 미들웨어를 먼저 수행하고 next 메소드가

    호출되면 바로 뒤 인자인 result 미들웨어를 수행하도록 되어있다. 


    실제로 실행하여 기본 주소인 http://localhost:3000 으로 들어가보고 http://localhost:3000/?answer=test 로 

    answer 파라미터를 같이 보내면서 들어가보자. 



    express 의 라우팅 맛을 조금 봤으니 첫 라우팅 파일을 만들어보자. 

    그전에 메인화면으로 들어오는 controller 를 하나 작성을 하자. 

    먼저 app/controllers 폴더로 가서 index.server.controller.js 파일을 만들고 코드를 작성하자.


    exports.render  = function(req,res) {
      res.send('FirstMsg');
    };
    
    

    이 컨트롤러 파일은 기본화면으로 들어오는 사용자에게 보여지는 첫번째 컨트롤러가 될 것이다.

    이젠 이 controller 를 라우팅하여 사용해보자.


     app/routes 폴더로 가서  index.server.routes.js 파일을 만들고 코드를 작성하자.


    module.exports = function(app) {
      var index = require('../controllers/index.server.controller');
      app.get('/', index.render);
    } 
    


    라우팅 파일은 app 을 인자로 받는다. 이 app 은 당연히 express 모듈이다. 

    그리고 위 작성한 controller 파일을 require 시킨 뒤 app.get 으로 render를 수행하고 있다. 


    이번엔 express 모듈을 구성하기 위한 파일을 만들기 위해 최상의 폴더로 가서 config 폴더를 만들자.

    config 폴더에 express_config.js 파일을 만들고 다음 코드를 적자. 


    var express = require('express');
    
    module.exports = function() {
        var app = express();
        require('../app/routes/index.server.routes.js')(app);
        return app;
    }
    
    


    이 파일은 이제부터 express 에 관련된 설정과 구성을 초기화 시키는 역활을 할 것이다. 

    코드를 보면 express require 시킨 뒤 module.exports 로 내보내는데 내부에서 아까 작성한 라우팅 파일을 

    require 시키고 (express 를 담은 app을 인자로 보내고 있다)  해당 라우팅 파일을 포함한 app 파일을 return 

    시키게 된다.


    이제 최상위 폴더로 돌아가서 서버를 구동시킬 파일 StartApp.js 을 만들고 코드를 작성하자.

    var express = require('./config/express_config');
    
    var app = express();
    app.listen(3000);
    module.exports = app;
    
    console.log('Server running at localhost');
    
    


    코드를 살펴보면 express 모듈을 위 config 에서 만든 express 구성파일을 가지고 오고 있다. 

    이제 실행하여 제대로 돌아가는지 오타는 없는지 확인하자. 


    CommonJS 모듈 패턴을 사용하여 express 의 초기화 , routing 과 controller 의 모듈화를 통한 다양한 방식으로

    만들어 보았다. 이 패턴이 처음에는 복잡하고 어떤식으로 만들어야 할지 알쏭달쏭 하겠지만 ( 본인도 알쏭달쏭)

    계속 만들어가다 보면 익숙해 질 것이다. 


    마지막으로 현재까지의 파일과 폴더 구조를 보고 다음 장 에는 익스프레스의 추가 구성과 개발자와 유저를 가르는

    환경구성파일 제작 과 뷰 부분을 건드려 볼 것이다. 

    (추가 파일, 폴더에 관해서는 붉은색으로 표시가 되어있다.)


    (지금까지 의 폴더구조와 만든 파일)


    (끝)

    댓글