React - Node JS와 로그인 연동 해보기02(서버 추가 설정)

이전글 정보 ↓

https://myhappyman.tistory.com/301

이번 글에선 NodeJS가 로그인, 로그아웃에 대한 세션 처리를 동작 할 수 있도록 서버에 관한 설정을 한다.

2가지 파일 작성(/api/login.js, db/mysql_pool.js)

 

🗂️ Mysql Pool moduel 작성(DB 연결)

📄/db/mysql_pool.js

const mysql = require("mysql2/promise");

// require("dotenv").config(); // -> 환경변수 사용시 추가

const config = {
    host: process.env.host,
    user: process.env.user,
    password: process.env.password,
    database: process.env.database,
};

//mysql connection pool 생성
let pool = mysql.createPool(config);

/**
 * 1. 생성한 커넥션 풀을 통해 비동기로 쿼리를 던짐
 * 2. 응답이 오면 리소스 제거
 * 3. 조회된 결과값 리턴
 * @param {*} query
 * @returns array || boolean
 */
async function getConnection(query) {
    try {
        const connect = await pool.getConnection(async (conn) => conn);
        try {
            const [rows] = await connect.query(query);
            connect.release();
            return rows;
        } catch (err) {
            console.log("Error", err);
            connect.release();
            return false;
        }
    } catch (err) {
        console.log("DB Error");
        return false;
    }
}

module.exports = getConnection;

config부분에 각자 환경에 맞는 mysql정보를 넣는다.
 

환경변수를 사용하는경우

환경변수로 config를 채우는 경우 dotenv를 설치하고 아래 메소드를 mysql_pool.js에 추가합니다.

$ npm install dotenv

require("dotenv").config();
 

동작 구성

• mysql2의 promise를 활용하여 커넥션 풀을 생성
• getConnection 메소드에 쿼리를 던져서 비동기로 결과값을 받는다.
• release()를 통해 pool을 반납한다.

 

📥 Api통신 모듈 작성

login에 관한 동작을 처리할 모듈을 작성한다.

시작하기전 필요한 모듈을 설치한다.

$ npm install express-session memorystore body-parser

• express-session: express에서 제공하는 세션 관리 매니저
• memorystore: 세션을 메모리에 저장하기 위해 같이 사용
• body-parser: body로 전달받은 request데이터를 json으로 처리하기 위해 사용
   

📄/api/login.js

const getConnection = require("../db/mysql_pool");

exports.findOneUser = (userId) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}"`;
    return getConnection(sql);
};

exports.findLoginUser = (userId, userPw) => {
    const sql = `select * from shin_games_user_table
    where user_id="${userId}" and user_pw="${userPw}"`;
    return getConnection(sql);
};

exports.Login = (req, res) => {
    const { userId, userPw } = req.body;
    this.findLoginUser(userId, userPw).then((result) => {
        if (result === false) {
            res.json({ msg: "fail" });
        } else {
            if (result.length > 0) {
                req.session.userId = result[0].user_id;
                res.json({ msg: "success" });
            } else {
                res.json({ msg: "fail" });
            }
        }
    });
};

exports.Logout = (req, res) => {
    let code = 200;
    if (req.session.userId) {
        req.session.destroy();
        res.json({ msg: "success", code });
    } else {
        res.json({ msg: "fail", msg: "권한이 없습니다.", code });
    }
};

exports.getUserInfo = (req, res) => {
    if (req.session.userId) {
        this.findOneUser(req.session.userId).then((result) => {
            if (!result) {
                res.json({ msg: "fail", code: 200 });
            } else {
                res.json({
                    data: result[0],
                    msg: "success",
                    code: 200,
                });
            }
        });
    } else {
        res.json({ msg: "fail" });
    }
};

api 모듈 작성이 완료되면 연결한다.

 

🔧 서버 모듈 적용하기

설치한 라이브러리 적용과 설정, 모듈을 적용한다.
 

📄index.js

const express = require("express");
const session = require("express-session");
const MemoryStore = require("memorystore")(session);
const bodyParser = require("body-parser");

const app = express();
const port = process.env.PORT || 3001;

app.listen(port, function () {
    console.log(`server running on ${port}`);
});

const sessionTime = 1000 * 60 * 30; // 30분
const sessionObj = {
    secret: "shin",
    resave: false,
    saveUninitialized: true,
    store: new MemoryStore({ checkPeriod: sessionTime }),
    cookie: {
        maxAge: sessionTime,
    },
};
app.use(session(sessionObj));
app.use(bodyParser.json());

// rest api callback module
const LoginApi = require("./api/login");

// 로그인 체크용
app.use("/login/login", LoginApi.Login);
// 로그아웃
app.use("/login/logout", LoginApi.Logout);
// 유저정보 조회
app.use("/login/getUserInfo", LoginApi.getUserInfo);

세션에 대한 설정처리와 rest api시 받은 데이터의 파싱을 위해 body-parser를 적용했다.
이후 각 rest api별 동작해야 할 모듈을 적용으로 서버에 대한 설정을 마친다.
이제 클라이언트단 작성을 하면 된다.