쿠키(Cookie)





Http는 stateless라는 특성을 가지고 있다.

즉, 상태가 유지 되지 않는다는 것인데, 우리가 흔히 사용하는 서비스에서 로그인 기능은

사용자의 상태를 저장하며, 이에 따라 표시하는 웹 페이지의 컨텐츠가 다르다.


그렇다면 상태를 보존하기 위해서 특정 기법을 사용한다는 것인데,

그 중 하나가 쿠키이다.


쿠키란, 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해

인터넷 사용자의 컴퓨터에 설치 되는 작은 기록 정보 파일을 일컫는다.

'쿠키'라는 이름의 어원은 동화인 '헨젤과 그레텔'에서 파생된 것이다.

이 동화에서는 지나온 길을 찾기 위해 주인공들이 쿠키 조각을 떨어뜨린다.

이처럼 쿠키를 통해 이전 상태를 파악할수 있도록 하는것이다.


다만 쿠키의 단점이라면, 보안상으로 상당히/굉장히/너무나 취약하다는 것이다.

이유는 사용자의 정보가 담긴 데이터를 서버와 클라이언트에서 주고 받기때문에

중간에 해커가 이 정보를 탈취하기라도 하면 큰일이기 때문이다.


따라서 실제로는 세션을 많이 사용하지만 우선 쿠키에 대한 예제 부터 살펴보도록하자.





카운터 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var app = express();
 
// 쿠키 기능을 위한 미들 웨어, npm  install로 설치 해야함.
var cookieParser = require('cookie-parser')
 
app.use(cookieParser());
 
// count 라는 쿠키를 저장하고 있다가 count경로로 접근할 때마다 1씩 증가
app.get('/count',function(req, res){
    // 쿠키가 없다면 초기화 있다면 쿠키값을 받아옴
    if(req.cookies.count){
        var count = parseInt(req.cookies.count);
    }else{
        var count = 0;
    }
    
    res.cookie('count',count+1);
    res.send('count: ' + req.cookies.count);
})
 
app.listen('3000'function(){
    console.log('server start on port 3000');
});
cs


예제를 통해 살펴보도록하자.

위의 코드는 쿠키값을 1씩 증가시키며 화면에 출력하는 예제이다.


우선 node js에서는 cookie-parser라는 미들웨어로 쿠키 확인한다.

app.use로 import 된 cookie-parser를 사용한다고 지정해 준다.


해당 미들웨어에서 쿠키는 res내부 cookie라는 메소드로 지정할 수 있다.

첫번째 인자로 쿠키의 이름을 받고 두번째로 값을 받는다.

또한 쿠키의 값은 req.cookies 객체 내부의 값으로 전달된다.

사용자는 이를 호출하여 사용이 가능하다.


따라서 우선 if 문으로 req.cookie.count 값이 있는지 판별한다.

만약 쿠키 값이 있으면 count 변수에 쿠키 값을 넣고, 없으면 0을 넣는다.


그리고 현재의 쿠키값을, 이전의 쿠키값+1로 수정하고,

브라우저에 현재 쿠키값을 전달한다.


이를 실행하면 새로고침 할 때 마다 표시되는 값이 1씩 증가함을 볼 수 있다.



참고 : 생활코딩, 서버사이드 node js

저작자 표시
신고

express generator 사용으로 간편한 개발 환경 구축




express를 사용하다보면 맨땅에 헤딩하는 식으로 처음부터 모든 모듈을 import하고,

디렉토리를 생성한다.

이러한 시간 낭비를 줄이기 위하여 express generator를 사용해보자



1
2
sudo npm install -g express
sudo npm install -g express-generator
cs


우선 위의 명령어로 express와 express-generator를 설치한다.

설치를 완료하고 express -h 명령어를 입력하면 프로젝트를 시작하는데 사용할 수 있는 명령어가 표시된다.

일종의 help라고 생각하면 된다.


이제 node 개발환경을 세팅하기 위해 터미널에

express --ejs --css sass --git 명령어를 입력하면 디렉토리와 파일이 자동으로 생성된다.

