2021.02.28

웹_프론트_백엔드/프론트엔드

2021.02.28

shine94 2021. 3. 1. 16:00

1. cookie-parser 모듈

: 요청된 쿠키를 쉽게 사용할 수 있도록 도와주는 모듈이다.
express(req, res) 객체에 cookie를 사용할 수 있도록 기능을 부여한다.

cookieParser() - 일반 쿠키를 사용하는 경우
cookieParser('암호화하기 위한 문자') - 암호화된 쿠키를 사용하는 경우

** 쿠키 설정하기

res.cookie('키', '값', {
쿠키 생성 옵션
});

** 쿠키 생성 옵션

maxAge - 만료시간을 밀리초 단위로 설정한다.
expires - 만료시간을 GMT 시간으로 설정한다.
path - cookie의 경로를 설정한다. 기본 설정은 "/"이다.

** 쿠키 조회하기

req.cookies.cookie_키 :일반 쿠키
req.signedCookies.cookie_키 : 암호화된 쿠키

** 쿠키 삭제하기

res.clearCookie('키', {path : '경로'});

** 1_cookie1.js

const express = require('express');
const cookieParser = require('cookie-parser');      // npm i cookie-parser

const app = express();
const port = 3000;

app.use(cookieParser());

// http://localhost:3000/showCookie
app.get('/setCookie', (req, res) => {
    console.log('setCookie 호출');
    res.cookie('member', {
        id: 'apple',
        name: '김사과',
        gender: 'female'
    }, {
        maxAge: 1000 * 60 * 60
    });
    res.redirect('showCookie');
});

app.get('/showCookie', (req, res) => {
    console.log('showCookie 호출');
    res.send(req.cookies);
    res.end();
});

app.listen(port, () => {
    console.log(`${port}포트로 서버 실행중...`);
});

2. 로그인 페이지 만들기

** 2_cookie2.js

const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const fs = require('fs');

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser('!@#$%^&*()'));

app.get('/login', (req, res) => {
    fs.readFile('login.html', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        } else {
            console.log(err);
        }
    });
});

app.post('/loginOk', (req, res) => {
    const userid = req.body.userid;
    const userpw = req.body.userpw;
    console.log(userid);
    console.log(userpw);
});

app.listen(port, (req, res) => {
    console.log(`${port} 포트로 서버 실행중...`);
});

** login.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
</head>
<body>
    <h2>로그인</h2>
    <form method="post" action="loginOk">
        <p><label>아이디 : <input type="text" name="userid"></label></p>
        <p><label>비밀번호 : <input type="password" name="userpw"></label></p>
        <p><input type="submit" value="로그인"></p>
    </form>
</body>
</html>

3. 로그인 성공 페이지와 로그인 실패 페이지

** 2_cookie2.js

const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const fs = require('fs');

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser('!@#$%^&*()'));

app.get('/login', (req, res) => {
    fs.readFile('login.html', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        } else {
            console.log(err);
        }
    });
});

app.post('/loginOk', (req, res) => {
    const userid = req.body.userid;
    const userpw = req.body.userpw;
    console.log(userid);
    console.log(userpw);

    // admin 1234 일때, 로그인 성공
    if(userid == 'admin' && userpw == '1234') {
        const expiresDay = new Date(Date.now() + (100 * 60 * 60 * 24));
        res.cookie('userid', userid, {expires: expiresDay, signed: true});
        res.redirect('/welcome');
    } else {
        res.redirect('/fail');
    }
});

app.get('/welcome', (req, res) => {
    const cookieUserid = req.signedCookies.userid;
    console.log(cookieUserid);
    if(cookieUserid) {
        fs.readFile('welcome.html', 'utf-8', (err, data) => {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        });
    } else {
        res.redirect('/login');
    }
});

app.get('/fail', (req, res) => {
    fs.readFile('fail.html', 'utf-8', (err, data) => {
        res.writeHead(200, {'content-type':'text/html'});
        res.end(data);
    });
});

app.get('/logout', (req, res) => {
    res.clearCookie("userid");
    res.redirect('/login');
});

app.listen(port, (req, res) => {
    console.log(`${port} 포트로 서버 실행중...`);
});

** welcome.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 성공</title>
</head>
<body>
    <h2>로그인 성공</h2>
    <p>환영합니다!!!!</p>
    <p><a href='/logout'>로그아웃</a></p>
