레이블이 ejs인 게시물을 표시합니다. 모든 게시물 표시
레이블이 ejs인 게시물을 표시합니다. 모든 게시물 표시

2015년 1월 4일 일요일

[node 웹페이지 만들기] 3.ejs 등록,실행, 페이지 간 값 넘기기

app.js에서...

  • 저는 이전에 만들어 놨던 페이지(회원가입)등을 member에서 관리를 할것입니다. 때문에 app.js에 등록을 하고 route파일을 만들고 ejs파일을 등록하는 식으로 진행 하겠습니다.

1
2
3
4
5
6
7
...
var routes = require('./routes/index');
var users = require('./routes/users');
...
app.use('/', routes);
app.use('/users', users);
...


  • app.js에서 이곳에 member route를 추가로 등록 하겠습니다.

1
2
3
4
5
6
7
8
9
...
var routes = require('./routes/index');
var users = require('./routes/users');
var member = require('./routes/member');
...
app.use('/', routes);
app.use('/users', users);
app.use('/member', member);
...


  • /member route에 등록된 모든 url은 주소:3000/member에 등록됬습니다.

member.js


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

/* GET home page. */
router.get('/join', function(req, res) {
  res.render('member/join');
});

module.exports = router;



  • view/member/join.ejs는 주소:3000/member/join 의 url을 가지게 됩니다.
  • 다음은 ejs파일 넣어주는 일만이 남았습니다.

EJS 파일로 변경하기

  • [node 웹페이지 만들기] 1번이였던 join.html을 join.ejs로 바꿔줍니다. 끝
    • 제가 만들어 줬던 join페이지는 동적으로 구성할 필요가 없기 때문에 바꿔줄 것이 없습니다.
  • 또한 관련된 js와css를 public 내의 알맞는 위치에 넣어줍니다.

실행해보기

  • 정겨운 콘솔로 프로젝트 디렉터리에 들어가 node bin/www로 실행시켜 봅시다.
  • 그리고 127.0.0.1:3000/member/join 으로 들어가면

  • 알맞는 위치에 잘 작동하는 것을 알수 있습니다.

값넘기기


  • 회원가입에서 가입 버튼을 누르면 form에 등록된 주소로 값을 넘겨보도록 하겠습니다.
  • 값이 넘어갈 페이지를 members.ejs를 간단히 만들어 봤습니다.


 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
<!DOCTYPE html>
<html lang='ko'>
<head>
 <meta charset='utf-8'/>
 <title>Members</title>
 <link rel="stylesheet" type="text/css" href="../style/mycss2.css">
 <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="../js/myscript2.js"></script>
</head>
<body>
 <header></header>
 <div class = "body">
  <div class ="wrapper_table">
   <table>
    <thead>
     <tr>
      <td>아이디</td>
      <td>비밀번호</td>
      <td>이름</td>
      <td>생년월일</td>
      <td>휴대전화</td>
      <td>성별</td>
      <td>이메일</td>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><%= m_id %></td>
      <td><%= m_pass %></td>
      <td><%= m_name %></td>
      <td><%= m_tel %></td>
      <td><%= m_date %>
      <td><%= m_gender %></td>
      <td><%= m_email %></td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
</body>
</html>

  • 따라서 route파일(member.js)에도 추가하겠습니다.


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

/* GET home page. */
router.get('/join', function(req, res) {
  res.render('join');
});

router.post('/members', function(req,res){
 console.log(req);
 res.render('members');
});
module.exports = router;

  • 프로젝트 1장에서 설명했듯이 회원가입과 같이 DB의 값을 입력,수정,삭제 하는 경우는 post로 처리해야 하기 때문에 route.post로 처리합니다.
  • 그리고 넘어오는 값이 어떤식으로 구성되어 있는지 아직 모르기 때문에 request(req)을 통채로 읽어보도록 하겠습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
