로그인 기능, 로그인 정도 다른 페이지로 넘기기

JS
node, ejs

defalt

뭔지는 잘 모르겠지만 일단 기본으로 셋팅을 해야 되는 부분.
이 부분은 필요에 따라 찾아보고 셋팅하면 될듯.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//app.js
var express = require('express');
var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
var app = express();
app.set('port', process.env.PORT || 3000);
var router = express.Router();
http.createServer(app).listen(app.get('port'), function(){
    console.log('익스프레스 서버를 시작했습니다.' + app.get('port'));
});
app.use('/public', express.static(path.join(__dirname, './public')));
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

ejs를 쓰기 위해 view 셋팅 변경

ejs는 <%= %>태그를 사용해서 여기에서 받은 정보를 다른 페이지에서 볼 수있게 하는 template…이거 말고도 다른 기능이 있겠지만 ㅎㅎ

우선 설치를 해봅시다. 명령 프롬프트에 npm으로 설치

1
npm install ejs --save

그리고 view셋팅을 변경해 줍니다.

1
2
3
4
5
6
7
8
9
10
//app.js
// app.engine('html', hbs({extname: ".html"}));
// app.set('views', path.join(__dirname, './public'));
// app.set('view engine','html');
//기존의 것을 변경
app.set('views', path.join(__dirname, './public'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

로그인 파일과 결과 페이지 만들기

저번에 만들었던 파일을 재활용합니다. public 폴더 안에 login.html 과 output.html 파일 만들어주기. 타이틀에서도 알 수 있듯이 login에서 ID와 password를 입력하면 output.html에서 보여지게 할겁니다. 

1
2
3
4
5
6
7
8
9
10
11
12
//login.html
...
<body>
    <form method="post" action = "/output">
        <h4>아이디</h4>
        <input type="text" name="id">
        <h4>패스워드</h4>
        <input type="password" name="password">
        <button type="submit">전송</button>
    </form>
</body>
...

Route 설정하기

라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 쉽게는 그냥 url을 지정하는 것이라고 생각하시면 될 듯 합니다. 이전에는 url에 정보를 담아 던지는 방법밖에 없어서 url자체가 길어지고 지저분 할 수 밖에 없었다고 하는데 라우팅을 통해서 간단한 url을 제공할 수 있습니다.

하지만 너무 제멋대로 실제 파일구조와 너무 다른 url을 생성한다면 같이 일하는 사람에게 욕먹음…

login.html 파일을 /login으로 url지정하기

1
2
3
router.route('/login').get((req, res)=>{
    res.render('login.html');
});

위에서 /public 경로를 지정해 주었기 때문에 render에서는 이후 파일 이름만 넣어 줍니다.여기에서 확장자도 같이 넣어 주도록 합니다. 안그럼 오류나.. route에는 실제 url에 들어갈 이름 지정.

oupput.html파일을 /output으로 url지정

1
2
3
router.route('/output').post((req, res)=>{
    res.render('output.html');
});

그리고 맨 끝에는 미들웨어에 router객체를 등록하는 태그를 넣어줍니다.

1
2
app.use('/', router);
//미들웨어에 router객체를 등록

login.html에서 넘어온 정보를 output.html에 뿌려주기

생각보다 넘나 간단한 것. 위에서 라우터 등록하는 부분에 user정보를 렌더합니다(?)

1
2
3
4
5
6
//app.js
router.route('/output').post((req, res)=>{
    console.log('output 처리함')
    var user = {id:req.body.id, password:req.body.password}
    res.render('out.html', user);
});

그리고 헷갈려서 여태 보지 않았던 output.html을 봅시다. body안에 정보를 넣어 줍니다. 이때 태그는 <%= %>이런 형식의 태그를 씁니다. 

1
2
3
4
5
6
7
8
9
10
//output.html
<body>
    <h1>Express서버에서 응답한 결과입니다.</h1>
    <p>
        <%= id %>
    </p>
    <p>
        <%= password %>
    </p>
</body>

app.js에서 user의 id와 password를 키값으로 등록을 했기 때문에 HTML안에서는 간단하게 키값으로만 쓸 수 있습니다.

이제 node app.js로 노드를 서버를 실행시키고 localhost:3000/login에 들어가 정보를 입력하면 output으로 이동하는 것을 확인할 수 있습니다.

공유하기 댓글