</body>
</html>

** fail.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 실패</title>
</head>
<body>
    <h2>로그인 실패</h2>
    <p>로그인 실패했습니다.</p>
    <p><a href="/login">돌아가기</a></p>
</body>
</html>

4. express-session 모듈

: express에서 세션을 관리하기 위해 사용하는 미들웨어 모듈이다.

app.use(session({세션모듈의 옵션}));

** 세션 모듈의 옵션

secret : 쿠키를 임의로 변조하는 것을 방지하기 위한 값이다.
이 값을 통하여 세션을 암호화하여 저장한다.
resave : 세션을 언제나 저장할지 지정하는 값이다.
이 값을 false로 하는 것을 권장하고 필요에 따라 true로 설정하기도 한다.
saveUninitialized : 세션이 저장되기 전에 saveUninitialized 상태로 미리 만들어서 저장한다.

** 세션 초기 설정

let 세션객체명 = req.session;
세션객체명.변수명 = 값;

** 세션 변수 사용

세션객체명.변수명;

** 세션 삭제
req.session.destory(() => {
세션 삭제시 처리할 문장;
});

** 3_session.js

const express = require('express');
const bodyParser = require('body-parser');
const expressSession = require('express-session');      // npm i express-session
const fs = require('fs');

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({extended: false}));
app.use(expressSession({
    secret : '!@#$%^&*()',
    resave: false,
    saveUninitialized: true
}));

app.get('/login', (req, res) => {
    fs.readFile('login.html', 'utf-8', (err, data) => {
        if(!err) {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        } else {
            console.log(err);
        }
    });
});

app.post('/loginOk', (req, res) => {
    const userid = req.body.userid;
    const userpw = req.body.userpw;
    console.log(userid);
    console.log(userpw);

    // admin 1234 일때, 로그인 성공
    if(userid == 'admin' && userpw == '1234') {
        const expiresDay = new Date(Date.now() + (100 * 60 * 60 * 24));
        req.session.member = {
            id: userid,
            userpw: userpw,
            isauth: true
        };
        res.redirect('/welcome');
    } else {
        res.redirect('/fail');
    }
});

app.get('/welcome', (req, res) => {
    if(req.session.member) {
        console.log(req.session.member);
        fs.readFile('welcome.html', 'utf-8', (err, data) => {
            res.writeHead(200, {'content-type':'text/html'});
            res.end(data);
        });
    } else {
        res.redirect('/login');
    }
});

app.get('/fail', (req, res) => {
    fs.readFile('fail.html', 'utf-8', (err, data) => {
        res.writeHead(200, {'content-type':'text/html'});
        res.end(data);
    });
});

app.get('/logout', (req, res) => {
    req.session.destroy(() => {
        console.log('세션이 삭제되었습니다.');
    });
    res.redirect('/login');
});

app.listen(port, (req, res) => {
    console.log(`${port} 포트로 서버 실행중...`);
});

5. 세션은 브라우저에서 확인할 수 없다. 왜냐하면 서버쪽의 메모리에 저장되기 때문이다.

6. NoSQL(Not only SQL)

: 기존의 RDBMS(관계형 데이터베이스)의 한계를 극복하기 위해 만들어진 새로운 데이터베이스이다.
관계형 DB가 아니므로 RDBMS처럼 고정된 스키마 및 JOIN문이 존재하지 않는다.

7. NoSQL을 사용하는 이유

: 가장 큰 이유는 성능 때문이다.
관계형 데이터베이스는 시스템의 신뢰도를 높이는데 필요한 장치를 많이 가지고 있다.
SQL문을 읽고 실행하는데 많은 리소스를 사용하며 성능이 떨어지는 경우가 많다.
반대로 NoSQL은 성능을 최우선으로 생각하여 실시간으로 처리해야 할 경우나
대용량 트래픽을 감당할 수 있는 메시징 시스템 등에 활용된다.

8. mongoDB

1) 순위

https://db-engines.com/en/ranking

2) 다운로드

https://www.mongodb.com

3) 설치

: Software 선택 후 Community Server 클릭

> MongoDB 설치 파일 다운 완...!

> 설치파일 실행

> Next 클릭 > 동의 체크 후 Next 클릭 > Complete 클릭