...
body:
      { id_ch: 'true',
 pass_ch: 'true',
 email_ch: 'true',
 m_tel: '010-1234-5678',
 m_id: 'GilDong',
 m_pass: 'password1',
 m_pass_ch: 'password1',
 m_name: '홍길동',
 m_date: '2000-01-01',
 tel1: '010',
 m_tel2: '1234',
 m_tel3: '5678',
 m_gender: '남',
 m_email: 'GilDong@Hong.com' },
...
  • 이런식으로 콘솔창에 출력된 것을 알수 있었습니다. 브라우저에는 변수값이 입력되지 않아 출력이 되지 않습니다.
  • 우리가 원하는 정보는 req.body에 있다는 것을 알았습니다.
  • 보낸 값을 member.ejs에 출력을 하기 위해 member.js의 11번 라인을 수정해 줍시다.


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

router.get('/join', function(req, res) {
  res.render('join');
});

router.post('/members', function(req,res){
 // console.log(req);
 res.render('members',req.body);
});
module.exports = router;

  • 이제 서버를 리부트 해서 다시 해봅시다.
  • 이렇게 전송하여


  • 이런식으로 결과를 얻어 제대로 전송됬음을 확인했습니다.
  • 만약 파라미터 값들의 이름을 페이지마다, 그리고 나중의 DB와 다르게 할 경우 다시 맵핑하여 입력해야 하는 번거로움이 생기므로 일치시키는게 좋습니다.
작성자: 시간: 댓글 7개:
라벨: , , ,

[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 폴더 아래에 위치하면 됩니다,

작성자: 시간: 댓글 없음:
라벨: , ,

2015년 1월 3일 토요일

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


  • nodejs에 대한 설명은 길기도 하고 여러가지가 있지만 위키백과_nodejs 로 대체하겠습니다. 아주 간략히 설명하자면, 자바스크립트로 작성하는 서버사이드 플랫폼입니다.
  • 기본적으로 설치에 대해서는 http://nodejs.org/에서 각자에게 맞는 운영체제에 따라 설치만 해주면됩니다. 이 외의 모든 라이브러리들은 npm을 통하여 설치,사용 할수 있습니다. 
    • npm(Node Packaged Modules)은 Node.js로 만들어진 모듈(라이브러리)을 인터넷을 통하여 쉽게 설치해주는 패키지 모듈입니다.
    • npm install [모듈] 이라는 명령어로 손쉽게 설치 가능합니다.
  • Nodejs에는 수많은 모듈들이 있으며 https://www.npmjs.com/ 에서 확인할 수 있습니다.
  • 수많은 모듈중에 Express는 웹 프레임워크로서 가장 사랑받는 모듈이라고 합니다. 그래서 저 또한 Express를 통하여 웹서버를 구축해보려고 합니다.

Express 설치


끝
원하는 디렉터리에서 
1
npm install express
명령어 하나면 끝납니다.

Express 예제


  • https://www.npmjs.com/package/express 에 나와 있는 예제입니다.


1
2
3
4
5
6
7
8
var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)


  • 위의 내용을 js파일로 Express 설치한 디렉터리에 만들어 줍니다.(저의경우 sample.js)
  •  '/'의 주소+3000포트로 Hello World로 뿌려주게 됩니다.
  • 그리고 cmd에서 node 명령어를 이용하여 실행시켜줍니다.



1
node sample.js

  • 실행하면 아무런것도 보이지 않는게 정상이고 실행중입니다. Ctrl+C를 눌러 정지시킬수 있습니다.
  • 실행을 확인하기 위해서 127.0.0.1:3000/ 으로 접속하게 되면

  • 의 화면을 볼수 있습니다.
  • 이로서 Expreess의 설치 및 실행을 해 보았습니다.

 Express template

  • 위에서 이미 'Hello World'를 띄우는데성공을 하였더라도 위와같은 방법으로 웹을 구축하려면은 엄청난 작업이 될것입니다.
  • 템플릿을 이용하면 손쉽게 html 등을 동적으로 만들어 줄수 있습니다.
  • html을 손쉽게 만들어주는 템플릿 엔진으로 대표적인 jade와 ejs 두 가지가 있습니다. 저는 ejs를 이용하여 만들어보겠습니다.
  • express-generator를 설치해 줍니다. -g는 전역모듈로서 사용하겠다는 명령어입니다. 역시 cmd에서 작성합니다.