위의 명령어는 기본 템플릿이 jade이기 때문에 변경해 준것이고, sass를 사용한다는 의미이다.

명령어는 자신에게 편한 대로 설정하여 사용하면 된다.





다음과 같이 폴더 및 파일이 생성된다.


저작자 표시
신고

 템플릿을 더욱 템플릿 답게 - ejs




 템플릿을 사전에서 검색해보면, 형판, 견본, 본보기 등의 단어라고 나온다.

확실히, PPT 작업을 위해 미리 제작된 견본이나,

웹 사이트를 만들때 제공되는 레이아웃 등을 템플릿 이라고 부른다.

(구글이나 네이버에 PPT, 웹 템플릿을 검색해보면 예가 나온다.)


웹 프로그래밍에서 템플릿이란

큰 틀에서는 웹사이트 전체의 레이 아웃과 디자인일 수도 있지만

작은 범위에서는 컴포넌트 단위의 미리 제작된 틀을 의미 한다.





예를 들어 네이버 메인 하단의 카테고리들은 

상단의 탭을 클릭하면 같은 형식으로 내용만 바뀌게 된다.

이러한 구조 자체를 미리 제작된 '템플릿' 이라고 부르는 것이다.


클라이언트 부분에서는 이러한 구조를 매번 입력하거나 바꿔 줄수 없으므로

script 타입을 템플릿으로 만들어 안의 내용을 바꾸기위해 replace를 사용 하거나

handlebar를 이용해 템플릿을 구현한다.


클라이언트 뿐만 아니라 서버에서도 이러한 템플릿이 제공되는데,

클라이언트의 요청을 받아서 서버에서 랜더링 해준 후 다시 클라이언트로 HTML 형식을 보내주게된다.

대표적으로 ejs나 jade가 있다.


그렇다면 예제를 통해 템플릿을 사용하는 법에 대해 알아보자




1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test page</title>
  </head>
  <body>
    <h1>Hello world!<h1>
    <div class="result"></div>
    <button class="ajaxsend">ajax send</button>
  </body>
  <script src="main.js"></script>
</html>
 
cs


우선 HTML파일을 생성한다.

큰 기능은 없고 템플릿이 들어갈 result div 태그와 ajax 요청을 할 버튼 하나를 만들어준다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.querySelector('.ajaxsend').addEventListener("click",function(){
  sendAjax('http://localhost:3000/');
})
 
function sendAjax(url){
        var oReq = new XMLHttpRequest();
 
        oReq.open('POST', url);
        oReq.setRequestHeader('Content-Type'"application/json")
        oReq.send();
 
        oReq.addEventListener('load'function(){
          var result = oReq.responseText;
          console.log(oReq.responseText)
          document.querySelector('.result').innerHTML = result
        })
}
 
cs


다음으로 자바스크립트 코드이다.

간단하게 버튼을 클릭하면 Ajax를 요청하는 이벤트를 등록한다.

또한 Ajax로 부터 들어온 HTML 데이터를 화면에 랜더링 시켜주도록 하자.




1
2
3
4
5
<div>
  <p><%=txt1%></p>
  <p><%=txt2%></p>
</div>
 
cs


그 후 ejs 템플릿 코드를 작성한다.

여기서 중요한점은 html로 시작되는 전체 코드를 작성 하지 않는 다는 점이다.

필요에 의해서 그럴수는 있지만, 템플릿이라는 이름에 맞게 

부분적인 코드만 사용하는 것을 지향하는 바이다.


ejs는 <%=>문법을 사용하며, 이는 jsp와 동일하다.

render 함수를 통해 인자로 들어온 값들이 여기에 랜더링 된다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var express = require('express');
var app = express();
 
app.set('view engine''ejs');
app.set('views''./views');
app.use(express.static('public'));
 
app.get('/',function(req,res){
  res.sendFile(__dirname + '/public/main.html');
})
 
app.post('/',function(req,res){
  res.render('template',{txt1:"hi",txt2:"welcome"})
})
 
app.listen(3000function(){
  console.log("Start server on port 3000");
})
 
cs


마지막으로 서버쪽 코드이다.

