2015년 1월 4일 일요일

[node 웹페이지 만들기] 2.node+express+ejs - 2

EJS 뜯어보기

  • 전에 기본 예제를 실행해 보겠습니다.

EJS 예제

  • ejs의 start는 node bin/www 로 시작합니다.


1
2
C:\web\EJS>node bin/www
  • ????
  • 서버가 시작된겁니다.
localhost:3000
  • 로컬서버 인 만큼 주소는 localhost:3000(127.0.01:3000)으로 접속하면 예제 페이지를 볼수 있습니다.

드디어 뜯어보기

  • 시작이 bin 폴더의 www이니까 www파일 부터 살펴보겠습니다.


1
2
3
4
5
6
7
8
9
#!/usr/bin/env node
var debug = require('debug')('EJS');
var app = require('../app');

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

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});


  • 2번 라인 : 디버깅을 위한것
  • 3번라인 : ../app을 불러오는 것입니다.
  • 5번 라인 : port번호를 3000으로 설정합니다.
  • 7번~ : 서버를 시작하는 (클라이언트를 기다리는) 명령어가 되겠습니다. 
    • 8번 라인에 console.log('server star'); 를 넣어 서버가 시작됨을 알수 있습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#!/usr/bin/env node
var debug = require('debug')('EJS');
var app = require('../app');

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

var server = app.listen(app.get('port'), function() {
 console.log("server start");
  debug('Express server listening on port ' + server.address().port);
});
  • 이렇게 한다면 서버를 구동할경우

1
2
C:\web\EJS>node bin/www
server start

  • server start를 확인 할수 있습니다.
  • 다음은 ../app 파일을 알아보겠습니다.


 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

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

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

  • 8,9라인과 25,26라인을 통하여 ejs파일 경로를 등록하고 연결하는 것을 볼 수 있습니다.
  • 29라인과 39번이후 라인을 통해 404(페이지를 찾을수 없는 경우)와 500(서버 에러)를 처리할 수있습니다.
  • 그럼 계속 따라 들어가보기 위해 /routes/폴더의 index.js파일을 따라 들어가보겠습니다.


1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

  • express.Router.get을 통하여 
    • '/'의 경로에 r
    • esponse(res)에 index.ejs과 title:Express로 넣어 렌더링 함을 알수 있습니다.
  • 5번줄에 get 대신에 post를 쓴다면 post 방식으로 작동합니다.
  • 그럼 마지막으로 index.ejs파일로 따라 들어가 보겠습니다. index.ejs파일의 경로는 위의 app.js에 설정하였던 views 디렉터리 아래 있습니다.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>
  • ?! html과 같은 양식입니다. html을 작성하듯이 작성하고 <%=%>을 통하여 동적으로 페이지를 보여줄 수 있습니다.
  • <%=title%>을 통하여 index.js에서 넣어줬던 title을 값을 받아 동적으로 보여주게 됩니다.
  • stylesheets와 javascript 파일 등은 publice 폴더 아래에 위치하면 됩니다,

작성자: 시간:
라벨: , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)