1
npm install express-generator -g

  • 이번에도 한줄만

  • C:\Users\[계정명]\AppData\Roaming\npm\node_modules\express-generator 에서 expreess-generator가 설치됬음을 볼 수 있습니다.
  • expreess-generator를 설치 해 줬으므로 이제 EJS 뼈대를 생성해 줄 차례입니다.

EJS 설치

  • 이제 cmd에서 작업중이던 EJS를 다룰 폴더를 생성하고 뼈대를 생성해 줍니다.
  • 아래 부분에 install dependencdies 라고 출력된 부분을 볼수 있습니다.
  • 의존성 설치를 해야 한다는 것인데 자동으로 생성된 create 두번째 줄의 package.json을 통하여 의존 모듈을 정의하고 있습니다. ejs를 사용하는데 필요한 모듈과 버전을 json표기법으로 명시한것입니다. 이것들을 npm install 이란 명령어를 통하여 자동으로 설치, 관리합니다.
  • 아래는 package.json의 내용입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "name": "EJS",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.9.0",
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5"
  }
}

  • ejs 시작은 node bin/www로 한다는 것을 알수 있고 private를 보아 독립?되어 있다는 것을 알수 있습니다.
  • dependencies 의 내용을 보아 필요한 모듈과 호환되는 버전을 알 수 있습니다.
  • 위에 설명한거와 같이 npm install로 의존성을 설정합시다.


 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
C:\web\EJS>npm install
ejs@0.8.8 node_modules\ejs

cookie-parser@1.3.3 node_modules\cookie-parser
├── cookie-signature@1.0.5
└── cookie@0.1.2

debug@2.0.0 node_modules\debug
└── ms@0.6.2

morgan@1.3.2 node_modules\morgan
├── basic-auth@1.0.0
├── depd@0.4.5
└── on-finished@2.1.0 (ee-first@1.0.5)

serve-favicon@2.1.7 node_modules\serve-favicon
├── fresh@0.2.4
├── ms@0.6.2
└── etag@1.5.1 (crc@3.2.1)

express@4.9.8 node_modules\express
├── fresh@0.2.4
├── cookie@0.1.2
├── merge-descriptors@0.0.2
├── cookie-signature@1.0.5
├── utils-merge@1.0.0
├── escape-html@1.0.1
├── range-parser@1.0.2
├── vary@1.0.0
├── methods@1.1.0
├── serve-static@1.6.4
├── finalhandler@0.2.0
├── parseurl@1.3.0
├── media-typer@0.3.0
├── path-to-regexp@0.1.3
├── depd@0.4.5
├── on-finished@2.1.1 (ee-first@1.1.0)
├── etag@1.4.0 (crc@3.0.0)
├── qs@2.2.4
├── type-is@1.5.5 (mime-types@2.0.7)
├── send@0.9.3 (ms@0.6.2, destroy@1.0.3, mime@1.2.11, on-finished@2.1.0)
├── proxy-addr@1.0.4 (forwarded@0.1.0, ipaddr.js@0.1.5)
└── accepts@1.1.4 (negotiator@0.4.9, mime-types@2.0.7)

body-parser@1.8.4 node_modules\body-parser
├── media-typer@0.3.0
├── bytes@1.0.0
├── raw-body@1.3.0
├── depd@0.4.5
├── on-finished@2.1.0 (ee-first@1.0.5)
├── qs@2.2.4
├── iconv-lite@0.4.4
└── type-is@1.5.5 (mime-types@2.0.7)

C:\web\EJS>


  • 자동으로 package.json에 명시되어 있던 모든 모듈을 자동으로 설치 하였습니다. 참 편리하네요
  • 이로서 EJS 설치가 완료되었습니다.

EJS 뜯어보기


  • 는 다음에..
작성자: 시간: 댓글 없음:
라벨: , ,
피드 구독하기: 글 (Atom)