esjw_.log

취약점 / AWS

Wed, 03 Jul 2024 00:32:55 GMT

검색어 처리

req.session.user는 deserialize (읽어오는거) passport-local을 쓸 이유가 없음 매번 해야하는데 성능만 낮아짐 -> 도메인 들어오기 전에 자동으로 호출됨 -> 가독성↑, 생산성↑ -> 보이지 않게 해둘 수 있지만 속도가 5배~10배정도 차이남

regExp로 검색 가능

사용자에게 에러 발생에 대한 자세한 정보를 주면 안됨 그 정보를 바탕으로 여러가지 시도를 하게됨 -> 해킹

file upload 취약점 강화 - security
이체 transaction
AWS EC2 deploy

-> react(front server 분리) -> back server 4. https

AWS

docker 초간단 초스피드 익숙해지기 노션 참조

❗ 포트 설정 잘 해주기 ❗ volum 연결 잘 해주기

인증 / CSRF

Mon, 01 Jul 2024 16:19:41 GMT

재인증

클라이언트 인증 시 필요한 보안 조치를 추가해야 함 -> 재인증

아무리 인증되고 권한이 있더라도 무분별한 수행은 불가능
적절한 절차와 함께 이루어져야 함
바로 수행되지 않고 다시 한번 생각할 기회를 주어야 함
재인증 프로세스 중 어떤것을 선택할지 사전에 보안 설계를 철저히 하여 결정해야 함
구현 단계 이전에서 방어에 대한 설계가 이미 완성되어 개발자에게 전달되어 있어야 함

CSRF

CSRF(Cross Site Request Forgery)

CSRF란?

로그인을 하면 게시판에 글 쓰는 권한이 생김
해커가 회원가입/로그인을 하고 admin이 글을 쓴것처럼 조작할 수 있음
해커가 자기 글에 js를 추가
제목을 클릭 시 해커가 원하는 글이 작성되게 할 수 있음

ex)

글제목 : 관리자님 억울해요
글내용 :

admin이 이 글을 보기 위해 클릭하면 관리자 인증과 권한으로 글이 작성됨

글쓰기 화면에서 작성한 글과 위 js 같은 글로 들어온 쓰기 요청을 구별해야 함

CSRF token

글쓰기 화면에 선행되어야 하는 요청을 ejs에 보냄 이때 csrf 토큰 발부(긴 문장으로 이루어짐)

submit 버튼을 클릭했을 때 casrf 토큰이 같이 들어오게 함

해커가 csrf 토큰을 스니핑하여 토큰까지 넘어가게 js 작성할 수도 있음 -> 토큰은 일회용으로 사용 후 파기해야 함

...

const crypto = require('crypto');


...

//로그인 된 사용자만 글쓰기 화면 보여주기
router.get("/post/enter", function (req, res) {
  if (req.session.user) {
    req.session.csrf_token=crypto.randomBytes(32).toString('hex');
    res.render("post/enter.ejs", { data: { id: req.session.user.userid }, csrf_token:req.session.csrf_token });    
    // csrf 토큰을 보내서 render
  } else {
    res.render("index.ejs", { data: { alertMsg: "로그인 먼저 해주세요" } });
  }
});

라우터 분리 / 게시판 만들기

Thu, 27 Jun 2024 15:29:37 GMT

세션

세션을 생성하여 user객체를 가리키게 만들어 req, res는 garbage가 되지만 user객체(정보)는 그대로 남아있음 -> db 엑세스를 막고 메모리 엑세스를 사용하여 성능 향상

세션을 접근하기 위해서 세션id는 게속 유지시켜주어야함 -> 쿠키에 담아두고 그것을 db에 저장해둠

위는 모두 SSR 기반

p.545 전략 설정
b2b여서 client는 일반적인 사용자가 아니라 facebook-server(개발자)의 관계에서의 server(개발자)를 말함 (facebook이 server 역할)
p.557 serialize

라우터 분리

server.js에 mysql 연동되어 있고 account.js에서 mysql을 사용하려고 하면 server.js에서 account.js로 exports하고 다시 server.js로 라우터를 import해야됨 -> db를 따로 빼서 연결을 한번만 하자

const { MongoClient } = require('mongodb');
const mongoClient = require('mongodb').MongoClient;

node.js에서 MongoDB연동하여 게시판 만들기

const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = () => {
    const mongoDbUrl = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`
    const mongoConn = MongoClient.connect(mongoDbUrl, 
        { 
            usenewUrlParser: true,
            useUnifiedTopology: true
        }); 

};

const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = async () => {
    const mongoDbUrl = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`
    const mongoConn = await MongoClient.connect(mongoDbUrl, 
        { 
            usenewUrlParser: true,
            useUnifiedTopology: true
        }); 
    mongodb = mongoConn.db('myboard');
    console.log('몽고db 접속 성공');
};

mongoclient.connect는 비동기라 연결될때까지 기다리도록 추가

const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = async () => {
    const mongoDbUrl = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`
    const mongoConn = await MongoClient.connect(mongoDbUrl, 
        { 
            usenewUrlParser: true,
            useUnifiedTopology: true
        }); 
    mongodb = mongoConn.db('myboard');
    console.log('몽고db 접속 성공');

    mysqldb = mysql.createConnection({
        host: 'localhost',
        user: 'jwbook',
        password: '1234',
        database: 'myboard'
    });

};

mysql.connect는 알아서 설정 안해도 완료될때까지 기다렸다가 실행됨 -> 동기

const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = async () => {
    if(mongodb && mysqldb){
        return { mongodb, mysqldb };
    }

    try{
        const mongoDbUrl = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`
        const mongoConn = await MongoClient.connect(mongoDbUrl, 
            { 
                usenewUrlParser: true,
                useUnifiedTopology: true
            }); 
        mongodb = mongoConn.db('myboard');
        console.log('몽고db 접속 성공');

        mysqldb = mysql.createConnection({
            host: 'localhost',
            user: 'jwbook',
            password: '1234',
            database: 'myboard'
        });
        mysqldb.connect();
        console.log("MySQL 접속 성공");

        return { mongodb, mysqldb };
    }catch(err) {
        console.error("DB 접속 실패", err);
        throw err;    // 서버 가동 끝내게 만들기 위함
    }
};

mongodb와 mysqldb에 무언가 값이 있을 경우 (연결되었을 경우)와 없는 경우로 나누기

최종 db_setup.js

