Express를 이용하여 웹 개발(2)

날짜:

[Node.js]Express를 이용하여 웹 개발(2)

Express를 이용하여 웹 개발(1)에 이어 이번 포스팅에서는 route에서 view로 data를 넘겨주는 방법에 대해서 포스팅을 할 예정이다.
개요
  1. app.js
  2. routes디렉토리
  3. views디렉토리

app.js

  • 요청이 들어오면 express에서 app.js파일을 읽어들인다.
app.js
      1 var express = require('express');
      2 var path = require('path');
      3 var favicon = require('serve-favicon');
      4 var logger = require('morgan');
      5 var cookieParser = require('cookie-parser');
      6 var bodyParser = require('body-parser');
      7
      8 var routes = require('./routes/index');
      9 var users = require('./routes/users');
     10
     11 var app = express();
     12
     13 // view engine setup
     14 app.set('views', path.join(__dirname, 'views'));
     15 app.set('view engine', 'jade');
     16
     17 // uncomment after placing your favicon in /public
     18 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
     19 app.use(logger('dev'));
     20 app.use(bodyParser.json());
     21 app.use(bodyParser.urlencoded({ extended: false }));
     22 app.use(cookieParser());
     23 app.use(express.static(path.join(__dirname, 'public')));
     24
     25 app.use('/', routes);
     26 app.use('/users', users);
     27
     28 // catch 404 and forward to error handler
     29 app.use(function(req, res, next) {
     30   var err = new Error('Not Found');
     31   err.status = 404;
     32   next(err);
     33 });
     34
     35 // error handlers
.
.
.
     58
     59
     60 module.exports = app;
이번 포스팅에서 주목해야할 행을 보도록하겠다.
8 var routes = require('./routes/index');
8행 routes디렉토리의 index(index.js - js확장자 생략 가능)파일을 import한다.
9 var users = require('./routes/users');
9행 routes디렉토리의 users(users.js - js확장자 생략 가능)파일을 import한다.
25 app.use('/', routes);
26 app.use('/users', users);
<그림1>에서 요청이 들어오면 어떻게 처리를 할 것인지를 보여준다.
<그림1>
<그림1>과 같은 요청이 들어왔을 때를 가정하여 설명을 진행하겠다.

routes/index.js

  • 8행에서 ./routes/index.js를 import하였으므로 내용을 살펴보도록하겠다.
routes/index.js
      1 var express = require('express');
      2 var router = express.Router();
      3
      4 /* GET home page. */
      5 router.get('/', function(req, res, next) {
      6   res.render('index', { title: 'Express' });
      7 });
      8
      9 module.exports = router;
여기서 주목해야할 행을 보도록하자.
4 /* GET home page. */
5 router.get('/', function(req, res, next) {
6   res.render('index', { title: 'Express' });
7 });
5행을 보게되면 ‘/‘로 온 요청을 Get하여(받아서) function으로 처리하겠다.
6행 response를 index로 render할 것이고 title은 ‘Express’이다. 여기서 title은 변수이다.
렌더링을 할때는 기본적으로 views디렉토리로 돌려준다.
참고
app.js파일의 14, 15행을 보면 어떤 엔진으로 렌더링을 할 것인지 설정을 하는 행이 있다.
현재는 기본 설정이므로 jade로 되어있지만 이후의 포스팅에서 자주 사용을 하는 엔진인 ejs, ect에 대한 설명과 실제 사용할 때 변경하는 방법에 대해서 포스팅할 예정이다.
이번에는 흐름만 머릿속에 넣어 두도록하자.

views/index.jade

  • 디렉토리에서 알 수 있듯이 view를 담당해주는 역할을 한다.
views/index.jade
      1 extends layout
      2
      3 block content
      4   h1= title
      5   p Welcome to #{title}
jade는 기존 html의 문법과 차이가 있어 사용과 익숙해지는데에 시간이 걸리기에 잘 사용하지 않지만 확인을 해보자.
확인해야할 행은 4, 5행이다.
4   h1= title
5   p Welcome to #{title}
html로 변경해보면 알기 쉽다.
4행
h1= title -> <h1>Express</h1>
5행
p Welcome to #{title} -> <p>Welcome to Express</p>
여기서 title은 routes/index.js에서 넘겨받은 title(변수)이다.
접속하여 결과를 확인해보자.
<그림2>
Express는 <그림3>과 같이 동작을 한다.
<그림3>

댓글

댓글 쓰기