app.set으로 템플릿 엔진과 템플릿 경로를 지정해준다.  

ajax로 post요청이 들어오면 랜더링된 HTML 코드를 보내주는 간단한 코드이다.






실제로, 테스트를 해본 결과

버튼을 누르면 가운데 div 태그에 우리가 요청한 템플릿 값이 들어오는걸 볼 수있다.

또한, 템플릿의 값이 상황에 따라 바뀌면서, 코드는 줄어드니 상당히 강력한 기능이다.

이와같이 ajax 요청을 통해 부분으로 페이지를 바꾸어주면 훨씬 동적으로 보인다.

예제를 제외하고 템플릿으로 전체 페이지를 로드하는 일은 없도록 하자.


(여담으로, 클라이언트 랜더링과 서버 랜더링의 장단점은 있겠으나

무엇이 낫다고 명확하게 말하기는 어렵다.

들리는 바에 의하면 서버 사이드 랜더링이 조금 더 빠르다고는 하나 확실치 않다.

더 많은 공부가 필요한 것 같다.)



예제코드



저작자 표시
신고

다중 쿼리를 사용할 때




MySQL 모듈을 사용할때 connection은 비동기적으로 발생하기 때문에

여러번의 connection 호출을 통해 클라이언트에게 데이터를 전달해 줄수 없다.

connection은 한번만 호출되어 res.json 등을 통해 클라이언트에게 데이터를 전달해주는데

때문에, 이와같은 상황에서는 다중 쿼리를 사용해야한다.




1
2
3
4
5
6
7
8
9
var connection = mysql.createConnection({
  host: loginData.host,
  port: 3306,
  user: loginData.user,
  password: loginData.password,
  database: 'example',
  multipleStatements: true
})
connection.connect();
cs


다중 쿼리에서 가장 중요한것은 초기 설정이다.

createConnection에서는 데이터베이스를 사용하기 위한 초기 설정들을 객체로써 입력받는데

이때 multipleStatements를 ture로 해주어야 다중 쿼리를 사용할 수 있다.