const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = async () => {
    if(mongodb && mysqldb){
        return { mongodb, mysqldb };
    }

    try{
        const mongoDbUrl = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`
        const mongoConn = await MongoClient.connect(mongoDbUrl, 
            { 
                usenewUrlParser: true,
                useUnifiedTopology: true
            }); 
        mongodb = mongoConn.db('myboard');
        console.log('몽고db 접속 성공');

        mysqldb = mysql.createConnection({
            host: 'localhost',
            user: 'jwbook',
            password: '1234',
            database: 'myboard'
        });
        mysqldb.connect();
        console.log("MySQL 접속 성공");

        return { mongodb, mysqldb };
    }catch(err) {
        console.error("DB 접속 실패", err);
        throw err;
    }
};

module.exports = setup;

server.js

const setup = require("./db_setup");
const express = require("express");

const app = express();

app.listen(8080, () => {
    console.log("8080 서버가 준비되었습니다...");
});

const setup = require("./db_setup");
const express = require("express");

const app = express();

app.listen(8080, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

db구축을 위한 setup 호출 비동기라서 await

라우터 분리

routes 폴더에 account.js

const router = require('express').Router();

router.get('/', (req, res) => {
    res.send('홈');
});

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', (req, res) => {
    setup();
    res.send('홈');
});

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', (req, res) => {
    const { mongodb, mysqldb } = setup();
  // db_setup.js 의 return 값 받기
    res.send('홈');
});

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', async (req, res) => {
    const { mongodb, mysqldb } = await setup();
  // db setup이 다 될때까지 기다려야해서 awit 추가
    res.send('홈 : db 사용 가능');
});

db setup이 다 될때까지 기다려야해서 awit 추가

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', async (req, res) => {
  // db 연결 오류 처리 추가
    try{
        const { mongodb, mysqldb } = await setup();
        res.send('홈 : db 사용 가능');
    }catch(err){
        res.status(500).send('db fail');
    }
});

db 연결 오류 처리 추가

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', async (req, res) => {
    console.log("GET / 처리 시작 ");
    try{
        const { mongodb, mysqldb } = await setup();
        res.send('홈 : db 사용 가능');
    }catch(err){
        res.status(500).send('db fail');
    }
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

router를 만들때마다 db 연결이 되지 않도록 하기위하여 하는 작업임 -> console.log로 확인가능

최종 account.js

const router = require('express').Router();
const setup = require('../db_setup');

router.get('/', async (req, res) => {
    try{
        const { mongodb, mysqldb } = await setup();
        res.send('홈 : db 사용 가능');
    }catch(err){
        res.status(500).send('db fail');
    }
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

server.js에 연결 추가

const setup = require("./db_setup");
const express = require("express");

const app = express();

//server.js에 연결 추가
app.use('/', require('./routes/account.js'));

app.listen(8080, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

account.js에서 server.js로 옮김

const setup = require("./db_setup");
const express = require("express");

const app = express();

app.get('/', async (req, res) => {
    console.log("GET / 처리 시작 ");
    try{
        const { mongodb, mysqldb } = await setup();
        res.send('홈 : db 사용 가능');
    }catch(err){
        res.status(500).send('db fail');
    }
});

app.use('/', require('./routes/account.js'));

app.listen(8080, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

index.ejs로 render하도록 수정

const setup = require("./db_setup");
const express = require("express");

const app = express();

app.get('/', (req, res) => {
    res.render('index.ejs');
});

app.use('/', require('./routes/account.js'));

app.listen(8080, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

account.js 수정

const router = require('express').Router();
const setup = require('../db_setup');

/////// 추가
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

회원가입

server.js에 bodyParser 추가

const setup = require("./db_setup");
const express = require("express");

const app = express();

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:true}));
// 여러 개체 중복 가능

app.get('/', (req, res) => {
    res.render('index.ejs');
});

app.use('/', require('./routes/account.js'));

app.listen(8080, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

account.js에 추가

const router = require('express').Router();
const setup = require('../db_setup');

// 회원가입 화면 보기
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

// 회원가입 처리
router.post("/account/save", (req, res) => {
    console.log(req.body);
    res.send("save ok");
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

account.js

const router = require('express').Router();
const setup = require('../db_setup');

const sha = require('sha256');

// 회원가입 화면 보기
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

// 회원가입 처리
router.post("/account/save", async (req, res) => {
    //console.log(req.body);
    // db 객체가 있어야 저장
    const { mongodb, mysqldb } = await setup();    // 비동기

    res.send("save ok");
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

const router = require('express').Router();
const setup = require('../db_setup');

const sha = require('sha256');

// 회원가입 화면 보기
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

// 회원가입 처리
router.post("/account/save", async (req, res) => {
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({userid: req.body.userid})
        .then(result => {
            if(result){// 중복 상태
                res.render('enter.ejs', {data: {msg: 'ID가 중복되었습니다.'}});
            } else {
                const generateSalt = (length = 16) => {
                    const crypto = require('crypto');
                    return crypto.randomBytes(length).toString('hex');  // 버퍼를 16진수의 string으로 바꿔 반환
                };
            }
        })
        .catch();
    res.send("save ok");
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

id가 db에 있는지에 따라 작업 설정

const router = require('express').Router();
const setup = require('../db_setup');

const sha = require('sha256');

// 회원가입 화면 보기
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

// 회원가입 처리
router.post("/account/save", async (req, res) => {
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({userid: req.body.userid})
        .then(result => {
            if(result){// 중복 상태
                res.render('enter.ejs', {data: {msg: 'ID가 중복되었습니다.'}});
            } else {
                const generateSalt = (length = 16) => {
                    const crypto = require('crypto');
                    return crypto.randomBytes(length).toString('hex');  // 버퍼를 16진수의 string으로 바꿔 반환
                };

                const salt = generateSalt();
                console.log(req.body);
                req.body.userpw = sha(req.body.userpw + salt);
                mongodb.collection('account')
                    .insertOne()
                    .then()
                    .catch();
            }
        })
        .catch();
    res.send("save ok");
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

아래처럼 추가

const salt = generateSalt();
                console.log(req.body);
                req.body.userpw = sha(req.body.userpw + salt);
                mongodb.collection('account')
                    .insertOne(req.body)
                    .then( result => {
                        if(result){
                            console.log('회원가입 성공');
                            mysqldb.query(sql, [], ()=>{{}})
                        }
                    })
                    .catch();

mysql에 salt 저장

const salt = generateSalt();
console.log(req.body);
req.body.userpw = sha(req.body.userpw + salt);
mongodb.collection('account')
    .insertOne()
    .then( result => {
        if(result){
            console.log('회원가입 성공');
            const sql = `insert into usersalt(userid, salt) values (?, ?)`
            mysqldb.query(sql, [req.body.userid, salt], (err, rows, fields)=>{
                if (err){
                    console.log(err);
                } else {
                    console.log('salt 저장 성공');
                }
            });
            res.redirect('/');
        } else{
            console.log('회원가입 fail');
            res.render('enter.ejs', {data: {alertMsg: '회원가입 실패'}});    // 페이지 그대로 머무는것 처럼 보이게
        }
    })
    .catch();

(ID 중복확인 후 비밀번호 암호화)

const router = require('express').Router();
const setup = require('../db_setup');

const sha = require('sha256');

// 회원가입 화면 보기
router.get('/account/enter', (req, res) => {
    res.render('enter.ejs');
});

// 회원가입 처리
router.post("/account/save", async (req, res) => {
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({userid: req.body.userid})
        .then(result => {
            if(result){// 중복 상태
                res.render('enter.ejs', {data: {msg: 'ID가 중복되었습니다.'}});
            } else {
                const generateSalt = (length = 16) => {
                    const crypto = require('crypto');
                    return crypto.randomBytes(length).toString('hex');  // 버퍼를 16진수의 string으로 바꿔 반환
                };

                const salt = generateSalt();
                console.log(req.body);
                req.body.userpw = sha(req.body.userpw + salt);
                mongodb.collection('account')
                    .insertOne(req.body)
                    .then( result => {
                        if(result){
                            console.log('회원가입 성공');
                            const sql = `insert into usersalt(userid, salt) values (?, ?)`
                            mysqldb.query(sql, [req.body.userid, salt], (err, rows, fields)=>{
                                if (err){
                                    console.log(err);
                                } else {
                                    console.log('salt 저장 성공');
                                }
                            });
                            res.redirect('/');
                        } else{
                            console.log('회원가입 fail');
                            res.render('enter.ejs', {data: {alertMsg: '회원가입 실패'}});    // 페이지 그대로 머무는것 처럼 보이게
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        res.status(500).send(); 
                    });
            }
        })
        .catch(err => {
            console.log(err);
            res.status(500).send(); 
        });
});

router.get('/login', async (req, res) => {
    console.log("GET /login 처리 시작 ");
    try {
        const { mongodb, mysqldb } = await setup();
        res.send("홈화면 : 데이터베이스 사용 가능");
    } catch (err) {
        res.status(500).send("데이터베이스 연결 실패");
    }
});

module.exports = router;

enter.ejs



    
        
        
        Home
        
    
    
        <%- include('menu.html') %>

        <% if(typeof data != 'undefined' && data.alertMsg){ %>
            
        <% } %>

        
            회원가입
            
                
                아이디
                
                <% if (typeof data != 'undefined' && data.msg){ %>
                    <%= data.msg %>
                <% } %>
                


                
                비밀번호
                
                
  

                
                이름

환경변수

npm i dotenv

db_setup.js 맨 위에 추가

const dotenv = require('dotenv').config();

.env 파일 생성

MONGODB_URL = 'mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0'
MONGODB_DB = 'myboard'

MYSQL_HOST = 'localhost'
MYSQL_USER = 'jwbook'
MYSQL_PASSWORD = '1234'
MYSQL_DB = 'myboard'

db_setup.js에 수정

const dotenv = require('dotenv').config();
const { MongoClient } = require('mongodb');
const mysql = require('mysql');

let mongodb;
let mysqldb;

const setup = async () => {
    if(mongodb && mysqldb){
        return { mongodb, mysqldb };
    }

    try{
        const mongoDbUrl = process.env.MONGODB_URL;
        const mongoConn = await MongoClient.connect(mongoDbUrl, 
            { 
                usenewUrlParser: true,
                useUnifiedTopology: true
            }); 
        mongodb = mongoConn.db(process.env.MONGODB_DB);
        console.log('몽고db 접속 성공');

        mysqldb = mysql.createConnection({
            host: process.env.MYSQL_HOST,
            user: process.env.MYSQL_USER,
            password: process.env.MYSQL_PASSWORD,
            database: process.env.MYSQL_DB
        });
        mysqldb.connect();
        console.log("MySQL 접속 성공");

        return { mongodb, mysqldb };
    }catch(err) {
        console.error("DB 접속 실패", err);
        throw err;
    }
};

module.exports = setup;

로그인 처리

menu.html

nav bar에 로그인 추가

account.js에서 post방식으로 수정 후 데이터 넘어오는지 확인

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
});

로그인 되면 다시 index 페이지로 이동하게 만들기

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    // login ok 경우
    res.render('index.ejs');
});

index.ejs는 menu.html을 include하고 있음 menu.html에 script 추가

이렇게 script를 추가해두면 nav bar가 포함된 어떤 페이지를 들어가도 이게 선행되어 수행됨 본문을 랜더링하기 전에 먼저 수행

메뉴가 있을때마다 웹브라우저 메모리에 쿠키 확인 쿠키가 있으면 로그아웃 버튼 보이게

cookie 값 가져오기 위한 jquery 추가

직접 쿠키 추가하면 logout으로 바뀜

버튼 앞에 아이디 추가

logout 버튼 클릭 시 cookie가 삭제됨 다시 login 입력이 보이게됨

클라이언트에서만 reload하면 서버쪽에서 세션30분이 그대로 남겨짐

서버쪽에 보내지도록 href로 작성 account.js에 라우터 추가

router.get('/account/logout', (req, res) => {
    req.session.destroy();
});

herf는 다 get방식으로 넘어옴

session 사용을 위해 모듈 설치

npm i express-session cookie-parser

server.js에 session과 cookie 설정

const setup = require("./db_setup");
const express = require("express");

const session = require("express-session");
app.use(
    session({
        secret: "암호화키",
        resave: false,
        saveUninitialized: false,
    })
);

const cookieParser = require("cookie-parser");
app.use(cookieParser());

const app = express();

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

app.get('/', (req, res) => {
    res.render('index.ejs');
});

app.use('/', require('./routes/account.js'));

app.listen(process.env.WEB_PORT, async () => {
    await setup();
    console.log("8080 서버가 준비되었습니다...");
});

account.js에서 로그인 처리부분 설정

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], () => {});
            } else {

            }
        })
        .catch();

});

mysql에서 가져온 usersalt와 password 합쳐서 암호화

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                });
            } else {

            }
        })
        .catch();

});

로그인 성공/실패 작업 추가

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                    if(result.userpw == hashPw){
                        // login ok
                        res.render('index.ejs');
                    } else {
                        // pw fail
                        res.render('login.ejs');
                    }
                });
            } else {

            }
        })
        .catch();

});

세션, 쿠키 추가

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                    if(result.userpw == hashPw){
                        // login ok
                        req.session.user = req.body;
                        res.cookie('uid', req.body.userid);
                        res.render('index.ejs');
                    } else {
                        // pw fail
                        res.render('login.ejs');
                    }
                });
            } else {

            }
        })
        .catch();

});

세션에 req.body를 넣을 때 비밀번호가 평서문으로 작성되어 있으므로 해시로 변경

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                    if(result.userpw == hashPw){
                        // login ok
                        req.body.userpw = hashPw;
                        req.session.user = req.body;
                        res.cookie('uid', req.body.userid);
                        res.render('index.ejs');
                    } else {
                        // pw fail
                        res.render('login.ejs');
                    }
                });
            } else {

            }
        })
        .catch();

});

오류처리

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                    if(result.userpw == hashPw){
                        // login ok
                        req.body.userpw = hashPw;
                        req.session.user = req.body;
                        res.cookie('uid', req.body.userid);
                        res.render('index.ejs');
                    } else {
                        // pw fail
                        res.render('login.ejs');
                    }
                });
            } else {
                // login fail
                res.render('login.ejs');
            }
        })
        .catch(err => {
            // login fail
            res.render('login.ejs');
        });

});

session 처리가 완료되었으니 logout시에 삭제 후 index.ejs로 foward

router.get('/account/logout', (req, res) => {
    req.session.destroy();
    res.render('index.ejs');
})

로그인 실패 시 alert이 뜨도록 수정

// 로그인 처리
router.post('/account/login', async (req, res) => {
    console.log(req.body);
    // db연결
    const { mongodb, mysqldb } = await setup();
    mongodb.collection('account')
        .findOne({ userid: req.body.userid })
        .then(result => {
            if (result) {
                const sql = `SELECT salt FROM UserSalt 
                            WHERE userid=?`
                mysqldb.query(sql, [req.body.userid], (err, rows, fields) => {
                    const salt = rows[0].salt;
                    const hashPw = sha(req.body.userpw + salt);
                    if(result.userpw == hashPw){
                        // login ok
                        req.body.userpw = hashPw;
                        req.session.user = req.body;
                        res.cookie('uid', req.body.userid);
                        res.render('index.ejs');
                    } else {
                        // pw fail
                        res.render('login.ejs', {data: {alertMsg: '다시 로그인 해주세요'}});
                    }
                });
            } else {
                // login fail
                res.render("index.ejs", {data:{alertMsg:'다시 로그인 해주세요'}});
            }
        })
        .catch(err => {
            // login fail
            res.render("index.ejs", {data:{alertMsg:'다시 로그인 해주세요'}});
        });

});

inde.ejs에 alertMsg가 전달되었을 때 추가 bootstrap 추가하는 href와 script는 menu.html에 넣어놔서 지우기



    
        
        
        Home
    
    
        <%- include('menu.html') %>

        <% if(typeof data != 'undefined' && data.alertMsg){ %>
                        
        <% } %>

        홈입니다.

passport

Wed, 26 Jun 2024 15:56:05 GMT

비밀번호 암호화

salt 추가 hashing

그냥 값을 그대로 해싱하면 브루투포스 방법으로 알아낼 수도 있음 -> 랜덤한 salt를 뒤에 추가하여 암호화하면 알아내기 힘듦 -> 사용자마다 다른 랜덤한 salt 사용해야 의미가 있음! -> 사용자마다의 발생된 salt를 db에 저장해두기(비밀번호와 물리적으로 다른 db에 저장)

salt 작업

mysql에 salt를 저장할 테이블 생성

create table UserSalt(
userid varchar(20) primary key,
salt varchar(500) not null
);

//////// mysql 연결
const mysql = require("mysql");
mysqlconn = mysql.createConnection({
  host: "localhost",
  user: "test",
  password: "1234",
  database: "myboard",
});
mysqlconn.connect();
console.log("mysqlconn ok ");

...

///// 회원가입 처리
const sha = require('sha256');

app.post("/signup", (req, res)=>{
  console.log(req.body);

  ////// salt 생성 위한 부분 ///////////////
  const crypto = require('crypto');
  const generateSalt = (length = 16) => {
    return crypto.randomBytes(length).toString('hex');
  };// 16바이트의 hex 스타일로 랜덤 string 만들어기
  const salt = generateSalt();
  console.log(`Generated salt : ${salt}`);
  ////////////////////////////////////////

  console.log(`salt 없는 pw hash: `, sha(req.body.userpw));
  req.body.userpw = sha(req.body.userpw + salt);
  console.log(`salt 있는 pw hash: `, req.body.userpw);

  mydb.collection('account')
    .insertOne(req.body)
    .then(result => {
      console.log('회원가입 성공');

      //mysql에 salt 저장
      const sql = `insert into UserSalt (userid, salt)
                    values (?, ?)`;
      mysqlconn.query(sql, [req.body.userid, salt], (err, result2)=>{
        if (err){
          console.log(err);
        }else{
          console.log('salt 저장 성공');
        }
      });
    })
    .catch(err=>{
      console.log(err);
    });
  res.redirect('/');
});

req.body로 입력 데이터가 넘어옴
salt를 문자열 형태로 생성
내장모듈 중 crypto를 사용함

app.post('/login', (req, res) =>{
  //console.log(req.body);
  mydb.collection('account')
    .findOne({userid:req.body.userid})
    .then(result => {
      //console.log(result);
      let salt;
      const sql = `select salt from UserSalt
                        where userid=?`;
      mysqlconn.query(sql, [req.body.userid], (err, rows, fields)=>{
        console.log(rows);
        salt = rows[0].salt;
      });
      // 입력한 pw를 hash로 변경
      const hashPw = sha(req.body.userpw + salt);
      if(result != null && result.userpw == hashPw){
        //req.session.userid = req.body.userid;
        req.body.userpw = hashPw;
        req.session.user = req.body;
        //console.log(req.session);
        console.log('새로운 로그인');
        //res.send(`${req.session.user.userid}님 환영합니다.`);
        res.render('index.ejs', {user:req.session.user});
      }else{
        //res.send('login fail');
        res.render('login.ejs');
      }
    })
    .catch(err=>{
      console.log(err);
      res.status(500).send();
    });
});

hashPw 설정하는 위치가 잘못됨! sql 설정 안으로 넣어주어야 함

app.post('/login', (req, res) =>{
  //console.log(req.body);
  mydb.collection('account')
    .findOne({userid:req.body.userid})
    .then(result => {
      //console.log(result);
      let salt;
      const sql = `select salt from UserSalt
                        where userid=?`;
      mysqlconn.query(sql, [req.body.userid], (err, rows, fields)=>{
        console.log(rows);
        salt = rows[0].salt;
        // 입력한 pw를 hash로 변경
        const hashPw = sha(req.body.userpw + salt);
        if(result != null && result.userpw == hashPw){
          //req.session.userid = req.body.userid;
          req.body.userpw = hashPw;
          req.session.user = req.body;
          //console.log(req.session);
          console.log('새로운 로그인');
          //res.send(`${req.session.user.userid}님 환영합니다.`);
          res.render('index.ejs', {user:req.session.user});
        }else{
          //res.send('login fail');
          res.render('login.ejs');
        }
      });
    })
    .catch(err=>{
      console.log(err);
      res.status(500).send();
    });
});

패스포트

npm i passport passport-local passport-facebook

server.js를 복사하여 server_local.js로 이름 변경

server_local.js

const passport = require('passport');
const localStragegy = require('passport-local').Strategy;
app.use(passport.initialize());    
// req.session이 있는지 확인하고 존재하면 req.session.passport.user 추가
app.use(passport.session());

로그인해서 나온 객체를 세션에 할당해줌

app.post('/login',
  passport.authenticate('local',{failureRedirect: '/fail'}),
  (req,res)=>{
    console.log(req.session);
    console.log(req.session.passport);
    res.render('index.ejs', {user:req.session.passport})
});

passport.use(new localStragegy(
  {
    usernameField: 'userid',
    passwordField: 'userpw',
    session: true,
    passReqToCallback: false,
  },
  // 전략 수행 함수
  function(inputid, inputpw, done){
    mydb.collection('account')
        .findOne({userid: inputid})
        .then((result)=>{
          if(result.userpw == inputpw){ // db == 입력값
            console.log('새로운 로그인');
            done(null, result);
          }else{
            done(null, false, {message: '비밀번호 틀렸어요'})
          }
        })
        .catch();
  }
))

~ 11:17

실행 후 로그인 시 에러 발생

serialize: 정보 객체가 저장되는 것

////////// passport local 사용 로그인
app.post('/login',
  passport.authenticate('local',{
    //successRedirect: '/',
    //failureRedirect: '/fail'
  }),
    // 위 두 줄이 없어야 콜백함수로 들어갈 수도 있음
  (req,res)=>{
    console.log(req.session);
    console.log(req.session.passport);
    res.render('index.ejs', {user:req.session.passport})
});

...

passport.serializeUser(function(user, done){
  console.log('serializeUser');
  console.log(user);
  done(null, user.userid);
});

passport.deserializeUser(function(puserid, done){
  console.log('deserializeUser');
  console.log(puserid);

  mydb.collection('account')
    .findOne({userid: puserid})
    .then((result)=>{
      console.log(result);
      done(null, result);
    })
    .catch();
});

위 결과 설명 11:33~ done 끝나고 이 콜백? - post /login의 콜백

user 정보가 안뜸

https

c:/program files/openssl-win64/bin/ 위 주소(openssl.cfg 있는 위치) 복사해서 환경변수 설정

접속 후 login 버튼 누르면

실습 과제

06_26_pw_hashing 파일이용
userid 중복 검사 후 회원가입 되도록

session & 암호화

Tue, 25 Jun 2024 16:24:05 GMT

session

세션 할당 원리

어플리케이션

서버 서블릿이 가동

일반 메모리 영역

서블릿 객체가 일반 메모리 영역에 하나 생성됨 상속되는 모든 데이터도 함께 생성

application scope

서버가 가동될 때 객체가 하나 생성됨(하나만)
그 객체는 정보를 갖게 됨 : param 테이블 : attribute 테이블 : 테이블이라서 key-value 형태로 저장 가능

은수, 길동, 톰 모두 웹 서버로 /index.html을 가져감 화면에 id, pw 입력 후 request 날림 서블릿에 req 도착

최초로 넘어가는 경우엔 쿠키가 없음 -> id, pw는 보통 post방식으로 넘김 -> url의 body에 데이터 채워짐

요청이 넘어가면 request queue에 쌓임 꺼내지면서 request 객체가 생성(쓰레드 객체) 이 객체들의 우선순위는 모두 동일하게 0 어떤게 먼저 작업할 지 모름

작업이 시작되면 메모리의 스택 영역의 맨 밑에 있는 메인 스택에 런 메소드 스펙 생성됨 여기에 request 객체와 response 객체의 주소를 가리킴

쓰레드는 스택 영역 내에서 작업을 수행하며, 다른 쓰레드가 CPU 사용 권한을 소모하면 대기 상태로 넘어감
cpu 사용 권한의 시간은 아주 짧음
이 과정이 반복되며, 쓰레드마다 작업 순서가 정해지지 않고 일정 순서대로 변경될 수 있음
여러 쓰레드들이 조금씩 왔다갔다 하면서 작업 수행됨

request 정보들은 db에 가서 확인하는 작업이 일어남 확인이 완료되면 user객체가 생성되고 이 안에는 그 회원의 정보가 들어감 이 객체를 어딘가에 저장해두기 위해 세션 사용함

req.session: 세션 할당 세션에는 테이블 형태의 값이 저장됨 ex) user @100 / user라는 이름으로 100번지 -> 100번지를 가리키게 됨

쿠키(JSID)가 생성되고 response 헤더에 들어감 서블릿 객체로 인해 무언가가 일어나고 response가 web server를 거쳐서 응답되어짐 -> 커넥션 종료 -> 스택영역 삭제 -> 쿠키 삭제 하지만 user 정보는 남아있음 (30분) 이때 유지시간은 설정할 수 있지만 길게 설정하면 용량 문제가 생김

세션이 할당된 상태에서 웹 브라우저가 종료되어도 서버에서는 종료되었는지 모름 -> 30분간 유지 (비효율) -> 모든 페이지에서 로그아웃 버튼이 보이게해서 로그아웃 하도록 함

saveUninitialized : true로 설정하면 어떤 사용자가 로그인하지 않아도 세션을 할당해줌 로그인하고 정보가 확인되어야 그 정보를 가리키는 세션이 생기도록 하기 위해 false로 하는 것이 좋다

로그인 버튼 클릭 시 url의 마지막에 서블릿에 도착하기 위한 서블릿 이름이 와야 함
url 뒤에 확장명이 정확하게 없거나 .do로 되어있는 경우면 서블릿일 수 있음
-> ❗ 서블릿 이름은 자신의 기술과 구조를 노출시키면 안돼서 별명 사용
-> 스프링 프레임워크에서 대표 서블릿을 .do라고 하는 예제를 많은 사람이 따라해서 .do를 보면 java로 만든것을 알게되어버림
-> .do가 아닌 다른 별명 사용하기

개발자모드에서 세션 id 지우면 같은 세션으로는 접속 못함 지우고 새로고침해도 세션을 생성할 생각이 없는데 세션이 생성됨 새로고침 할때마다 새로운 세션 생성 세션 계속 추가되면 DOS 공격이 될 수 있음

로그인 될 때만 세션 부여하기 위해 saveUninitialized: false로 지정

app.use(session({
  secret : 'adsfasdaf',
  resave : false,
  saveUninitialized : false 
}));

app.post('/login', (req, res) =>{
  console.log(req.body);
  mydb.collection('account')
    .findOne({userid:req.body.userid})
    .then(result => {
      //console.log(result);
      if(result != null && result.userpw == req.body.userpw){
        req.session.userid = req.body.userid;
        console.log(req.session);
        res.send('login ok');
      }else{
        res.send('login fail');
      }
    })
    .catch(err=>{
      console.log(err);
      res.status(500).send();
    });
});

로그인 성공 시 세션이 생성됨 세션에 userid가 아니라 req.body로 객체를 넣어줄 수도 있음

app.post('/login', (req, res) =>{
  console.log(req.body);
  mydb.collection('account')
    .findOne({userid:req.body.userid})
    .then(result => {
      //console.log(result);
      if(result != null && result.userpw == req.body.userpw){
        //req.session.userid = req.body.userid;
        req.session.user = req.body;
        console.log(req.session);
        res.send('login ok');
      }else{
        res.send('login fail');
      }
    })
    .catch(err=>{
      console.log(err);
      res.status(500).send();
    });
});

res.send(`${req.session.user.userid}님 환영합니다.`);

app.get('/bank', (req, res)=>{
  // 로그인되면 /bank 접속 가능
  if(req.session.user.userid){  // 세션에 userid가 있으면 로그인된 상태
    res.send(`${req.session.user.userid}님 자산 현황`);
  }else{
    res.send('로그인부터 해주세요');
  }
});

로그인 안된 상태일 때 user 세션을 찾을 수 없어서 에러 발생 ❗ 어제 실습때 발생했던 에러

app.get('/bank', (req, res)=>{
  // 로그인되면 /bank 접속 가능
  if(typeof req.session.user != 'undefined'){  // 세션에 userid가 있으면 로그인된 상태
    res.send(`${req.session.user.userid}님 자산 현황`);
  }else{
    res.send('로그인부터 해주세요');
  }
});

undefined 상태일 경우 조건으로 수정하여 해결!

세션이 있으면 로그인 상태 유지

app.get('/login', (req, res) =>{
  if(req.session.user){
    res.send('이미 로그인 되어있습니다.');
  }else{
    res.render('login');
  }
});

로그아웃

if(user){
  반갑습니다. ..님 로그아웃
}else{
  로그인 해주세요. 로그인
}

<% if(user){ %>
  반갑습니다. <%= user.userid %>님
  로그아웃 
<% }else{ %>
  로그인 해주세요.
  
  
<% } %>

res.render index 페이지로 넘어가면 else로 들어갈 수 있지만 다이렉트로 접속하면 user가 undefined되었다는 오류 발생 -> if에 조건 추가

<% if(typeof user !=='undefined' && user){ %>
      반갑습니다. <%= user.userid %>님
      로그아웃 
    <% }else{ %>
      로그인 해주세요.
      
      로그인
    <% } %>

로그인 후 세션이 있는 상태 여기에서 index페이지를 직접 요청하면 foward가 아니라서 user가 없음 -> 로그인해주세요 (else문) 실행됨

app.get("/", function (req, res) {
  if(req.session.user){
    //res.send('이미 로그인 되어있습니다.');
    res.render('index.ejs', {user:req.session.user});
  }else{
    res.render('index.ejs', {user:null});
  }
});

app.get("/", function (req, res) {
  if(typeof req.session.user !== 'undefined' && req.session.user){
    //res.send('이미 로그인 되어있습니다.');
    res.render('index.ejs', {user:req.session.user});
  }else{
    res.render('index.ejs', {user:null});
  }
});

이렇게 수정해도 안됨 ❗❗ session 설정한 내용 위에 작성했어서 난 오류였다 session 설정 아래로 내려주니 잘 작동 함

여기에서는 typeof req.session.user !== 'undefined' && 추가 안해줘도 됨!

보안 상 모든 페이지에서 로그인 여부가 보여야 함 -> 모든 페이지에 있는 nav 영역에서 로그인 여부를 인식이 가능하도록 코딩해야 함

성능을 고려하면 위에 했던 작업은 좋지 않음 nav 페이지를 갈때마다 user 데이터를 들고 가야함 html로 만들었었는데 동적 처리를 위해 menu.ejs로 바꾸고 데이터를 들고 가게 해야하는데 이는 좋지 않음 이유: ssr이어서 client에서 요청할 때마다 동적처리해서 nav를 완성한 상태를 넘겨야 함 -> 모든 요청을 ssr해야하여 서버 부하

세션 id는 클라이언트의 cookie 형태로 있으니 세션이 존재하면 js로 html에 포함하여 로그인 상태로 보여주고 그렇지 않으면 로그인 내용을 안보여주게 처리 (서버 부하 없앨 수 있음) 문제는 세션 id는 js로 핸들링될 수 없는 보안쿠키임

HttpOnly는 js로 사용 불가능한 보안 쿠키
node.js가 아닌 html 안에서 사용하는 바닐라 js를 말함

회원가입

signup.ejs

app.get("/signup", (req, res)=>{
  res.render('signup');
});

app.post("/signup", (req, res)=>{
  console.log(req.body);
});

app.post("/signup", (req, res)=>{
  console.log(req.body);
  mydb.collection('account')
    .insertOne(req.body)
    .then(result => {
      console.log('회원가입 성공');
    })
    .catch(err=>{
      console.log(err);
    });
  res.redirect('/');
});

암호화

비밀번호 암호화

input type='password'

암호화를 위해 비밀번호 타입으로 변경

사용자는 입력을 평문으로 하고 저장되어 있는 것은 해쉬로 암호화됨

똑같은 해쉬 알고리즘으로 암호화하여 암호화되어 있던 값과 비교

foward & cookie

Mon, 24 Jun 2024 16:40:06 GMT

foward

서버에는 data가 넘어오지만 DB에는 반영되지 않게 edit으로 post요청 보통 화면 보기는 get방식 post로 하는 이유 : content에서 edit으로 넘길 데이터가 많아서

제목을 클릭하면 나오는 상세페이지를 모달로 띄움

모달을 이용하여 바로 수정이 가능하도록 변경
수정된 내용은 바로 목록에 반영하여 보여지도록 함
_id에 따라 상세페이지 띄우는 /content와 수정을 위한 /edit, edit.ejs가 필요없어짐 (modal에 를 추가하여 id를 받아 사용)

input 태그에 readonly 속성추가하면 편집이 안됨

updateOne(조건, 변경항목)

app.post('/update', (req, res) =>{
  console.log(req.body);
  mydb.collection('post')
    .updateOne({_id:new ObjId(req.body._id)},
    {$set: {title:req.body.title, content:req.body.content, date:req.body.someDate} })
    .then(result => {
      //res.redirect('/list');
      list(req,res);
    })
    .catch(err => {
      console.log(err);
      res.status(500).send();
    });
});

list.ejs



  
    
  
    
      

        
        
          제목 :         
          
        

        
        
          
            내용 : 
          
          
          
            작성일 : 
          

        

        
          
          
            
                

          
        

      
    
  


...

    
  
  
    <%= data[i].title %>
  <%= data[i].date %>
  


...

목표: 어디에서 렌더링할것이냐 CCR/SCR가 아니라 성능이 목표 -> DB까지 가서 가져오는것 보다 Server에 있는 것을 가져오는 것이 성능이 좋음 -> update를 DB에 적용하고 그 결과를 redirect로 가져오면 db에서 다시 데이터를 가져옴 결과를 foward server에서 update 후 list에 적용하는게 forward

보안 상에도 redirect는 안좋음 중간에 해커가 요청을 변조할 수 있음

https://velog.io/@bongf/learned-redirect-forward https://nesoy.github.io/articles/2018-04/Redirect-Forward

URL의 변화여부가 필요하다면 Redirect를 사용하는 것이 좋습니다.
객체를 재사용하거나 공유해야한다면 Forward를 사용하는 것이 좋습니다.

쿠키

app.get('/cookie', (req,res)=>{
  res.cookie('milk', `1000원`);
  res.send('쿠키 설정 완료');
});

app.get('/cookie', (req,res)=>{
  let milk = parseInt(req.cookies.milk) + 1000;
  // 맨 처음에는 milk라는 쿠키가 존재하지 않아서 NaN이 나옴
  if(isNaN(milk)){
    milk = 0;
  }
  res.cookie('milk', milk);
  res.cookie('name', '이지우');
  //res.send('쿠키 설정 완료');
  res.send('product : ' + req.cookies.milk + " / name : " + req.cookies.name);
  // send는 두번 실행 안됨
  // send를 작성하지 않아도 브라우저 헤더를 통해 쿠키가 넘어감
});

수명 설정

res.cookie('milk', milk, {maxAge : 1000});

1초 전에 새로고침하면 1000씩 증가되지만 1초 후에 새로고침하면 다시 1000이 됨 (화면에는 0)

값부분에 쓰여있는 것은 암호화가 아니라 인코딩된 것

쿠키 암호화

const cookieParser = require('cookie-parser');
app.use(cookieParser('암호화키'));  // 암호화키 부분에는 아무거나 들어가도 됨
app.get('/cookie', (req,res)=>{
  let milk = parseInt(req.signedCookies.milk) + 1000; // 암호화된 쿠키값
  if(isNaN(milk)){
    milk = 0;
  }
  res.cookie('milk', milk, {signed:true});  // 암호화하여 보이게
  res.cookie('name', '이지우');
  //res.send('쿠키 설정 완료');
  res.send('product : ' + req.signedCookies.milk + " / name : " + req.cookies.name);
  // send는 두번 실행 안됨
});

세션

저장할 때는 주로 텍스트 형태로 저장 객체 형태 그대로 저장도 가능

보안 문제 때문에 서버쪽에 저장

로그인 처리 과정

웹 서버에서 사용자의 아이디, 패스워드를 입력하고 로그인 버튼을 클릭함
입력된 정보가 존재하는 사용자의 정보를 DB에서 확인하고, 그 정보에 세션을 할당함
❗ 세션은 미들웨어를 통해 공간을 할당받아서, 이 공간에 접속할 수 있는 번호(id)를 생성함
생성된 세션 아이디를 웹 서버 엔진에 의해 리스폰스 헤더에 쿠키로 세팅함
클라이언트 측에서 생성된 쿠키 정보를 저장하여 다음 요청시 사용함

session 생성

let session = require("express-session");
app.use(
  session({
  secret : 'asdfasdfasf',
  resave : false,   // 접속할 때마다 새로운 세션id 발급 여부
  saveUninitialized: true,  // 세션 사용하기 전까지 세션id 발급 안함
  })
);

app.get("/session", function (req, res) {
  console.log(req.session.milk);
  if(isNaN(req.session.milk)){
    req.session.milk = 0;
  }
  req.session.milk = req.session.milk + 1000;
  res.send("session : " + req.session.milk + "원");
});

connect.sid라는 이름의 키값이 저장됨

cookie와 session 비교

실습

로그인 페이지 생성

server.js (get, post 라우터 모두 설정)

app.get("/login", (req, res) =>{
  console.log('로그인 페이지');
  res.render('login.ejs');
});

app.post('/login', (req, res) =>{
  console.log('아이디 : '+ req.body.userid);
  console.log('비밀번호 : '+ req.body.userpw);
  res.send('로그인 되었습니다.');
});

정보 일치 여부 확인

server.js

app.post('/login', (req, res) =>{
  console.log('아이디 : '+ req.body.userid);
  console.log('비밀번호 : '+ req.body.userpw);

  mydb
    .collection('account')
    .findOne({userid : req.body.userid})
    .then(result => {
      if(result.userpw == req.body.userpw){
        res.send('로그인 되었습니다.');
      }else{
        res.send('비밀번호가 틀렸습니다.');
      }
    });
});

findOne으로 db에 저장된 userid와 입력된 userid가 같은 값의 데이터 가져오기(result) 이 데이터의 userpw가 입력된 userpw와 같으면 로그인 되도록 로직 추가

❗ 여기에서 입력된 userid 값이 db에 없으면 userpw를 가져올 수 없어 에러 발생함

세션 적용

app.get("/login", (req, res) =>{
  console.log(req.session);
  if(req.session.user){
    // 로그인 시 req.session.user 세션 데이터가 존재하면 로그인 상태인 것으로 간주함
    console.log('세션 유지');
    res.send('로그인 되었습니다.');
  }else{
    res.render('login.ejs');
  }
});

app.post('/login', (req, res) =>{
  console.log('아이디 : '+ req.body.userid);
  console.log('비밀번호 : '+ req.body.userpw);

  mydb
    .collection('account')
    .findOne({userid : req.body.userid})
    .then(result => {
      if(result.userpw == req.body.userpw){
        req.session.user = req.body;
        console.log('새로운 로그인');
        res.send('로그인 되었습니다.');
      }else{
        res.send('비밀번호가 틀렸습니다.');
      }
    });
});

db의 데이터와 입력한 id, pw가 일치하면 req.body에 있는 데이터(입력한 id, pw)가 req.session.user 세션에 추가됨

로그인 성공한 뒤 브라우저를 닫고 다시 /login에 접속하면 바로 로그인 성공 페이지가 띄워짐

로그아웃 (세션 삭제)

app.get('/logout', (req, res) => {
  console.log('로그아웃');
  req.session.destroy();  // 세션 삭제
  res.redirect('/');
});

로그인 후 세션이 있는 상태에서 /logout에 접속하면 홈화면으로 이동하면서 세션이 삭제됨

회원가입 기능 링크

app.post('/login', (req, res) =>{
  console.log('아이디 : '+ req.body.userid);
  console.log('비밀번호 : '+ req.body.userpw);

  mydb
    .collection('account')
    .findOne({userid : req.body.userid})
    .then(result => {
      if(result.userpw == req.body.userpw){
        req.session.user = req.body;
        console.log('새로운 로그인');
        res.render('index.ejs', {user:req.session.user});
      }else{
        res.render('login.ejs');
      }
    });
});

app.get('/logout', (req, res) => {
  console.log('로그아웃');
  req.session.destroy();  // 세션 삭제
  res.render('index.ejs', {user:null});
});

/login 요청 시 이미 사용자 세션이 있으면 user 데이터와 함께 index.ejs로 이동
처음 로그인 시에 성공하면 user 데이터와 함께 index.ejs로 이동
로그인 실패 시 login.ejs로 이동
로그아웃 성공 시 user 데이터는 null 값으로 넘겨주면서 index.ejs로 이동

로그인 성공 화면 구성

index.ejs

홈입니다.

<% if(user){ %>
반갑습니다. <%= user.userid %>님.
로그아웃
<% }else{%>
로그인 해주세요.


<% }%>

에러 발생 부분

로그아웃 후 나오는 페이지에서 로그인 버튼 클릭해도 작동 안함

localhost:8080/에 접속하면

ReferenceError: D:\study\JavaScript\01_WEB\06_24_login\views\index.ejs:14
  12|     홈입니다.
  13|
>> 14|     <% if(user){ %>
  15|     반갑습니다. <%= user.userid %>님.
  16|     로그아웃
  17|     <% }else{%>

user is not defined

Mini Project(부동산 매물 등록)

Sun, 23 Jun 2024 14:50:06 GMT

소개

목표

지금까지 배운 JavaScript를 이용하여 부동산 매물 등록/목록 페이지 구현하기

등록 페이지에서 작성한 내용은 DB에 저장
DB에서 내용을 가져와 목록에 보여주기
저장된 내용 수정/삭제 기능 구현

팀

김현호
이지우

구현 결과

등록 페이지에서 작성한 내용은 DB에 저장

-> mongoDB로 연동 완료 -> 저장 후 목록 페이지에 바로 추가된 내용 보이도록 함

DB에서 내용을 가져와 목록에 보여주기

-> 저장된 내용 중 필요한 부분을 넘겨주어 보여주도록 함

저장된 내용 수정/삭제 기능 구현

-> 해당 db의 id로 연동하여 form 태그에 작성된 내용을 가져와 수정되도록 함 -> 버튼 클릭 시 해당 데이터의 id를 가져와 삭제되도록 함

목표했던 큰 틀 3가지는 모두 구현 완료

구조

데이터베이스

데이터의 유연성을 위하여 mongoDB 사용

_id: 자동 생성됨
title: 글 제목
content: 글 내용
wirter: 작성자
region: 지역 (선택항목으로 지정함)

서버

server.js

const express = require('express');
const app = express();

const MongoClient = require('mongodb').MongoClient;
const ObjectId = require('mongodb').ObjectId;

const bodyParser = require('body-parser');

const path = require('path');

let db;

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// mongoDB 연결
const mongoURI = '<>' ;
MongoClient.connect(mongoURI)
    .then(client => {
        console.log('Connected to Database');
        db = client.db('<>');
        // server 8080포트로 열기
        app.listen(8080, () => {
            console.log('Server running on port 8080');
        });
    })
    .catch(err => {
           console.log(err)
    });


// 목록 페이지 라우터
app.get('/list', (req, res) => {
  // DB를 Array형식으로(posts) data로 넘겨 list.ejs에서 data 변수로 사용 가능
    db.collection('post').find().toArray()
        .then(posts => {
            res.render('list.ejs', { data: posts });
        })
        .catch(error => console.error(error));
});

// 추가 페이지 라우터
app.get('/enter', (req, res) => {
    res.render('enter');    // .ejs 생략 가능
});

// id별로 수정 페이지 라우터
app.get('/edit/:id', (req, res) => {
    const postId = new ObjectId(req.params.id);
    // db에서 _id를 objectid로 생성하여 해당 내용을 edit.ejs로 넘김
    db.collection('post').findOne({ _id: postId })
        .then(post => {
            res.render('edit', { data: post });
        })
        .catch(error => console.error(error));
});

// 수정 페이지 라우터(db에 수정내용 업데이트)
app.post('/edit', (req, res) => {
    const postId = new ObjectId(req.body.id);
    const updatedPost = {
        title: req.body.title,
        content: req.body.content,
        date: req.body.someDate,
        writer: req.body.writer, 
        region: req.body.region 
    };

    db.collection('post').updateOne({ _id: postId }, { $set: updatedPost })
        .then(result => {
            console.log('Post updated successfully');
            res.redirect('/list');
        })
        .catch(error => console.error(error));
});

// 삭제
app.post('/delete', (req, res) => {
    const postId = new ObjectId(req.body._id);
    db.collection('post').deleteOne({ _id: postId })
        .then(result => {
            console.log('Post deleted successfully');
            res.status(200).send();
        })
        .catch(error => {
            console.error('Error deleting post:', error);
            res.status(500).send();
        });
});

// db에 내용 추가
app.post('/save', (req, res) => {
    const newPost = {
        title: req.body.title,
        content: req.body.content,
        date: req.body.date,
        writer: req.body.writer, 
        region: req.body.region 
    };

    db.collection('post').insertOne(newPost)
        .then(result => {
            console.log('New post added successfully');
            res.redirect('/list');    // 목록 페이지가 보이도록 함
        })
        .catch(error => console.error(error));
});

클라이언트

목록 페이지(/list)

삭제 시 alert

list.ejs




    
    
    Post List
    
    



    
    
        
            Post List
            
            
                
                    
                        Write
                    
                
            
        
    

    
        
            
                
                    Options
                    
                    Write
                
            
            
                Post List
                
                    <% data.forEach(post => { %>
                        
                            
                                
                                    
                                        <%= post.title %>
                                        <%= post.content %>
                                        Region: <%= post.region %>
                                        Writer: <%= post.writer %>
                                        Date: <%= post.date %>
                                        Edit
                                        
                                    
                                
                            
                        
                    <% }); %>

추가 페이지(/enter)

enter.ejs




    
    
    Edit Post
    
    



    
        
            Post List
            
            
                
                    
                        Write
                    
                
            
        
    

    
        Edit Post
        
            
            
                Title
                
            
            
                Content
                <%= data.content %>
            
            
                Date
                
            
            
                Region
                
            
            
                Writer

업데이트 페이지(/edit:_id)

edit.ejs




    
    
    Edit Post
    
    



    
        
            Post List
            
            
                
                    
                        Write
                    
                
            
        
    
    
        Edit Post
        
            
            
                Title
                
            
            
                Content
                <%= data.content %>
            
            
                Date
                
            
            
                Region
                
            
            
                Writer

소감

김현호

몽고DB, 노드JS, 서버와의 연동이 이렇게 부드럽게 잘 연결됨에 놀라웠다. 거기에 덧붙혀 오류의 많은 부분을 챗GPT의 도움을 받으면서 챗GPT의 Assistant 능력에 또한 놀라게 되었다.)

이지우

이번 기회에 처음부터 설계, 구현해보면서 지금까지 배운 내용을 어떤 부분에 어떻게 적용할지 고민하면서 내것으로 만드는 시간이 되었던것 같습니다.

```

mongoDB & jQuery

Thu, 20 Jun 2024 16:15:44 GMT

날짜 추가

enter.html


  작성일

server.js

mydb.collection('post').insertOne({
  title:req.body.title,
  content:req.body.content,
  date:req.body.someDate, // date 추가
})

enter.ejs로 변경

app.get('/enter', function(req, res){
    res.render('enter.ejs');
});

list 페이지 수정


           
    제목
    작성일
    삭제
  


  <% for(let i=0; i < data.length; i++){ %>
           
    <%= data[i].title %>
    <%= data[i].date %>
    
  
  <% } %>

jQuery

ready()를 이용하여 문서가 모두 뜨면 콜백함수 실행

hi

이를 jQuery 사용하도록 변경

버튼이 하나만 있을 경우에는 문제 없음

버튼이 여러개가 있을 경우에 id나 class 사용

hi

삭제 기능 추가

server.js

app.post('/delete', (req, res) => {
    console.log(req.body, '삭제 완료');
});

list.ejs

콘솔에 삭제 id 값이 잘 넘어갔는지 확인 DB에는 아직 적용 안됨

원하는 id 가져오기

데이터셋 속성으로

         
    <%= data[i].title %>
    <%= data[i].date %>
    


...

mongoDB delete 추가

server.js

app.post('/delete', (req, res) => {
    // console.log(req.body, '삭제 완료');
    mydb.collection('post')
        .deleteOne(req.body)
        .then(result => {
            console.log('삭제 완료');
            res.status(200).send();
        })
        .catch(err => {
            console.log(err);
        });
});

아까 받아온 id로 delete 해도 적용이 안됨 ObjectId 형식으로 바꾸어 적용해주어야 함

npm i objectid

const ObjId = require('mongodb').ObjectId;

...

app.post('/delete', (req, res) => {
    console.log(req.body._id);  // 문자열
    req.body._id = new ObjId(req.body._id);
    console.log(req.body._id);  // 객체

    mydb.collection('post')
        .deleteOne(req.body)
        .then(result => {
            console.log('삭제 완료');
            res.status(200).send();
        })
        .catch(err => {
            console.log(err);
        });
});

이제 db에서 확인해 보면 삭제되는 것이 확인됨

/list 페이지에서 확인하기 위해서는 새로고침 해야 함

같은 것을 가리키는 것의 변수명은 모두 같게 맞추기 권장

상태코드 이용

200 코드를 반환되면 list.ejs의 script에서 .done이 실행됨

.done(function(result){
    location.reload();  // 현재 주소 다시 요청
})

새로고침 방법

이제 삭제시 바로 목록에서 사라짐 /list 요청을 서버쪽에 다시 보내고 받아오는 방식임 요청 넘기는건 xhr로 비동기적으로 작업중인데 화면 갱신은 리로드 방식(동기) -> 이것은 의도와 맞지 않음

비동기로 수정하기

삭제될 부분을 찾아서 삭제되어야 함

DOM Tree

button이 눌린 이벤트가 발생한 td의 tr을 찾음(parent)

$('.delete').click(function(e){
    console.log(this);           
});

삭제버튼 클릭 시 발생하는 이벤트의 this를 출력해보면 button이 나옴

$('.delete').click(function(e){
    let _id = e.target.dataset._id;
    let item = $(this);
    $.ajax({
        type:'post',
        url:'/delete',
          data:{_id}  // _id:_id를 함축적으로 표현
    })
    .done(function(result){
        // location.reload();  // 현재 주소 다시 요청
        item.parent('td').parent('tr').remove();
    })
    .fail(function(xhr, textstatus, err){
        console.log(err);
    })
});

삭제 실패 예외 처리

server.js

.catch(err => {
    console.log(err);
    res.status(500).send();
});

list.ejs

.fail(function(xhr, textstatus, err){
    console.log(xhr, textstatus, err);
})

server.js에서 collection 이름을 잘못 주는 방식으로 에러 발생시키기 -> 버튼 클릭 시 db는 삭제가 안되는데 tr은 삭제됨 -> catch가 수행되지 않음 -> throw err;로 작성해도 똑같음 -> 없는 collection 이름을 넣으면 새로 생성해버림!

collection 이름을 빼버리면 에러 발생함

log로 내용을 찍지 않고 alert(err) 실행 시

내용 페이지 생성

list.ejs 복사해서 content.ejs 생성 후 수정

상세내용
제목 : ...
내용 : ...
작성일 : 년월일

시멘틱 url 방식

글마다 글번호를 url 뒤에 붙여서 페이지를 각각 나눠주기

req 객체

header/body/params 형태
네트워크 상에서는 아니고 객체로 만들어지면

app.get('/content/:_id', (req, res) => {
    console.log(req.params._id);
    res.render('content.ejs');
});

db 파라미터 검색

app.get('/content/:_id', (req, res) => {
    mydb.collection('post')
        .findOne({_id:new ObjId(req.params._id)})
        .then(result => {
            res.render('content.ejs');
        })
        .catch(err => {
            res.status(500).send();
        });
});

fineOne에서 deleteOne과 다르게 body가 아닌 객체로 넘기는 이유

get 방식에서는 body가 비어있음
id 값은 body가 아닌 params에 들어 있음

리스트에 링크

는 무조건 get방식

list.ejs


    <% for(let i=0; i < data.length; i++){ %>
             
        <%= data[i].title %>
        <%= data[i].date %>
        
    
    <% } %>

제목 부분에 추가

리스트에 db 나타내기

server.js

app.get('/content/:_id', (req, res) => {
    mydb.collection('post')
        .findOne({_id:new ObjId(req.params._id)})
        .then(result => {
            res.render('content.ejs', {data:result});
        })
        .catch(err => {
            res.status(500).send();
        });
});

render 시 data로 result(_id) 넘기기

content.ejs

상세내용
제목 : <%= data.title %>
내용 : <%= data.content %>
작성일 : <%= data.date %>

content 페이지 수정

content.ejs


    
        
            <%= data.title %>
        
        
            <%= data.content %>
            작성일 : <%= data.date %>
            수정하기

부트스트랩 적용 & 수정하기 추가

수정기능 추가

라우터 추가

app.get('/edit', (req,res)=>{
    res.render('edit.ejs');
})

수정하기 클릭 시 넘어가도록 content.ejs에 수정 수정하기

작성되어 있던 데이터 전달

시멘틱 url 방식으로 전달

app.get('/edit/:_id', (req,res)=>{
    console.log(req.params._id);
    mydb.collection('post')
        .findOne({_id:new ObjId(req.params._id)})
        .then(result => {
            res.render('edit.ejs', {data:result});
        })
        .catch(err => {
            res.status(500).send();
        });
})

위에서 작성했던 content 부분과 render 파일명만 다름

edit.ejs 수정


    제목
    



    내용
            <%= data.content %>
    



    작성일

input 태그에는 value 속성으로 값 넣어주고 textarea는 태그 사이에 작성

content.ejs

수정하기

수정 저장

edit.ejs

post 방식으로 라우터 추가

server.js

app.post('/edit', (req, res) => {
    console.log(req.body);
})

몽고db에 update 반영 updateOne({조건}, {변경항목})

app.post('/edit', (req, res) => {
    console.log(req.body);
    mydb.collection('post')
        .updateOne(
            {_id:new ObjId(req.body._id)},
            {$set:{title:req.body.title, content:req.body.content, date:req.body.someDate } }
        )
        .then()
        .catch(err => {
            res.status(500).send();
        });
});

_id는 edit.ejs 안넘어옴 form 태그 안에 name:_id로 주어진 값이 없어서 -> 히든 타입으로 생성




이렇게도 가능

.then에 redirect로 /list 불러오게

app.post('/edit', (req, res) => {
    console.log(req.body);
    mydb.collection('post')
        .updateOne(
            {_id:new ObjId(req.body._id)},
            {$set:{title:req.body.title, content:req.body.content, date:req.body.someDate } }
        )
        .then(result => {
            console.log('수정완료');
            res.redirect('/list');
        })
        .catch(err => {
            res.status(500).send();
        });
});

redirect 대신 render를 해도 되는가?

render를 하려면 list.ejs에 넘길 data: result의 result에 수정된 data가 넘어가야해서 find()를 다시 해서 넘겨야 해서 복잡 -> 위에 작성했던 get방식으로 요청하여 redirect로 불러오기

성능 향상

get방식의 /edit

content에는 이미 데이터가 다 있는 상태 수정하기 버튼을 눌렀을 때 _id만 가지고 옴 db에 그 값을 가지고 가서 edit.ejs에 필요한 것을 불러와서 사용함

수정하기 화면에 작성되어 있던 데이터 그대로 띄우는 것이니 db에 갔다오지 않고 화면에 있던 데이터를 바로 req에 있는 data를 edit.ejs에 넘겨 렌더링 하게 하면 db에 가서 find()가 생략됨

mongoDB

Wed, 19 Jun 2024 14:14:07 GMT

mongoDB

데이터베이스 - 컬렉션 - 도큐먼트

컬렉션: RDB의 테이블과 비슷한 개념 도큐먼트: RDB의 rows와 비슷한 개념

mongoDB 웹 사용

생성

Databas Access - Add New Database User

DEPLOYMENT/Database - build a cluster

생성 후 DEPLOYMENT/Database - Browse Colletions

데이터베이스 추가

컬렉션 추가

Insert Documnet

여기에서 UPDATE, DELETE도 가능

연결

Connect에서 Drivers 선택

npm install mongodb

mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0

vscode에서 폴더 생성 후

npm init
npm install mongodb

mongodb 드라이버에서 mongodb 객체 생성 하여 전달받은 url로 클라우드의 mongodb와 내 장치를 연결함 -> mongodb 상의 web은 이제 필요 없음

const mongoclient = require('mongodb').MongoClient;
const url = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`; // 연결 url

mongoclient.connect(url)
    .then(client => {
        console.log('몽고DB 접속 성공');
    });

데이터 읽어오기

const mongoclient = require('mongodb').MongoClient;
const url = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`; // 연결 url

let mydb;

mongoclient.connect(url)
    .then(client => {
        console.log('몽고DB 접속 성공');
        mydb = client.db('myboard');
        mydb.collection('post').find().toArray().then(result =>{
            console.log(result);
        })
    });

mydb.collection('post').find().toArray() collection이 된 객체에서 find로 값을 가져와 배열로 받아옴 -> Promise로 받아와짐

서버에서 접근하기

const mongoclient = require('mongodb').MongoClient;
const url = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`; // 연결 url

let mydb;

mongoclient.connect(url)
    .then(client => {
        console.log('몽고DB 접속 성공');
        mydb = client.db('myboard');
        mydb.collection('post').find().toArray()
            .then(result =>{
                console.log(result);
            });
    });

const express = require('express');
const app = express();

app.listen(8080, function(){
    console.log('8080 server ready...');
})

위처럼 작성 시 mongo에 접근하는 것과 서버 부분이 다른 구간으로 작성되어 있어서 db에 접근하지 않은 상태로 서버로 넘어가거나 할 수 있음 -> .then 안에서 db로 사용할 내용을 작성해주어야 함

const mongoclient = require('mongodb').MongoClient;
const url = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`; // 연결 url

let mydb;
const express = require('express');
const app = express();

mongoclient.connect(url)
    .then(client => {
        console.log('몽고DB 접속 성공');
        mydb = client.db('myboard');
        mydb.collection('post')
            .find()
            .toArray()
            .then(result =>{
                console.log(result);
            });
        app.listen(8080, function(){
            console.log('8080 server ready...');
        });
    });

입력 페이지 생성

const mongoclient = require('mongodb').MongoClient;
const url = `mongodb+srv://admin:1234@cluster0.gnyth4u.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0`; // 연결 url

let mydb;
const express = require('express');
const app = express();

mongoclient.connect(url)
    .then(client => {
        console.log('몽고DB 접속 성공');
        mydb = client.db('myboard');

        app.listen(8080, function(){
            console.log('8080 server ready...');
        });
    })
    .catch((err) => {
        console.log(err);
    });

app.get('/list', function(req, res){
    mydb.collection('post')
        .find()
        .toArray()
        .then(result =>{
            console.log(result);
            res.send(result);
    });
})

app.get('/enter', function(req, res){
    res.sendFile(__dirname + '/enter.html');
});



    
        
        
        
        
        
        404 Error - SB Admin
        
        
        
        
    
    

        
            
                
                    제목
                    
                
                
                    내용

입력한 데이터 서버로 보내기

get 방식

post 방식

app.post('/save', function(req, res){
  console.log('저장완료');
})

서버에서 데이터 읽어오기

실행 시 브라우저는 계속 로딩 중 -> 값을 가져오지 못하고 있음

콜백 함수의 req에 데이터가 포함되어 있음 post 방식의 데이터는 body-parser 통해서 읽어 와야 함

npm install body-parser

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

app.post('/save', function(req, res){
  console.log('저장완료');
  console.log(req);
})

입력 값 DB에 저장

app.post('/save', function(req, res){
  //console.log('저장완료');
  //console.log(req);

  // 몽고DB에 저장
  mydb.collection('post').insertOne(
    {title : req.body.title,
     content : req.body.content})
      .then(result => {
        console.log(result);
        console.log('데이터 추가 성공');
  });
  res.send('데이터 추가 성공');
});

단일 도큐먼트 또는 다수의 도큐먼트 모두 삽입
collection('컬렉션 이름').insert()    

단일 도큐먼트 삽입
collection('컬렉션 이름').insertOne()

다수의 도큐먼트 삽입
collection('컬렉션 이름').insertMany()

하나의 단위는 { }
다수의 경우는 { } 여러 개를 [ ]로 묶어서

목록창 생성

list.html

제목	작성일	삭제
...	...

app.get('/list', function(req, res){
    mydb.collection('post')
        .find()
        .toArray()
        .then(result=>{
            console.log(result);
            res.sendFile(__dirname + '/list.html');
        });
});

템플릿 엔진

동적인 결과를 정적인 파일에 담음

res.sendFile(__dirname + '/list.html');로는 동적인 페이지가 나올 수 없음

npm i ejs

app.set('view engin', 'ejs');    // 템플릿 엔진 설정

...

// res.sendFile(__dirname + '/list.html');
res.render('list.ejs');

views 폴더가 기본 작업 환경 views 폴더 안에 .ejs 파일 생성

render()함수로 반복되는 부분을 ejs 문법으로 for문으로 작성하고 이것을 html로 변환시켜줌

렌더링할 데이터 전달

render(렌더링할 파일, 파일에 전달할 데이터)

// res.sendFile(__dirname + '/list.html');
res.render('list.ejs', {data : result});

ejs 문법

<% %> 스크립트릿 <%= %> 익스프레션


            <% for(let i=0; i < data.length; i++){ %>
            
            <% } %>
        
        
                     
                제목
                내용
                삭제
            
        
                 
                <%= data[i].title %>
                <%= data[i].content %>

제목	내용	삭제
<%= data[i].title %>	<%= data[i].content %>

ejs엔진 (png, jsp, asp, php) server side render

html client side render

SSR/CSR

뚫려있는 부분 뒤쪽에 있는것 앞으로 밀면서 채움

major G/C 자주 일어나면 퍼포먼스 ↓

minor G/C

참고

eden에서 서바이브로 넘어가는 객체가 적게 만들어야함 -> 분석, 설계가 잘 된 후에 코드 작성하는 것이 중요!

MySQL 연동

Tue, 18 Jun 2024 15:42:01 GMT

# npm init
# npm i express

# npm i node-mysql

# npm i mysql2

mysql 접근권한 에러 발생 시 mysql2 드라이버 설치해보기

서버

server.js

const mysql = require('mysql');
const conn = mysql.createConnection({
    host: 'localhost',
    user: 'jwbook',
    password:'1234',
    database: 'myboard',
}); // 연결 설정
conn.connect(); // MySQL 연결 완료

//require: import 같은 의미 (라이브러리 가져오기)
const express=require('express');
const app=express();

app.use(express.static('public'));  // 미들웨어 설정 static resource를 다이렉트로 찾음

app.listen(8080, function(){
    console.log("8080 server ready...");
});

// app.get("/", function (req, res) {
//     res.sendFile(__dirname + "/public/index.html");
// });  // 미들웨어 설정하면 라우터가 필요 없어짐

app.get('/list', function(req,res) {
    const rows=conn.query('select * from post', function(err, rows, fields){ // err 있으면 1 없으면 rows 가져옴
        if(err) {
            console.log(err);
        } else {
            console.log(rows); // rows를 블럭 안에서만 사용하도록 해야됨
            res.send(rows);
        }
    });   

    // res.send(rows); // 이렇게 받아오면 안됨
});

클라이언트

my.js

testBtn.addEventListener('click', async function(){ // await을 사용하기 위해 async
    // 직접 사용 코드
    // var xhttp = new XMLHttpRequest();
    // xhttp.onreadystatechange = function() {
    //     if (this.readyState == 4 && this.status == 200) {
    //     // Typical action to be performed when the document is ready:
    //     //document.getElementById("demo").innerHTML = xhttp.responseText;
    //     console.log(xhttp.responseText);
    //     }
    // };
    // xhttp.open("GET", "/list", true);
    // xhttp.send();

    // 간접 사용
    let resObj = await fetch('/list');
    let data = await resObj.json();
    //console.log(data);
    let displayData = 
    `
        ID
        Title
        writer
        created
    
    `;
    data.forEach((item, index) => { // item이 있을 때 까지 반복 (동기함수)
        displayData +=
        `
            ${item.id}
            ${item.title}
            ${item.profile_id}
            ${item.created}
        `
    });

    displayData += ``;

    document.getElementById("datatablesSimple").innerHTML = displayData;    // displayData를 datatablesSimple에 HTML로 넣어줌 (innerText는 Text로 넣어줌)
});

XMLHttpRequest 사용 시 readyState == 4 의미

fetch: 내장되어 있는 XHR을 사용할 수 있게 해주는 내장 함수(동기함수) 제대로 수행 됐을 때 단계적으로 .then 실행

.then을 여러개 쓰는 것 보다 await 써서 fetch 수행되어 나온 결과를 변수에 담을 때 까지 기다림 반드시 await는 async 블럭 안에서만 사용 가능

아직 결과 값이 안담김 (비동기) -> await 사용해야됨

과제

동적인 내용에 modal 띄우려면 script 사용하는게 적당함 클릭되었을 때 실행될 function 작성

id를 기준으로 modal이 뜨기 전에 fetch 호출로 id에 대한 content 값을 가져오기 route 안에서 select content from post where id=1

에러 처리

function(err, rows){
  try{

  }catch(err){

  }
}

SQL로 db에 에러 발생 시

err를 send(err)로 보내기
err로 다시 err를 발생(throw err)시켜 웹 서버가 에러코드를 브라우저에 보냄

throw 문으로 에러 지정

OOSD & Mysql

Mon, 17 Jun 2024 15:32:40 GMT

OOSD Process

OOSD Process; Object-Oriented Software Development Process 객체 지향 소프트웨어 개발 과정

workflows: 해야할 일 activities: woker가 구체적으로 할 일 artifacts: 산출물

산출물을 어떤 형태로 만들지에 대한 툴이 필요함

workflow

요구사항 수집
요구사항 분석
아키텍쳐 수립
설계
구현
테스트
배치

장점

조직이 하는 일과 소프트웨어는 같다고 볼 수 있음

조직에서 팀별로 분리하여 작업할 경우 각 작업은 독립성을 갖지 않고 서로 유기적인 관계를 가져야 함 = 소프트웨어에서 어떻게 협력 구조를 가지고 만들 것인가?

다형성 : 속도를 위해서 만들어진 처리 기법 : if를 줄이기 위함

project stakeholders

프로젝트의 모든 참가자

Deployment specialist : 소프트웨어 비용을 줄이기 위한 전략을 짜는 사람

모델링

단순화 시켜서 가시화를 위함
여러 각도에서 봐야 함
목표: 소통
언어 방식은 휘발성이기 때문에 가시화하기 위하여 문서화, 모델링 함

각자 가지고 있는 mental model에서 요구사항 모델을 끄집어내어 문서화
어마어마한 문서 중 기능적 요구사항/비기능적 요구사항에 대해 설계
두 가지를 합하여 솔루션 모델 제작
코드화

UML

시각 정보를 사용한 저장 매체를 표준화 한 도구 소통의 방법을 시각화하는 툴

MySQL

DBMS
ctrl+Enter = 커서 라인 실행

생성

create database myboard default character set utf8;

use myboard;

create table post(
id int(11) not null auto_increment,
title varchar(100) not null,
content text null,
created datetime not null,
writer varchar(100) null,
email varchar(100) null,
primary key(id)
);
// NULL은 생략 가능

desc post;    // 설정한 필드 이름, 타입 옵션 표시

삽입

insert into post(title, content, created, writer, email)
values('삶은', '계란이다', NOW(), 'lee', 'lee@naver.com');

insert into post(title, content, created, writer, email)
values('위대하다', '밥을 많이 먹어서', NOW(), 'lee', 'lee@naver.com');

insert into post(title, content, created, writer, email)
values('나의 성격유형', 'infj', NOW(), 'kim', 'kim@naver.com');

insert into post(title, content, created, writer, email)
values('가을바람', '가을은 쓸쓸하다', NOW(), 'park', 'park@naver.com');

insert into post(title, content, created, writer, email)
values('언젠가부터', '사람들과 이해관계가 힘들어지는 것 같다', NOW(), 'lee', 'lee@naver.com');

조회

select id, title, content from post;

select * from post where id>2;

select * from post where writer='lee';

select * from post order by id desc;// 내림차순
select * from post order by id asc;    // 오름차순

select * from post limit 2;    // 정렬된 내용 중 위에서 2건

수정

update post set content = '성격 파탄자' where id = 3;

삭제

delete from post where id=2;

테이블 분리

rename table post to post_bk;    // 테이블명 변경

create table post(
id int(11) not null auto_increment,
title varchar(100) not null,
content text null,
created datetime not null,
profile_id int(11) default null,
primary key(id)
);

create table profile(
id int(11) not null auto_increment,
writer varchar(20) not null,
email varchar(100) default null,
primary key(id)
);

위 보이는 테이블에서 더블 클릭 후 내용 작성도 가능 id는 자동 할당 됨

insert into post(title, content, created, profile_id)
values('삶은', '계란이다', NOW(), 1);

insert into post(title, content, created, profile_id)
values('위대하다', '밥을 많이 먹어서', NOW(), 1);

insert into post(title, content, created, profile_id)
values('나의 성격유형', 'infj', NOW(), 2);

insert into post(title, content, created, profile_id)
values('가을바람', '가을은 쓸쓸하다', NOW(), 3);

insert into post(title, content, created, profile_id)
values('언젠가부터', '사람들과 이해관계가 힘들어지는 것 같다', NOW(), 1);

join

[참고내용]

select *
from post
left join profile
on post.profile_id = profile.id;

모든 칼럼이 다 나와서 가독성이 떨어짐

select id, title, content, created, writer, email
from post
left join profile
on post.profile_id = profile.id;

실행 시 오류 발생 select의 id가 어떤 테이블의 id인지 모호함

select post.id, title, content, created, writer, email
from post
left join profile
on post.profile_id = profile.id;

자바스크립트(3) & Node.js(1)

Fri, 14 Jun 2024 15:57:42 GMT

객체

생성 방법

// 방법1
let dic = new Object();    

dic.boy = '소년';
dic.girl = '소녀';
dic.friend = '친구';


// 방법 2
let dic = {
    boy: '소년',
    girl: '소녀',
    friend: '친구'
};


// 자바와 달리 멤버 추가/삭제/수정이 자유로움
dic.apple = '사과';
dic.ten = 10;

delete dic.girl;

dic.boy = '청년';

console.log(dic.boy);
console.log(dic['boy']);    // 이렇게도 가능
// !''로 씌워주어야 함
// 프로퍼티에 띄어쓰기 넣기 가능

객체 데이터 관리 방법

const 키워드로 선언한 객체의 프로퍼티 값을 추가하거나 삭제, 변경이 가능함

객체 자체의 주소 값은 const 형식으로 재할당이 불가능
하지만 객체의 데이터는 다른 주소에 저장되어있는 값이기 때문에 객체 주소에는 영향을 미치지 않으므로 추가, 변경, 삭제가 가능함

여러 객체 생성 방식

const unit = {
    attack: function (weapon){
        return `${weapon}으로 공격한다.`;
    }
  /*attack (weapon){
        return `${weapon}으로 공격한다.`;
    }*/
  // 이렇게 표현도 가능
};

console.log(unit);  // 객체
console.log(unit.attack);   // 객체 프로퍼티
console.log(unit.attack('총')); // 객체 메서드 호출 결과값

객체 생성할 때 프로퍼티 키를 대괄호로 표시할 경우

rl.question('무조건 천원! 상품 입력? ', function(obj){
    let basket = {
        [obj] : "1000원",
    }
    console.log(basket[obj]);
    // 무조건 1000원 출력

    rl.close();
})

프로퍼티 키와 값의 이름이 같아도 됨

let id = 'jamsu';
let pw = '1111';

let user = {
    id : id,
    pw : pw
  // 이때 값 부분 생략 가능
  /*id,
      pw*/
}

console.log(user.id);
console.log(user.pw);

// 하나씩 꺼내서 출력하기
for(let info in user){
    console.log(`${info} : ${user[info]}`);
}

화살표 함수

수행 컨텍스트가 달라질 때 화살표 함수 사용으로 편하게 사용 가능


function plus(a, b){
  return a + b;
}

// 이름 없는 function을 변수에 할당
let plus = (a, b) =>{
    return a + b;
}

// 매개변수 하나일 경우 괄호 생략 가능
let plus = a => a+1;    

// 매개변수가 없는 경우 빈괄호 표시
let plus = () => 2+1;

let obj = {
    myVar: 'foo',

    myFunc: function(){
        let self = this;    // object의 주소가 self에 할당됨
        console.log(this.myVar);    // 수행 컨텍스트가 obj

        setTimeout(function(){
            console.log(this.myVar);// 수행 컨텍스트가 window
        }, 1000);

          setTimeout(function(){
            console.log(self.myVar);// 수행 컨텍스트가 obj
        }, 1000);

      // self 변수에 주소 할당하여 사용하는것을 함수로 만든 것이 bind(this)
          setTimeout(function(){
            console.log(this.myVar);
        }.bind(this), 1000);        // 수행 컨텍스트가 obj

      // 수행 컨텍스트가 달라질 때 화살표 함수 사용으로 편하게 사용 가능
          setTimeout(() => {  // 화살표 함수, function() 객체가 만들어질 때 this를 바인딩
            console.log(this.myVar);// 수행 컨텍스트가 obj
        }, 1000);
    }
}
obj.myFunc();   // foo   undefined   foo

어떤 객체에 귀속되는 함수(메소드) 마들 때는 프로퍼티에 할당되는 함수를 function 키워드로 만들기

나머지는 콜백함수는 화살표 함수로 만드는게 베스트

let obj = {
    myVar: 'foo',

    myFunc: function(){
        console.log(this.myVar);    // 수행 컨텍스트가 obj

          setTimeout(() => {  
            console.log(this.myVar);// 수행 컨텍스트가 obj
        }, 1000);
    }
}

obj.myFunc();

비구조화 할당

배열의 요소나 프로퍼티를 변수에 할당하여 사용

const color=['red', 'green', 'blue'];
let [r, g, b] = color;
// [r, g, b]=['red', 'green', 'blue'];

console.log(r);
console.log(g);
console.log(b);

// 변수값 변경
[b, g, r] = [r, g, b]

배열에서 ...을 붙인 매개변수에 요소 여러개 넣기 가능

const [a, b, ...rest] 
= ['C#', 'javascript', 'python', 'react', 'C++'];
console.log(a);
console.log(b);
console.log(rest.length);    // 3
console.log(rest[0]);
console.log(rest[1]);
console.log(rest[2]);
console.log(rest);    // [ 'python', 'react', 'C++' ]

// 배열 결합
const arr1 = ['C#', 'javascript'];
const arr2 = ['python', 'react', 'C++'];
const arr3 = [...arr1, ...arr2];

console.log(arr3);    
// [ 'python', 'react', 'C++' ]

console.log([arr1, arr2]); 
/*  [ [ 'C#', 'javascript' ],
      [ 'python', 'react', 'C++' ] ]*/

객체의 프로퍼티

let {id, pw, name} 
    = {id: 'a', pw: 'b', name: 'c', age: 30};
// 이때 age는 사용할 수 없음

프로미스

function c(){
    console.log('c');
}
function b(){
    console.log('b');
}
function a(){
    console.log('a');
}

setTimeout(a, 3000);    // 3초 뒤에 a 실행
setTimeout(b, 2000);    // 2초 뒤에 b 실행
setTimeout(c, 1000);    // 1초 뒤에 c 실행
// 예상: 3초 뒤 a 출력, 2초 뒤 b 출력, 1초 뒤 c 출력(동기)
// 실제 실행 결과: c b a 1초 간격으로 출력 (비동기)

setTimeout(function(){
    console.log('a');
}, 3000);
setTimeout(function(){
    console.log('b');
}, 2000);
setTimeout(function(){
    console.log('c');
}, 1000);
// 같은 결과

-> a b c 순서로 나오게 하려면?

setTimeout(function(){
    console.log('a');
    setTimeout(function(){
        console.log('b');
        setTimeout(function(){
            console.log('c');
        }, 1000);
    }, 2000);
}, 3000);

콜백이 너무 많고 가독성 떨어짐

프로미스를 사용하여 의도하는 순서대로 실행 가능

var pro1 = new Promise(function(resolve, reject){   
  // resolve: 정상, reject: 비정상
    if(true)    // 서버에 갔다온 시점 / 결과 올때까지 기다리고 결과가 있으면 then으로 넘어감
        resolve(1); // then 안의 함수 실행됨
    else    reject();
});

pro1
    .then(function(value){ // true일 때
        console.log(value);     // 후속작업
    })
    .catch(function(){  // false일 때
        console.log(2);
    });

flag 변수로 매개변수에 따라 resolve/reject결과 출력

function f(flag){
    return new Promise((resolve, reject) => {   
        if(flag){
          resolve(1); 
        }else{
          reject('처리 오류');
        }
    });
}

const prom = f(false);    

prom
    .then(function(value){ 
        console.log(value);     
    })
    .catch(function(errMsg){  
        console.log(errMsg);
    });

프로미스를 이용하여 a b c 순서로 나오도록

function f(flag, time){
    return new Promise((resolve, reject) => {   
        if(flag){
            setTimeout(resolve, time);
        }else{
            reject('처리 오류');
        }
    });
}

f(true, 3000)
    .then(function(){ 
        console.log('a');     
        return f(true, 2000);   // then을 한번 더 쓰기 위함
    })
    .then(function(){
        console.log('b');
        return f(true, 1000);
    })
    .then(function(){
        console.log('c');
    })
    .catch(function(errMsg){  
        console.log(errMsg);
    });

Node.js

v8 엔진 사용
비동기 이벤트 기반의 런타임

const http = require('http');   // core 라이브러리에 있는 http 모듈 가져옴

const server = http.createServer((req, res)=>{
    res.statusCode = 200;   // 정상
    res.setHeader('Content-Type', 'text/html');    // html 사용 위함
    res.end('Hello World');
});

server.listen(3000, "127.0.0.1", () => {
    console.log("server ready...");
});

express 모듈을 깔아두어서 위 코드를 작성하지 호출하여 사용
라이브러리 매니저가 있으면 패키지를 가져오기 편함
npm로 install
코드가 업데이트 될때마다 서버를 다시 켜줘야하는데 nodemon을 사용하면 코드 변경이 있을 때 자동으로 적용해줌

const express = require('express');
const app = express();

app.listen(3000, function(){
    console.log('server ready...');
});

get 요청 처리

app.get('/book', function(req,res){
    res.send('도서 목록 관련 페이지입니다.')
});

실습

서버 코드

const express = require('express');
const app = express();

app.listen(3000, function(){
    console.log('server ready...');
});

app.get('/', function(req,res){
    res.sendFile(__dirname + '/index.html');
});

app.get('/inputUser', function(req,res){
    res.sendFile(__dirname + '/inputUser.html');
});

app.get('/userInfo', function(req,res){
    res.sendFile(__dirname + '/userInfo.html');
});

3개의 페이지 구성

root

Navbar의 Home, 회원 정보 등록 클릭 시 페이지 이동이 가능하도록 href="/", href="/inputUser" 속성 추가

bootstrap에서 가져온 코드에는 href="#"로 작성되어 있었음
클릭 시 실행내용은 없지만 페이지 최상단으로 이동한다는 의미
최상단으로도 이동하지 않게 하려면 href="#none" 또는 href="#;"로 작성

inputUser

입력값에 대한 유효성 검사는 넣지 않음
가입하기 버튼 클릭 시 등록 알림창 띄워짐
다시 작성 버튼 클릭 시 입력 내용 초기화


  
    개인정보 입력
    이름:

        


    비밀번호:

        


    E-mail:

        


    연락처:

          -  - 

    

    성별 :  남  여

    

    취미 : 운동 독서
    여행 음악감상

    

    본인 소개:

form 태그 안에 작성 할 경우 fieldset으로 내용 필드를 생성할 수 있음
이때 legend로 이 필드의 제목 작성 가능
radio: 단일선택
checkbox: 다중선택
textarea: 긴 내용 작성 가능한 칸
div 안에 style을 text-align: center;로 지정하여 가운데 정렬
form 태그 안에서 input type을 reset으로 지정하면 적은 내용 삭제 버튼 생성됨
가입하기 버튼 클릭 시 '등록되었습니다.' 문구가 띄워지고 userInfo 페이지로 넘어가도록 함수 작성
document.location으로 현재 페이지를 userInfo로 변경 가능

userInfo

자바스크립트(2)

Thu, 13 Jun 2024 14:52:50 GMT

문자열

function account(userId){
    let savedUser='이은성';
    if(userId==savedUser){
        console.log('반갑습니다 ', savedUser, '님');
    } else{
        console.log('fail');
    }
}
account('이은성');

여기에서 userId와 savedUser는 완전히 같은 내용
문자열은 따로 객체를 생성하고 그 주소를 가리키도록 하게됨
String Literal Pool에 있는 c-value 엔진으로 같은 내용이 있는지 확인
같은 내용의 객체를 중복으로 생성하지 않고 저장공간 효율적으로 사용 가능
String Literal Pool은 Method area(구조)에 존재하여 프로그램이 종료될 때까지 상주하게 됨
많이 사용되면 안된다 (static도)
edan은 Instance atrea에 존재하여 지워질 수 있음

String s1='java';    // String Literal Pool에 생성

String s2 = new String('java');    // edan에 생성

s1+='study'    // edan에 새로 생성

이벤트

1. onclick 사용

button onclick="msg('이지우')">전송에서 msg()는 호출이 아니라 연결
호출은 버튼이 눌렸을 때 발생
이벤트 하나만 적용 가능

2. 자바 스크립트로 onclick 속성 추가

3. addEventListener 사용

이벤트가 발생(호출)했을 때 이벤트는 엔진으로 실행되고 그때 정보를 매개변수로 전달해줌

콜백 함수

function order(callback){ // callback은 function code
  callback();    // 나중에 호출됨
}

const coffe = function(){
    console.log('주문하신 아메리카노 나왔습니다');
};
setTimeout(coffe, 5000);    // 5초 뒤 실행

setTimeout 형태

function setTime(f, time){
    time delay
    f();    // call back
}

html과 연결하기

html




    
    
    Document

const coffe = function(){
    alert('주문하신 아메리카노 나왔습니다');
};

function order(){
    setTimeout(coffe, 5000);
}

btn.addEventListener('click', order);

// 콜백 안에 콜백 넣기 가능
btn.addEventListener('click', function (){
    setTimeout(function(){
        alert('주문하신 아메리카노 나왔습니다');
    }, 5000);
});

백틱(`)

const name = '이지우';
const age = '25';
const height = 178.5;

// 템플릿 문자열
console.log(`My name is ${name}, My age is ${age}, My height is ${height}`);

// 백틱 안에서 엔터로 줄바꿈 가능
console.log(`My name is ${name}
My age is ${age}
My height is ${height}`);

실습

test.js

let q1Answer = 'ISTJ';

function checkQ1(){
    if(a1.value == q1Answer)
        alert('정답입니다.');
    else
        alert(`틀렸습니다. 정답은 '${q1Answer}'입니다.`);
}

test.html




    
    
    Document


    이지우님의 MBTI는?

html5 & 자바스크립트

Wed, 12 Jun 2024 08:46:13 GMT

Semantic : 따로 스타일이나 디자인이 없음 : 자리 지정만 해주는 것 : 보이게 하기위한 태그가 아님

context = application

http://ip:port/context/resource

java sublet의 코드 한줄이 text sublet 객체가 돌아가려면 보조 객체가 있어야하고 이 코드들은 눈에 보이지 않음 -> container가 text 작성하여 run-time때 작성함 이때 작업을 context라고 함

자바스크립트

객체 생성

객체리터럴 이용
```
var p1={mame:"전은수"}
```

Object 생성자 이용

var p2=new Object();
p2.name="전은수";

사용자 지정 생성자 이용

function Person(name){
this.name=name;
}
var p3=new Person("전은수");

var Person=function(name){ //이름이 없는 function(익명 함수)을 Person 변수에 담음 this.name=name; } var p4=new Person("전은수");

---

function

method : 소속


![](https://velog.velcdn.com/images/esjw_/post/22a7e98a-66a4-45b8-9f45-99a1b000461d/image.png)


- window
data: document, frames, history...
method: open(), close(), moveTo()...

- document
data: anchors, forms, images, links, location...
method: write()

- console
method: log()

```js
window.document.write() // 이렇게 써야하지만 
document.write() // js에서는 이렇게 써도 됨

script 안의 데이터는 모두 window의 data 영역에 올라가짐 (stack X)

Object(): function 객체



원형/상속

객체 생성 후에 상위 형식으로 형변환하면 하위는 shadow 처리됨(shadow effect)

B a = new A(); // A로 생성하고 B로 지정함 (자동 형변환)

function Person(name){
  this.name=name;
}
var p1=new Person('bbb');
console.log(p1.name);    // bbb

var p2=Person('bbb');    
// new 없이 function 이름으로 호출 -> function 객체 생성, 리턴 값이 없음(할당X)

console.log(p2);    // undefined
console.log(p2.name);    //TypeError
console.log(window.name);    // bbb

function Person(){
  this.eyes=2;
  this.nose=1;
}
var p1=new Person();
var p2=new Persion();
console.log(p1.eyes+':'+p1.nose);    // 2:1
console.log('
');
console.log(p2.eyes+':'+p2.nose);    // 2:1


p1, p2의 데이터를 공유하고 싶은 경우
function Person(){
}
Person.prototype.eyes=2;
Person.prototype.nose=1;
var p1=new Person();
var p2=new Persion();
console.log(p1.eyes+':'+p1.nose);    // 2:1
console.log('
');
console.log(p2.eyes+':'+p2.nose);    // 2:1

// 이때 p1의 eyes를 1로 바꿈
p1.eyes=1;
console.log(p1.eyes+':'+p1.nose);    // 1:1
// 개별로 eyes data값이  생김
console.log('
');
console.log(p2.eyes+':'+p2.nose);    // 2:1

Person.prototype.eyes=1 // 이 형태로 변경해야 함

var p1={
  eyes: 3,
  nose: 4
}
console,log(p1.__proto__===Object.prototype);    // true
console.log(Object===p1.constructe);    // true
console.log(p1.hasOwnProperty('eyes'));    // true

// function에 hoisting 발생

fn(); // error: fn is not a function
var fn = function() {alert("test!");}    // function  코드를 실행하는 것
// var fn 부분만 위로 올라감

아래 방법이 오류 잘 발생 안함
fun2(); // ok
function fn2() {alert('test!');}
// 전체가 위로 올라감

유효성 검사

// id가 null이 아니고 unfined도 아닌 유효한 값이면 true 그렇지 않으면 null 반환
var result = id ?? null 
? '로그인되었습니다.':'아이디 또는 비번이 틀렸습니다.';

입력 받아서 처리하기

const readline = require('readline');

const rl=readline.createInterface({
    input : process.stdin,
    output: process.stdout 
});
rl.question('프로그래밍 언어 이름을 입력하시오,: ',function(data){
    console.log('가장 좋아하는 프로그래밍 언어는 ' + data + '입니다.');
      rl.close();
});
// question(메시지, 호출해서 어떤 작업을 할것인지)
// function은 호출된게 아니라 정의만 해둔 상태
// 어떤 조건을 만족하면 하게될 작업 (call back function)

const readline = require('readline');

const rl=readline.createInterface({
    input : process.stdin,
    output: process.stdout 
});

rl.question("정수를 입력하시오,:", function(num){
    num=num%2;
    if(num){
        console.log("홀수 입니다");
    } else{
        console.log("짝수 입니다");
    }
    rl.close();
});

자습내용 정리

HTML의 값 변경하기

document.getElementById('demo').innerHTML='Hello JavaScript';
// demo라는 id의 객체 값을 변경한다

document.getElementById('myImage').src='pic_bulbon.gif';
// myImage라는 id의 src라는 속성값 변경

document.getElementById("demo").style.fontSize = "35px";
// demo라는 id 객체의 폰트 사이즈 변경

document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";
// demo라는 id 객체의 display 변경 
// none: 안보이게, block: 보이게

JS 위치에 따른 HTML에서 읽는 법


// html 사이에 js 넣을 수 있음
// ,  아무데나 넣어도 됨
//  맨 하단에 작성하면 display speed가 향상됨

  
// 외부 .js 파일 삽입

외부에 JS 파일을 두었을 때 장점

HTML과 분리해둘 수 있음
HTML과 JS의 가독성 향상
Cache로 저장된 JS 파일을 불러와 페이지 로드 속도가 빨라짐

외부 참조 방법

전체 URL 포함
파일 경로
경로 사용 X

JS 출력

innerHTML로 HTML 요소에 작성
document.write()로 HTML 출력에 작성
window.alert()로 경고 상자에 작성
console.log()로 브라우저 콘솔에 작성


    //  11 이 됨



---




// 이때 버튼을 클릭하면 기존의 HTML이 모두 삭제됨
// test용으로만 사용하기

---


// 경고 박스로 띄우기
// window 없이 alert(5+6);로 작성해도 됨

---



---


// 현재 창 출력하기

키워드

var: 변수 선언
let: 블록 변수 선언
const: 블록 상수 선언
if: 조건에 따라 실행될 명령문 블록 표시
switch: 여러 경우에 따른 명령문 블록 표시
for: 반복될 블록 표시
function: 함수 선언
return: 함수 종료
try: 명령 블록에 대한 오류 처리 구현

JS 변수

변수에 숫자 넣었다가 문자열로 변경하기 가능

선언 방법

자동 선언
var
let
const

// 자동 선언
x=5;
y=6;
z=x+y;


// var
var x=5;
var y=6;
var z=x+y;


// let
let x=5;
let y=6;
let z=x+y;


// const
const x=5;
const y=6;
const z=x+y;
// const로 선언 시 값/형 변경 불가능

변경되면 안되는 변수는 const 사용
const 사용이 안될때 let 사용
var은 오래된 브라우저도 지원

+ 로 문자열 합치기

let x = 5+2+3; // 8
let y = 'John' + ' ' + 'Doe'; // John Doe

// 숫자를 하나라도 따옴표로 묶으면 그 뒤 숫자는 문자열로 처리됨
let z = '5'+2+3 // 523
let z = 2+3+'5' // 55

let

블록 범위가 지정됨
사용하기 전에 미리 선언되어야 함
다시 선언할 수 없음

{
  let x = 2;
  var y = 1;
}
// 여기에서 x 사용 못함
// var로 선언한 y는 전역변수로 사용 가능


let a = 'abc';
let a = 0;    // 재선언 불가능

var b = 'abc';
var b = 0;    // 가능

	범위 지정	재선언	재할당	hoisted	binds this
var	N	Y	Y	Y	Y
let	Y	N	Y	N	N
const	Y	N	N	N	N

binds this : 객체 메서드를 콜백으로 사용할 때 this가 사라지는 문제 : 객체 메서드가 객체 내부가 아니라 다른 곳에서 전달되어 호출되면 this가 사라짐 : window에 객체가 없어서 undefined가 출력됨

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

setTimeout(function() {
  user.sayHi(); // Hello, John!
}, 1000);

const

재할당 불가
선언과 함께 할당해야됨

배열에 사용 시
const cars = ["Saab", "Volvo", "BMW"];

// 값 변경 가능
cars[0] = "Toyota";

// 값 추가 가능
cars.push("Audi");

// 재할당 불가능
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

데이터 형식

// Numbers:
let length = 16;
let weight = 7.5;
let x = 34.00;    // 34
let y = 123e-5;   // 0.00123
let z = BigInt("123456789012345678901234567890");

// Strings:
let color = "Yellow";
let lastName = "Johnson";
let car = "";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

function

함수 호출 시 () 없이 함수명만 작성하면 함수가 반환됨

클라이언트-서버 구조

Tue, 11 Jun 2024 15:52:08 GMT

새로고침 - 요청을 다시 서버에 보내라는 의도 해당 주소의 리소스를 다시 요청

캐싱 - 이미 갖고왔던 정보는 새로고침 안함 똑같은 내용을 다시 가져오는 불편함을 해소하기 위함

강제 새로고침 - ctrl+새로고침

환경마다 다르게 보이게 하는 법

서버/도메인 네임 다르게 설정
도메인 같고 컨텍스트명에 따라 요청 구별
컨텍스트는 하나만 사용하고 컨트롤러 두기 컨트롤러 - 브라우저가 어디인지 확인하고 그거에 맞는 자원 리턴

Web1

정적(static) 페이지 - HTML, CSS, js static 리소스 : 한번 요청을 받으면 클라이언트쪽에 저장함 : 저장된 내용으로 화면에 그려내는 작업을 함 : 이미 저장된 내용과 다른 자원 요청이 발생하면 새로 받아와야 함 -> 이미 있던 내용 삭제됨

다 지우고 새로 작성하기 때문에 시간이 걸려 화면이 정체되어 보일 수 있음(깜빡이는 현상)
네트워크 밴드위스(대역폭) : 요청했을 때 얼마의 양이 가느냐 : 화면이 고정되어있는데 아주 작은 부분만 수정될 경우
밴드위스 비용이 많이 듦
해결하기 위해 XHR 사용

Web2

XHR : XML HTTP Request : js에서 요청 중 적은 데이터만 가져오도록 할 수 있음 : 1) 처음부터 다시 그리지 않기 위함 : 2) 네트워크 비용 절감을 위함 : request는 같지만 url에 마지막에 들어가는 리소스가 동적인 url이어야 함

정적 : .html, .css, .js
동적 : getData(확장명X)

일반적으로는 Web Server에서 해석 못함 (404) -> 컨트롤러를 만들어두고 컨트롤러로 넘길 수 있게해야 함 -> 컨트롤러에는 if-else if문이 엄청 길게 코딩되어 있음(컨트롤링)

비즈니스: DB에 접근해라 같은 명령

MVC 사용하지 않으면 불편함 why? 한 코드에 컨트롤링, model, view가 모아져 있어서 가독성이 낮아짐 -> 유지보수 힘듦 -> 비즈니스 컴포넌트 따로 두기

요청에따라 일하는 모델 클래스 분리 리퀘스트 객체에따라 컴팩트한 데이터만 제공 view 데이터가 text 기반으로 조그마한 데이터 제공 (xml)

XHR 객체로 요청 받아오는 동안에 화면 동작 안함 -> 비동기로 처리하기 비동기 : 다른 화면대로 동작하고 XHR 객체 처리

Web1: 정적 site Web2: XHR 비동적 처리 Web3: 블록체인

Web3

웹서버에 클라이언트가 집중됨 (중앙집중) -> 사용자의 정보가 모두 서버에 저장됨 -> 서버에서 권한을 가지고 클라이언트 제어 -> 클라이언트가 종속적 입장

클라이언트(peer)끼리 데이터 사용 가능 (p2p) 최초 p2p 프로토콜 - 비트코인

보상이 없으면 네트워크에 참여 안함 보상 체계 구성 - 네트워크상에 데이터 공유 -> 데이터 저장소 비용 지불해야함 -> 이 비용보다 보상이 많아야 됨 -> 저장하는 사람에 대해서 보상을 해주자 -> "비트코인"

시간 순서대로 데이터를 특정 시간만큼 모아서 데이터 작성 후 압축(해싱) 해싱 정보를 데이터에 포함시켜서 다시 해싱 다음 단위 시간동안 모아진 데이터를 포함시켜서 다시 해싱 -> 데이터 묶음이 계속 늘어남 -> 체인

RDB와 블록체인 차이

RDB

데이터 셰도 가능
변경 가능
중간에 추가 가능

블록체인

복호화가 안되는 압축 기술
연결된 데이터 중간에 삽입하거나 변경 불가능
항상 뒤에만 붙어야 함
변경하기 위해서는 변경사항 정보 추가해야함
삭제하기 위해서는 삭제되었다는 정보 추가
모든 사항을 insert로 수행
원본 데이터는 항상 남겨진 상태
이러한 정보(해시값)를 통해 해킹 상황 알아낼 수 있음
데이터의 무결성 보장

사용자들끼리 네트워크에 참여하여 데이터를 서로 제공하면서 무결성 확보하자 -> 정보가 저장된 컴퓨터가 사라지면 데이터가 날아감 -> 정보를 가지고 있는 사람끼리 결탁하여 조작할 수 있음 -> 기밀성이 유지되지 않음 -> 기밀성이 요구되어지는 정보는 p2p 네트워크에 참여하지 않아야 함

b2b를 사용해야 한다 : 전송 프로토콜만 http 사용 : 메시지 프로토콜은 soap

b2b에 블록체인 활용

이체를 농협에 하면 블록으로 남음
블록을 남길 머신을 고사양으로 구축
private/consortium 블록체인
하이퍼레저 패브릭
사용자들을 제한하기 위한 프로토콜을 만들거나 기존 프로토콜 활용하자
Web3는 블록체인을 쉽게 할 수 있는 기술이 내장된 브라우저를 사용하는 시점 (아직 없음)

클라이언트가 네이버 지도상에 직접적으로 데이터 가져오면 네이버 서버 비용 증가 -> 다수 이용 목적이더라도 너무 많은 비용이 들어가기 때문에 손해 & 공격받을 수 있음 -> 파트너한테만 key 발급하여 사용 가능하게 하기

개발자 key가 있어도 완전 무료는 아니고 과금 request 건수에 따라 과금 + 비이상적 요청에 방어

Architecture

IT 기술의 변천과 Web 기술의 발전

Tue, 11 Jun 2024 00:47:43 GMT

program 기법 측면

구조적 측면

Main Frame에 연결되어 있는것을 완전히 분리 -> data/program 내 컴퓨터에 (데스크탑 시대) size에 따라 내 컴퓨터 사양에 따라 문제 생길 수 있음 -> 다른 컴퓨터를 만들어 놓고 program을 올려놓고 내 컴퓨터에서 불러오고 랜더링하여 사용 (네트워크 시대) DBMS로 data를 요청하고 사용

클라이언트 머신에 따라 프로그램을 다르게 배포/유지보수 해야돼서 서버 개발자 입장에서 너무 힘듬

Web Server - Web browser 웹서버는 개발자가 아니라 단체에서 제공 받음 http://ip:80(port)/Context명(애플리케이션명)/a.html ip 부분은 도메인명으로 바꿔서 씀 Context는 여러개 있을 수 있음

client에서 해당 애플리케이션에 맞는 엔진으로 요청 처리 http는 일회성(소켓통신이라서 서버쪽에 소켓이 계속 생겨버림 -> 서버측에서 관리하기도 힘들고 자원이 많이 사용됨 -> 많은 클라이언트 동시 수용 못함)

http가 텍스트 기반이라서 많이 쓰는 프로토콜임 컴퓨터 입장에서는 텍스트 기반이 힘들고 사람 입장에서는 편함 멀티 유저를 수용하기위해 등장

xml : 텍스트 기반 json : 요즘 쓰는 텍스트 기반

웹서버 위에서 구동되는 애플리케이션 개발(개발자) 여러 언어로 시도(서버 위에서 돌아가는 언어 통칭 CGI;Common Gateway Interface)

*심각한 문제 *

프로세스식 처리 : request마다 프로세스 하나가 돌아감 : 메모리 공유 못함
쓰레드로 돌아가게 함(OS와 HW에도 연결되어야 함)
스케일 아웃 (서버 증설) : 쓰레드 하나당 감당할 수 있는 수준을 넘어서면 증설해야함 : 상황마다 예전에 만들어진 프로그램을 올릴 수 없을 수 있음
플랫폼 독립성 구성해야함(Sun에서 관심 있었음) 어떤 플랫폼에서든 구동할 수 있게 하는 언어 - Oak 개발
잘 안됐고 Web에서 CGI 언어로 Java 개발됨

Web Application 아키텍처

가장 엔터프라이즈 좋은게 java 가장 편리한게 Node.js

모바일

3-3 082 DML [A]

Fri, 10 May 2024 17:46:24 GMT

DML(데이터 조작어)

데이터베이스 사용자가 응용 프로그램이나 질의어를 통해 저장된 데이터를 실질적으로 관리하는데 사용되는 언어

데이터베이스 사용자와 데이터베이스 관리 시스템 간의 인터페이스 제공

SELECT: 튜플 검색
INSERT: 튜플 삽입
DELETE: 튜플 삭제
UPDATE: 튜플 갱신

삽입문(INSERT INTO~)

기본 테이블에 새로운 튜플 삽입

대응하는 속성과 데이터는 개수와 데이터 유형이 일치해야 함
기본 테이블의 모든 속성을 사용할 때는 속성명 생략 가능
SELECT문을 사용하여 다른 테이블의 검색 결과 삽입 가능

ex) INSERT INTO 사원 (이름, 부서) VALUES ('홍승현', '인터넷');

INSERT INTO 사원 VALUES ('장보고', '기획', #05/03/73#, '홍제동', 90);

날짜 데이터는 '' 또는 ##으로 묶어줌

삭제문(DELETE FROM~)

기본 테이블에 있는 튜플 중에서 특정 튜플 삭제

모든 레코드 삭제할 때는 WHERE절 생략
모든 레코드를 삭제하더라도 테이블 구조는 남아있어서 DROP과 다름

갱신문(UPDATE~ SET~)

기본 테이블에 있는 튜플 중 특정 튜플 내용 변경

3-3 081 DCL [B]

Fri, 10 May 2024 17:25:11 GMT

DCL(데이터 제어어)

데이터의 보안, 무결성, 회복, 병행 제어 등을 정의

GRANT : 권한 부여
REVOKE : 권한 취소
COMMIT : 완료
ROLLBACK : 복구
SAVEPOINT : 저장점

GRANT / REVOKE

*GRANT : 권한 부여 REVOKE : 권한 취소 *

사용자 등급 지정 및 해제

ex) GRANT CONNECT TO STAR

사용자 등급

DBA: 데이터베이스 관리자
RESOURCE: 데이터베이스 및 테이블 생성 가능자
CONNECT: 단순 사용자

테이블 및 속성에 대한 권한 부여 및 취소

ex1) GRANT ALL ON 고객 TO NABI WITH GRANT OPTION ex2) REVOKE GRANT OPTION FOR UPDATE ON 고객 FROM STAR

권한 종류: ALL, SELECT, INSERT, DELETE, UPDATE, ALTER
WITH GRANT OPTION : 부여받은 권한을 다른 사용자에게 다시 부여할 수 있는 권한 부여
GRANT OPTION FOR : 다른 사용자에게 권한을 부여할 수 있는 권한 취소
CASCADE : 권한 취소 시 권한을 부여받았던 사용자가 다른 사용자에게 부여한 권한도 연쇄적으로 취소

COMMIT

트랜잭션이 성공적으로 끝나면 데이터베이스가 새로운 일관성 상태를 가지기 위해 변경된 모든 내용을 데이터베이스에 반영하는 명령어

COMMIT 명령을 실행하지 않아도 성공적으로 완료되면 자동으로 COMMIT됨
DML이 실패하면 자동으로 ROLLBACK이 되도록 Auto Commit 기능 설정 가능

ROLLBACK

아직 COMMIT되지 않은 변경된 모든 내용 취소하고 이전 상태로 되돌리는 명령어

트랜잭션 전체가 성공적으로 끝나지 못하면 일부 변경된 내용만 반영되는 비일관성인 상태 발생
일부분만 완료된 트랜잭션은 롤백해야 함
이미 완료된 COMMIT 전으로는 롤백 안됨

SAVEPOINT

ROLLBACK할 위치(저장점) 지정하는 명령어

이름을 부여하여 저장점 지정
ROLLBACK 시 지정된 저장점까지의 트랜잭션 처리 내용 취소됨

3-3 080 DDL [A]

Fri, 10 May 2024 13:09:55 GMT

DDL

DB 구조, 데이터 형식, 접근 방식 등 DB를 구축하거나 수정할 목적으로 사용

번역한 결과가 데이터 사전(Data Dictionary)에 여러 개의 테이블로서 저장됨

CREATE

CREATE SCHEMA
CREATE DOMAIN
CREATE TABLE
CREATE VIEW
CREATE INDEX

ALTER TABLE

DROP

CASCADE 제거하거나 변경할 요소를 참조하는 다른 모든 개체 함께 작업함 RESTRICT 참조중일 때는 제거 취소

3-2 073 파티션 설계 [B]

Fri, 10 May 2024 13:01:51 GMT

파티션의 종류

범위 분할

Range Partitioning

지정한 열의 값을 기준으로 분할 ex) 일별, 월별, 분기별

해시 분할

Hash Partitioning

해시 함수를 적용한 결과 값에 따라 데이터 분할
특정 파티션에 데이터가 집중되는 범위 분할의 단점 보완
데이터를 고르게 분산할 때 유용
특정 데이터가 어디에 있는지 판단할 수 없음
고객번호, 주민번호 등과 같이 데이터가 고른 컬럼에 효과적

조합 분할

Composite Partitioning

범위 분할로 분할한 다음 해시 함수를 적용하여 다시 분할
범위 분할한 파티션이 너무 커서 관리가 어려울 때 유용

목록 분할

지정한 열 값에 대한 목록을 기준으로 분할 ex) '국가'라는 열에 '한국', '미국', '일본'이 있는 경우 '미국'을 제외할 목적으로 '아시아'라는 목록을 만들어 분할

라운드 로빈 분할

레코드를 균일하게 분배하는 방식
각 레코드가 순차적으로 분배됨
기본키가 필요없음