[생활코딩] NodeJs 활용하기(2)

Session

: cookie를 조금 더 개선한 방법

쿠키와 서버의 데이터베이스를 잘 조합해 세션을 만든다

 

cookie는 id나 비밀번호를 다루기에는 위험하다 → 보안 문제

 

세션은 서버가 쿠키 방식으로 클라이언트에게 데이터를 저장하는데 이때 쿠키와 다르게 사용자의 식별자 id 값만을 저장한다 

→ 실제 데이터는 서버의 database에 저장되어 있다

 

그렇기 때문에 클라이언트가 id를 갖고 서버에 접속할 때 서버가 해당 id 값에 해당하는 data를 읽어와 사용한다

 

 

↓↓ 실제로 세션의 set-cookie에는 connect.sid의 값만 있고 쿠키의 set-cookie에는 count의 정보가 담겨있는 것을 볼 수 있다

(왼) session / (오) cookie

다시 말하면 session은 클라이언트에 사용자의 id 값만 저장하고, cookie는 클라이언트에  실제 정보를 저장한다고 생각할 수 있다

 

---

이제 session 기능을 구현해볼 차례!

 

먼저 express-session을 설치해준다

 

 

그리고 세션을 이용하기 위한 기본 코드를 추가해준다!

let session = require('express-session');

app.use(session({  // session

    secret: 'rri4iutrp9wroiorej;', // 랜덤한 값

    resave: false,

    saveUninitialized: true

}))

express 사용을 제외한 부분!

 

 

그리고 다음으로 간단을 예제를 뚱땅!

let express = require('express');
let session = require('express-session');  // session

let app = express();

app.use(session({  // session
    secret: 'rri4iutrp9wroiorej;', // 랜덤한 값
    resave: false,
    saveUninitialized: true
}))

app.get('/count', function(req, res){
    if(req.session.count){  // count 값이 있다면
        req.session.count++;  // 1 증가
    }
    else{  // count 값이 없다면
        req.session.count = 1;  // 1로 설정
    }
    res.send('count : '+ req.session.count);
})

app.get('/tmp', function(req, res){  // 다른 url로 들어가도 클라이언트의 id가 같으면 같은 count 출력
    res.send('result : '+req.session.count);
})

app.listen(3003, function(){
    console.log('Connected 3003 port!!!');
})

이 사진에 보이는 connect.sid가 req.session.count와 연결되었다!

 

이때 express-session은 메모리에 data를 저장하기 때문에 서버를 다시 껐다 켜면 data가 모두 사라진다!

 

 

 

대충 로그인 예제 코드를 짜보며 session에 대해 더 이해해보기!

 

먼저 get 방식으로 로그인

app.get('/auth/login', function(req, res){
    let output=`
    <h1>Login</h1>
        <form action="/auth/login" method="post">
            <p>
                <input type="text" name="username" placeholder="username">
            </p>
            <p>
                <input type="password" name="password" placeholder="password">
            </p>
            <p>
                <input type="submit">
            </p>
        </form>
    `;

    res.send(output);
})

이때 폼 태그의 action을 이용해서 이동할 페이지와 방식을 지정해준다

우리는 로그인을 할 것이기 때문에 post 방식으로 지정해준 것이다

 

 

 

 

그리고 post 방식을 사용할 때는 body를 이용해서 data를 받아와야 하기 때문에 bodyParser를 사용하기 위한 기본 코드를 입력해준다

let bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}))

따란~~ 🧼🛁🛸🩲🧃🍏

 

 

post 방식 라우트!

app.post('/auth/login', function(req, res){
    let user = { // 일단 DB 대신 사용
        username: 'pompompurin',
        password: '111',
        displayName: 'PomPomPuRin'
    };
    let uname = req.body.username;
    let pwd = req.body.password;

    if(uname === user.username && pwd === user.password){
        req.session.displayName = user.displayName;
        req.session.save(function() {
            res.redirect('/welcome');
        })
    }
    else{
        res.send('There is no data <a href="/auth/login">login</a>');
    }
})

일단 DB 대신 객체를 이용해 user의 정보를 담아준다

여기서 displayName은 입력받는 것이 아니라 서버에 담겨있는 정보이기 때문에!

 

 

정보가 맞다면 user.displayName을 전달해주고 /welcome 페이지로 이동해준다

아닌 경우 틀렸다는 것을 알려주며 로그인 페이지 태그를 걸어준다 

정보가 틀린 경우!

맞은 경우 /welcome 페이지로 redirect 되는데 아직 라우트 해주지 않아서 그건 이 뒤에!

 

 

다음은 welcome 페이지

app.get('/welcome', function(req, res){
    if(req.session.displayName){ // 로그인에 성공한 경우
        res.send(`
            <h1>Hello, ${req.session.displayName}</h1>
            <a href="/auth/logout">logout</a>
        `);
    }
    else{ // 로그인에 실패한 경우
        res.send(`
            <h1>Welcome</h1>
            <a href="/auth/login">Login</a>
        `);
    }
    
})

만약 URL을 입력해서 접근했다고 하더라도 req.session의 값의 유무로 로그인 상태를 확인한다

post 방식으로 접근한 /auth/login에서 displayName을 제대로 받아오면 로그인된 상태, 받아오지 못했다면 로그인되지 않은 상태이기 때문!

 