1
2
3
4
5
6
7
var query = 'select `email`,`id`,`img` from user where id="ma";' +
      'select score from scoreboard where uid="ma" ORDER BY num DESC limit 5;' +
      'select count(*) from scoreboard where score=125;';
 
  connection.query(query, function(err,rows){
    ...
  }
cs


이후에 다음과 같이 다중 쿼리를 작성한 후

connection.query에 인자로 전달하면 rows에서 배열로 결과 값을 받을수 있다.

저작자 표시
신고

[NodeJS] Chart JS와 데이터 베이스 연결하기 - 2




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.post('/'function(req, res){
  var responseData = {};
 
  var query =  connection.query('select score from scoreboard where uid="ma" ORDER BY num DESC limit 10'function(err,rows){
    responseData.score = [];
    if(err) throw err;
    if(rows[0]){
      responseData.result = "ok";
      rows.forEach(function(val){
        responseData.score.push(val.score);
      })
    }
    else{
      responseData.result = "none";
      responseData.score = "";
    }
    res.json(responseData);
  });
});
cs


클라이언트를 완성했고, 남은건 서버 부분이다.

button을 클릭하여 Ajax로 POST 요청이 날아오면 쿼리를 데이터베이스에 전송한다.

scoreboard 테이블에 id를 검색해서 최신순의 데이터 10개를 가져오는 쿼리이다.


만약 데이터가 있다면 순회하며 responseData에 배열로 저장을 시킨다.

모두 저장되면  json 형식으로 클라이언트에게 보내주도록한다.

이 데이터 값을 sendAjax 함수에서 가공해 차트의 데이터를 최신화 한 후 업데이트 한다.





초기 차트의 화면이다.

데이터를 0,0,0,0,0으로 설정해 주었기 때문에 차트에 아무 것도 그려지지 않는다.





버튼을 클릭하면 데이터베이스에서 데이터 값을 받아와 그려주게된다.

차트의 배경 값은 커스터마이징 하여 변경할 수있다.



예제코드

저작자 표시
신고

Chart JS와 데이터베이스 연결하기 - 1




데이터베이스의 자료들을 효과적으로 전달할수 있는 방법 중 하나는 시각화이다.

이러한 시각화를 도와주는 라이브러리중 Chart JS가 있는데 

데이터베이스와 연동하여 현재의 데이터를 보여주는 예제를 작성해보자




1
2
3
4
5
6
CREATE TABLE `scoreboard` (
`num` int NOT NULL auto_increment,
`uid` varchar(10NOT NULL,
`score` int NOT NULL,
PRIMARY KEY (`num`)
);
cs


우선, 데이터베이스를 만든다.

예제 소스는 현재의 스코어를 저장해서 출력한다고 가정한다.





임의의 데이터를 삽입한 상태이다.

여기까지 했으면 정적 페이지 생성으로 넘어가자




1
2
<canvas id="myChart" width="400" height="300"></canvas>
<button id="sendAjax">button</button>
cs


HTML작업을 위해 main.html을 생성했다.

HTML파일에는 위와 같이 Ajax요청을 할 버튼과

차트를 그릴 캔버스 하나만 넣어준다.

그리고 <head>부분에 Chart JS의 스크립트를 넣어주는데 


https://cdnjs.com/libraries/Chart.js

여기에 들어가면 가장 최신버전의 링크를 찾을수 있다.

복사해서 붙여넣기 해주자




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
var data = {
    labels: [
        "1""2""3""4""5"
    ],
    datasets: [
        {
            label: 'Your Score',
            data: [
                00000
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }
    ]
};
cs


HTML 작업을 마쳤으면 main.js를 작성한다.

우선 차트에 들어갈 데이터를 data 객체를 생성해서 값을 넣어준다.

예제에서 사용된 데이터 셋은 다음과 같다.


label : 제목

data : 차트에 들어가는 데이터의 값

backgroundColor : 막대 그래프의 배경색

borderColor : 막대 그래프를 감싸는 border의 색

borderWidth: border의 넓이




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var options = {
    animation: {
        animateScale: true
    },
    responsive: false,
    scales: {
        yAxes: [
            {
                ticks: {
                    beginAtZero: true
                }
            }
        ]
    }
};
cs


다음은 차트에 추가 옵션값이다.

animation 효과를 넣기 위해 true값으로 설정해 준다.

이때 yAxes 설정을 해주지 않으면 애니메이션 효과가 바닥에서 부터가 아닌 가운데에서 시작되므로

scales: yAxes값을 beginAtZero로 꼭 설정해 줘야한다.

animation효과를 넣지 않으려면 false로 설정해 주면된다.


또한 가장 중요한 옵션으로, 차트가 canvas의 크기에 맞추어 생성되기 위해

responsive을 false로 설정해준다.

해당 설정값이 없으면, chart가 canvas와 상관없이 사이즈가 엄청 커진다.




1
2
3
4
5
6
var ctx = document.getElementById("myChart").getContext('2d');
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
cs


마지막으로 Canvas를 선택 후 해당 태그에 차트를 만들어 주면 완성이다.

type을 변화 시킴으로써 차트의 모양을 바꿔 줄수 있다.

data와 options에서는 위에서 설정해준 값을 넣어준다.




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
var button = document.getElementById("sendAjax")
 
button.addEventListener("click"function() {
    sendAjax('http://localhost:3000/');
})
 
function sendAjax(url) {
    var oReq = new XMLHttpRequest();
 
    oReq.open('POST', url);
    oReq.setRequestHeader('Content-Type'"application/json"// json 형태로 보낸다
    oReq.send();
 
    oReq.addEventListener('load'function() {
        var result = JSON.parse(oReq.responseText);
        var score = result.score;
        var comp_data = data.datasets[0].data;
 
        for (var i = 0; i < comp_data.length; i++) {
            comp_data[i] = score[i];
        }
 
        data.datasets[0].data = comp_data;
        myBarChart.update();
    })
}
cs


클라이언트 정적페이지의 마지막으로, button 기능이다.

버튼을 누르면 ajax요청을 하고 데이터베이스의 값을 받아온다.

받아온 데이터를 기존 데이터 값과 비교하여 업데이트를 해주면서 차트 기능은 끝이난다.




예제코드

저작자 표시
신고

ejs include (Include Template)



작업을 하다보면 header나 footer등의 내용이 중복되는 경우가 발생한다.

중복되는 코드를 하나하나 다 써준다면 

변화가 생길때마다 해당하는 모든 코드를 찾아 고쳐야한다.

따라서 템플릿을 이용해서 이렇게 중복되는 코드를 모듈화하여 사용할 수 있다.

템플릿 엔진으로는 ejs를 사용한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var express = require('express');
var app = express();
 
app.listen(3000function(){
  console.log("server start on port 3000");                                                                  
})
 
app.set("view engine""ejs");
 
// index page
app.get('/'function(req, res) {
    res.render('main');
});
 
// about page
app.get('/about'function(req, res) {
    res.render('about');
});
cs
 

일반적인 node 코드이다.

3000번 포트로 서버를 열고 템플릿 엔진에 대한 세팅을 해준다.

결과를 비교하기 위해 main과 about, 2개 루트를 설정한다.




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
<!-- views/head.ejs -->
 
<meta charset="UTF-8">
<title>Super Awesome</title>
 
<!-- views/header.ejs -->
 
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon glyphicon-tree-deciduous"></span>
                EJS Is Fun
            </a>
        </div>
 
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
      
    </div>
</nav>
 
<!-- views/footer.ejs -->
 
<p class="text-center text-muted">© Copyright 2014 The Awesome People</p>
cs


head, header, footer에 해당하는 3개의 템플릿을 작성한다.

템플릿 파일은 views 안에 생성한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./head %>
</head>
<body class="container">
 
    <header>
        <% include ./header %>
    </header>
 
    <main>
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>                                                        
        </div>
    </main>
 
    <footer>
        <% include ./footer %>
    </footer>
 
</body>
</html>
cs


main 페이지이다.

각각의 템플릿이 들어갈 영역을 


<% include "템플릿 파일 경로" %>


위와 같은 코드로 설정해준다

해당 경로에 있는 템플릿을 태그 영역 내부에 추가해준다는 뜻이다.




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
<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./head %>
</head>
<body class="container">
 
    <header>
        <% include ./header %>
    </header>
 
    <main>
        <div class="row">
            <div class="col-sm-8">
 
                <div class="jumbotron">
                    <h1>This is great</h1>
                    <p>Welcome to templating using EJS</p>                                                 
                </div>
 
            </div>
            <div class="col-sm-4">
 
                <div class="well">
                    <h3>Look I'm A Sidebar!</h3>
                </div>
 
            </div>
        </div>
    </main>
 
    <footer>
        <% include ./footer %>
    </footer>
</body>
</html>
cs


about 페이지 이다

main 페이지와 중간의 내용만 다를 뿐 header와 footer는 동일하다.




 



좌측이 main, 우측이 about 페이지이다.

동일한 header, footer를 가지고 있으며 내용이 다른것을 확인할 수 있다.


예제코드



신고

Passport - logout 처리 



1
2
3
4
5
6
7
8
9
10
11
12
var express = require("express")
var app = express();
var router = express.Router();
 
router.get('/'function(req, res){                                                                          
  req.logout();
  res.redirect('/login');
});
 
module.exports = router;
 
 
cs


앞서 보았던 복잡한 로그인 기능에 비해 로그아웃은 상당히 쉽다

로그인 버튼이 클릭 되면 위와 같은 페이지로 이동하도록 하고

req.logout()으로 세션을 제거한다.

세션을 잃은 후 다시 돌아갈 페이지로 redirect해주면 된다.



예제코드




신고

Passport - Ajax 기반의 인증 처리 






우선 login에 필요한 페이지를 새로 만든다.

login/index.js와 views/login.ejs를 추가한다.

코드 내용은 예제 링크를 참조한다.
 

Ajax로 통신을 하므로 Json 형식으로 응답을 줘야한다.

이때 사용되는 것이 passport의 custom callback이다.




1
2
3
4
5
6
7
8
9
10
11
12
router.post('/'function(req, res, next){
  passport.authenticate('local-login',function(err, user, info){
    if(err) res.status(500).json(err);
    if(!user){return res.status(400).json(info.message);}
 
    req.logIn(user, function(err) {
      if (err) { return next(err); }
      return res.json(user);
    });
  })(req, res, next);
})
 
cs


다음과 같은 코드를 login/index.js 파일에 추가 해준다.

유저가 없을 때/500 오류가 발생했을 때 json으로 응답을 준다


중요한것은 req인데 req.logIn이 정상적으로 동작한다면 

serializeUser 등의 메소드로 자연스럽게 이어지도록 되어있다.

req.logIn의 마지막에서는 user를 json으로 redirect 하게된다.




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
document.querySelector('.ajaxsend').addEventListener('click'function(){
        var email =  document.getElementsByName('email')[0].value;
        var password =  document.getElementsByName('password')[0].value;
        sendAjax('http://localhost:3000/login',{'email': email, 'password':password});
      })
 
      function sendAjax(url,data){
        data = JSON.stringify(data);
 
        var oReq = new XMLHttpRequest();
        oReq.open('POST', url);
        oReq.setRequestHeader('Content-Type''application/json')
        oReq.send(data);
 
        oReq.addEventListener('load'function(){
          var result = JSON.parse(oReq.responseText);
          var resultDiv = document.querySelector('.result');
 
          if(result.email) {
            resultDiv.innerHTML = 'welcome '+ result.email +'!!'
            window.location.href = '/main'
          }
          else if(oReq.status === 400){
            resultDiv.innerHTML = result + "<div class='sign up'><a href='/join'>Sign up</a></div>"
          }
          else resultDiv.innerHTML =  result;
        });
      }
 
cs


Ajax 통신을 보내는 ejs파일에는 다음과 같은 코드가 들어가게 된다.

버튼을 클릭하여 ajax요청이 되면 방금 만든 커스텀 콜백 함수로 들어가게 된다.



예제코드

신고

Passport 기반 세션처리




1
2
3
4
5
6
7
8
9
passport.serializeUser(function(user, done){
  console.log("passport session save :", user.id);
  done(null, user.id);
});
 
passport.deserializeUser(function(id, done){
  console.log("passport session get id :", id);                     
  done(null, id);
});
cs


세션을 저장하는 부분에 대한 처리이다.

strategy의 콜백함수에서 done의 매개변수로 false를 주지 않고 객체를 전달했을 

그값을 serialize로 사용할수 있다. 

이러한 값은 serialize 콜백 함수에 user값으로 전달이 된다.

(console.log는 값을 확인 하기 위한 로그이다)




1
2
3
4
5
// done에 false가 전달 되었을때(에러 시)
return done(nullfalse,{message: 'your email is already used'})                                            
 
// done에 객체가 전달 되었을때
return done(null, {'email':email,'id' :rows.insertId})
cs


즉 2번째와 같은 상황에서 객체로 전달된

{'email':email, 'id':row.inserId}를 serialize로 사용할 수 있다는 말이다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var express = require("express");
var app = express();
var router = express.Router();
var path = require('path');
 
router.get('/'function(req, res){
  console.log('main js loaded', req.user);
  var id = req.user;
  res.sendFile(path.join(__dirname, '../../public/main.html'));                                              
  res.render('main.ejs',{'id':id});
})
 
module.exports = router;
 
 
cs


로그인이 성공하면 /main을 요청하는데 미리 main.js 파일을 생성해뒀다.

req.user로 deserialize의 id 값에 접근할 수 있다.

이 값을 main.ejs에 전달해 준다.




1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>main</title>
  </head>
  <body>
    <h1>hello world</h1>
    <h3>welcome, <%id %> !!</h3>                                                                        
  </body>
</html>
cs


main.ejs 파일이다.

main.js에서 받아온 id 값을 출력한다.






다음과 같은 결과가 나온다.

숫자 2은 auto_increment 된 유저의 id 값이다. 



예제코드


신고

+ Recent posts

티스토리 툴바