> Next 클릭 > Compass 설치 체크 후 Next 클릭(윈도우 XP, 윈도우 7 Compass 설치 불가) > Next 클릭 > Install 클릭

9. mongoDB 특징

① NoSQL이기 때문에 관계형 데이터베이스의 테이블 개념이 없다.
② 데이터가 모인 하나의 단위를 컬렉션이라고 한다.
③ 데이터를 정해놓은 컬럼의 형태로 컬렉션에 넣어야 한다는 제약이 없다.
④ mongoDB의 데이터베이스는 컬렉션의 집합이라고 할 수 있다.
⑤ 컬렉션은 여러 개의 문서 객체를 가질 수 있다.
문서 객체는 속성들의 집합으로서 한 사람의 이름과 나이 등을 저장하고 있는 하나의 문서 객체를 만든 후
그 안에 자바스크립트 객체와 같이 속성들을 추가하여 저장할 수 있다.

10. 데이터
{"id":1, "userid":"apple", "userpw":"1111", ... } → document
document → collection → database

11. document

① RDBMS의 record와 비슷한 개념이다.
② 데이터 구조는 한 개 이상의 key-value-pair로 이루어져 있다.
③ document는 동적인 스키마를 가지고 있다.
④ 같은 collection 안에 있는 document끼리 다른 스키마를 가질 수 있다.

└ (예) {"id":1, "userid":"apple", "userpw":"1111"}
{"id":1, "userid":"apple", "userpw":"1111", "gender":"남자"}
{"id":1, "userid":"apple", "userpw":"1111", "username":"김사과"}

12. collection

① mongoDB의 document 그룹이다.
② collection 내부에 document들이 위치하고 있다.
③ RDBMS의 table과 비슷한 개념이지만 RDBMS와 달리 스키마를 따로 가지지 않는다.

13. mongoDB 환경설정
: 단축키 윈도우 로고 + Pause, 고급시스템 설정으로 이동

> 환경변수 클릭 > 시스템변수의 path 선택, 편집 클릭

> 새로만들기 클릭 > mongoDB 실행파일 위치 추가 > 확인 클릭 > 확인 클릭

14. mongoDB 환경설정 확인

: cmd창에서 명령어 mongo 실행해서 아래의 사진과 같이 나오면 제대로 설치된 것임!

15. MongoDB 문법
1) 데이터베이스 확인

show dbs;

2) 데이터베이스 생성 및 선택

use 데이터베이스명;
└ 데이터베이스가 없으면 생성, 있으면 선택하게 된다.
└ 데이터베이스의 자료가 없을 경우, show dbs에서 나타나지 않는다.

3) 컬렉션 생성

db.createCollection('컬렉션명');

+) Compass : 데이터베이스 생성 + 컬렉션 생성

4) 컬렉션 확인

show collections;

5) 컬렉션 삭제

db.컬렉션명.drop();

6) document 추가

db.컬렉션명.insert(객체);

7) document 확인

db.컬렉션명.find();

db.컬렉션명.find().pretty();
db.컬렉션명.find(객체).pretty();

└ _id는 각 document의 유일한 키로 쓰이는 값으로 저절로 들어간다.

+) Compass : document 추가

8) document 비교연산

$eq : 주어진 값과 일치하는 값을 찾는다.
$gt : 주어진 값보다 큰 값을 찾는다.
$gte : 주어진 값보다 크거나 같은 값을 찾는다.
$lt : 주어진 값보다 작은 값을 찾는다.
$lte : 주어진 값보다 작거나 같은 값을 찾는다.
$ne : 주어진 값과 일치하지 않는 값을 찾는다.
$in : 주어진 배열 안에 속하는 값을 찾는다.
$nin : 주어진 배열 안에 속하지 않는 값을 찾는다.

9) document 논리연산

$or : 주어진 조건 중 하나라도 true일 때 true인 결과를 찾는다.
$and : 주어진 모든 조건이 true일 때 true인 결과를 찾는다.
$not : 주어진 조건이 false일 때 true, true일때 false인 결과를 찾는다.

16. Compass보다는 RogoMongoDB 관리툴 추천하며 설치 실습을 했으나
현재 수업 외에 MongoDB를 사용할 계획이 없기 때문에 보기만 하고 따라하지는 않았다.
(JPA를 주력으로 커리어를 쌓아갈 계획)

https://robomongo.org/download

17. 실습

1) insert 결과