클라우드 19일차 : mini project

프로젝트 구상

https://docs.google.com/spreadsheets/d/1DrnQVktEg39XCzvxBLPiDZv9v_OoC1NaugQGgLiU538/edit?gid=0#gid=0

프로젝트 중 오류

서버를 나눴을 때 백엔드 서버와 프론트엔드 서버간의 세션 공유 안되는 문제

브라우저는 같은 포트인 프론트엔드 서버와만 연결, 백엔드 서버에서 세션을 사용하려면 프론트엔드 서버에서 request header나 body를 통해 백엔드 서버로 보내줘야 해결이 됐다

ejs

$(document).ready(function () {
                $('.createAccount').click(async function () {
                    const accountAlias = $('#account-alias').val();
                    const initialDeposit = $('#initial-deposit').val();
                    if (!accountAlias || !initialDeposit) {
                        alert('모든 정보를 입력해주세요');
                        return;
                    }
                    const response = await fetch('/amm/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            accountAlias,
                            initialDeposit
                        })
                    });

                    const data = await response.json();
                    if (response.ok) {
                        alert('계좌가 성공적으로 개설되었습니다.');
                        location.reload();
                    } else {
                        alert('계좌 개설에 실패했습니다.');
                    }
                });

같은 포트에 있는 프론트엔드 서버 /amm/create 라우터 경로로 요청

asset-management.js(Frontend)

// 자산관리 계좌 생성
router.post('/create', async function (req, res) {
    try {
        const response = await fetch('http://127.0.0.1:8000/amm/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ ...req.body, sessionUser: req.session.user })

        });
        const data = await response.json();
        if (response.ok) {
            res.status(201).send(data);
        } else {
            res.status(response.status).send(data);
        }
    } catch (error) {
        console.error(error);
    }
});

ejs의 요청을 받고 8000번 포트에 있는 백엔드 서버 /amm/create 라우터 경로로 body에 req.session.user 값을 가지고 이동

asset-management.js(Backend)

프론트엔드 서버의 요청을 받고 헤더의 req.session.user값을 이용해 DB에서 값을 받아온 후 쿼리문을 실행한 뒤 다시 프론트엔드 서버로 이동

//랜덤한 12자리 계좌번호 생성
function generateAccount(length = 12) {
    let accountNumber = '';
    for (let i = 0; i < length; i++) {
        accountNumber += Math.floor(Math.random() * 10).toString();
    }
    return accountNumber;
}

// 자산관리 계좌 생성
router.post('/create', async function (req, res) {
    const { mysqldb } = await setup();
    const sessionUser = req.body.sessionUser.userid; // sessionUser 객체에서 userid를 추출

    // user_id가 users 테이블에 존재하는지 확인
    const [userRows] = await mysqldb.promise().query('SELECT id FROM users WHERE userid = ?', [sessionUser]);
    if (userRows.length === 0) {
        return res.status(400).send({ message: '존재하지 않는 유저 ID' });
    }
    const userId = userRows[0].id;

    let accountNumber;
    let isUnique = false;

    // 중복되지 않은 계좌번호 생성
    while (!isUnique) {
        accountNumber = generateAccount(12);
        const [rows] = await mysqldb.promise().query('SELECT COUNT(*) as count FROM accounts WHERE account_number=?', [accountNumber]);
        if (rows[0].count === 0) {
            isUnique = true;
        }
    }

    // 중복되지 않은 계좌번호를 데이터베이스에 저장
    const sql = `INSERT INTO accounts (user_id, account_alias, account_number, account_balance) VALUES (?, ?, ?, ?)`;
    await mysqldb.promise().query(sql, [userId, req.body.accountAlias, accountNumber, req.body.initialDeposit]);

    res.status(201).send({ message: '계좌가 성공적으로 개설되었습니다.' });
});

그 후 프론트엔드 서버의 이 코드 부분이 실행되고 응답에 성공했으니 ejs로 이동

const data = await response.json();
        if (response.ok) {
            res.status(201).send(data);
        } else {
            res.status(response.status).send(data);
        }

그 후 ejs에서 이 코드 부분 실행, 응답에 성공했으니 계좌가 성공적으로 개설되었다는 alert창 뜸

const data = await response.json();
    if (response.ok) {
        alert('계좌가 성공적으로 개설되었습니다.');
        location.reload();
    } else {
        alert('계좌 개설에 실패했습니다.');
     }