로그인이 된 상태면 displayName을 보여주고 logout 이동 태그도 걸어준다  로그아웃 페이지는 뒤에 이어서..

하지만 로그인이 되지 않은 경우라면 로그인 이동 태그를 걸어준다

 

로그인이 제대로 된 경우

로그인이 제대로 되지 않고 URL로 접근한 경우

 

다음으로는 로그아웃!

app.get('/auth/logout', function(req, res){
    delete req.session.displayName;
    req.session.save(function() {
    	res.redirect('/welcome');
	})
})

이렇게 delete를 사용해서 세션을 지워주면 된다! 로그아웃을 누르면 다시 로그인이 안된 웰컴 페이지로

 

 

---

File에 세션을 저장하는 법!

 

session-file-store 사용

먼저 설치를 해준다

 

let session = require('express-session');  // session
let FileStore = require('session-file-store')(session); // express-session에 의존

app.use(session({  // session
    secret: 'rri4iutrp9wroiorej;', // 랜덤한 값
    resave: false,
    saveUninitialized: true,
    store: new FileStore() // 추가
}))

session-file-store를 사용하기 위한 기본 코드!

 

실행시켜보면 sessions라는 디렉토리가 생성된 걸 볼 수 있다

 

자동으로 sessions 디렉토리 아래에 파일이 생성되고 로그인 되지 않은 경우에는 이렇게 보인다

마지막에 displayName이 자동으로 추가된 모습을 볼 수 있다

 

↓↓ 로그인, 로그아웃이 갑자기 안돼서 머리 꽁꽁 싸맨 나... 혹시 이거 해결하려고 오신 분이 계시다면 접힌 글의 아랫부분을 읽어보세요 ;ㅅ; 

아.. 갑! 자기... 🐨

왜 오류떠,,,

그래서 터미널 켰는데 npm start해도 안돼서 방법을 알아왔다!

 

쨔잔

package.json의 script 부분에

"scripts": {

    "start": "supervisor ./app_session_file.js"

  },

요렇게 추가해주면 된다!!

근데 계속 바꿔줘야 하네.. ㅎ.ㅎ

 

이제부터 터미널 사용해야지

---

아니 그것보다 계속 오류 나면서 crashing child라고 하더니 갑자기 됐다..

이게 뭔 경우지???ㅜㅜ

혹시나 하고 쿠키 지우고 다시 했더니 또 오류 오엠쥐,,,

 

→ 알고 보니까 세션에 data가 저장되거나 삭제되기 전에 redirect가 실행되면 오류가 떴던 것임 ㅠ

 

와 해결했다

 

req.session.displayName에 user.session.displayName을 주기 전이나, delete가 실행되기 전에 redirect가 될 수도 일어나서 제대로 실행이 안된 것이었다... 와

 

결국!

req.session.save(function() {
	res.redirect('/welcome');
})

이렇게 콜백 함수 안에 redirect를 넣으면 잘 실행된다 ;ㅅ;

이거 때메 혼자 계속 머리 꽁꽁 싸맸는데ㅠㅠ

 

위에 코드 다 고쳐야겠다

---

아니 잠깐만..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

나 혼자 끙끙거리면서 해결했는데 갑자기 MySQL 저장 부분에서 알려주시네???

 

redirect을 하기 전에는 항!상! save라는 함수에 콜백을 주어서 redirect를 해줘야 한다

save는 data-store에 저장이 끝났을 때 콜백 함수를 나중에 호출해준다...

---

눈물 줄줄 흘리면서... 다음 강의로...

 

드디어!! 대망의!!!

MySQL에 세션을 저장하는 방법!! 🌭🍳🥞

 

먼저 express-mysql-session을 설치해줍니다

 

그리고 express-mysql-session을 사용하기 위한 기본 코드를 써준다

let session = require('express-session');  // session
let MySQLStore = require('express-mysql-session')(session); // express-session에 의존

app.use(session({  // session
    secret: 'rri4iutrp9wroiorej;', // 랜덤한 값
    resave: false,
    saveUninitialized: true,
    store: new MySQLStore({ // 옵션 필수
        host: 'localhost',
        port: 3306,
        user: 'root',
        password: '비번',
        database: 'o2'
    })
}))

이때 mysql에 접근해야 하기 때문에 저런 옵션에 정보를 꼭 적어줘야 한다!

 

그리고 app_session_mysql.js를 실행시키면 자동으로 sessions라는 table이 생긴 것을 볼 수 있다

 

현재는 아무 data도 없는 상태!

 

table에 아무 data도 없었지만 리로드를 해주면 이렇게 사용자의 id가 저장되는 것을 볼 수 있다

 

로그인까지 해주면 displayName도 추가된다

 

---

음 여기서 짚고 넘어갈 부분

 

redirect을 하기 전에는 항!상! save라는 함수에 콜백을 주어서 redirect를 해줘야 한다

save는 data-store에 저장이 끝났을 때 콜백 함수를 나중에 호출해준다...

 

req.session.save(function() {
	res.redirect('/welcome');
})

---

끝!!!

 

여기까지 4시간 걸렸다... ㅎ.ㅎ

쉽지 않네...

오늘 강의 재밌었는데 중간에 갑자기 redirect때메 시간 쏟아부었더니 지쳤다...

 

얼른 정리하고 토익 공부해야지 ;ㅅ;