티포의개발일지

회사에서 사용자들 수에 대한 제한을 두어서 중복 로그인 방지를 구현하게 되었다.

쿠키는 브라우저에만 남기에 중복 로그인을 쿠키로만으로는 구현할 수 없다.

세션은 데이터베이스에 저장이 되기 때문에 많은 정보를 담으면 서버에 과부하가 올 수 있다. 때문에 길이가 긴 데이터들은 jwt를 이용하였고, 키 값인 아이디만 세션에 두고 로그인 중인 사용자가 있으면 중복 로그인을 방지하게끔 구현했다. 

1. 세션 관련 모듈을 설치한다.

$npm i express-session --save
$npm i express-mysql-session -- save

2. app.js에 다음과 같이 추가해준다.

 ... 
var session = require('express-session');
var MySQLStore = require('express-mysql-session')(session);

 ...

var option = {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PW,
    port: process.env.DB_PORT,
    database: process.env.DB_DATABASE,
    clearExpired: true,
    checkExpirationInterval: 10000,
    expiration: 10000
}

var sessionStore = new MySQLStore(option);

app.use(session({
  secret: process.env.secret,
  resave: false,
  saveUninitialized: true,
  store: sessionStore
  
}))

option 중 세션에 관한 내용을 살펴보면,

• clearExpired : 유효기간이 지난 세션을 삭제한다.
• checkExpirationInterval : 세션의 유효기간을 체크하는 시간을 설정한다.
• expiration : 세션의 유효기간을 설정한다.

3. 라우터에서의 사용법은 다음과 같다.

router.get("/", function (req, res, next) {
  
  req.session.uid = "uid" // 세션 생성
  delete req.session.uid // 세션 삭제
  
  res.send({success : true })
});

보통은 로그인을 한 정보를 쿠키에 담는다. 그 후에 로그인 정보가 쿠키에 있으면 별도의 로그인 화면 없이 바로 메인 화면으로 가게끔 편의성을 위해 구현해둔 경우도 있다.

먼저 우리는 로그인을 할 때 쿠키에 로그인 정보를 담기 이전에 세션에 이미 로그인 중인 데이터가 있는지 확인할 것이다.

그리고 데이터가 없으면 쿠키에 로그인 정보를 담고 로그인에 성공한다.

세션이 생기는 경로는 로그인밖에 없지만 세션이 삭제되어야하는 경우는 두 가지가 있다.

1. 로그아웃을 해서 세션을 삭제
2. 세션의 expiration 시간이 지나면 자동으로 삭제

이미 위에서 세션의 유효시간을 설정했기 때문에 두 번째의 경우는 설정이 따로 필요없다. 하지만 로그아웃 버튼을 클릭했을 때는 우리가 직접 쿼리로 삭제해주어야 한다.

그러기 위해 먼저 sequelize model에 sessions 파일을 추가해준다. sequelize에 대한 내용은 다음 포스트를 참고하자.

https://typo.tistory.com/entry/MySQL-CRUD-with-Reactjs-and-Nodejs-Back-End1?category=905676

sequelize/models/sessions.js 

module.exports = (sequelize, DataTypes) => {

    const Sessions = sequelize.define("Sessions", {
        session_id: {
            type: DataTypes.STRING,
            primaryKey: true,
        },
        expires: {
            type: DataTypes.STRING
        },
        data: {
            type: DataTypes.STRING
        },
    }, {
        charset: "utf8", // 한국어 설정
        collate: "utf8_general_ci", // 한국어 설정
        tableName: "sessions", // 테이블 이름
        timestamps: false, // createAt & updateAt 활성화
    });
    return Sessions;
};

4. 로그인과 로그아웃을 구성해준다.

const { QueryTypes, sequelize } = require('sequelize');
const db = require('../sequelize/models');


router.get("/login", function (req, res, next) {

	// 로그인 정보가 있는지 확인 
    
    	...
        
	// 세션이 존재하는지 확인
    const select_data_query = `SELECT JSON_EXTRACT(data, '$.uid') as uid FROM SESSIONS WHERE JSON_EXTRACT(data, '$.uid') = :uid`

          db.sequelize.query(
            select_data_query,
            {
              replacements: { uid: "teepo" },
              type: QueryTypes.SELECT
            }
          ).then((result) => {
            // 세션이 존재하지 않을 경우
            if(result.length === 0) {
            
                // 세션 생성
                req.session.uid = "teepo"
                
                // jwt 토큰 사용자면 jwt 토큰 생성
                
                // 쿠키 생성
                res.cookie('isLogined', {"uid": "teepo"}, { maxAge: 86400000, path: "/", httpOnly: true });
                
                res.send({success : true})
            }
            // 세션이 존재할 경우
            else {
            	return res.send({success : false, result : "이미 접속중인 사용자입니다."})
                }
          })
});

router.get("/logout", function (req, res, next) {
  
  // 세션에 존재하는 uid 데이터와 일치하는 데이터 삭제
  const delete_data_query = `DELETE FROM SESSIONS WHERE JSON_EXTRACT(data, '$.uid') = :uid`

  db.sequelize.query(
    delete_data_query,
    {
      replacements: { uid: req.session.uid },
      type: QueryTypes.DELETE
    }
  ).then((result) => {

    // 세션 삭제
    delete req.session.uid;

    // 쿠키 삭제
    res.clearCookie('isLogined');

    res.send({ success: true }); // 클라이언트에 결과 반환

  }).catch((err) => {
    console.log(err)
  })
});

다음과 같이 환경설정을 해주자.

MariaDB [(none)]> set global interactive_timeout = 180;
MariaDB [(none)]> set global wait_timeout = 180;
MariaDB [(none)]> set global max_connections = 2000;

- DB 설정 JSON

var db_info = {
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PW,
    port: process.env.DB_PORT,
    database: process.env.DB_DATABASE,
    connectionLimit: 300
}

- connection.query 함수를 쓸 경우 

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

var mysql = require('mysql');
var { db_info } = require('../config/database');
const connection = mysql.createConnection(db_info);

MariaDB timeout 설정

설정 : mysql에서 아래 내용을 입력해준다. ( 최대값 설정 )

set global connect_timeout = 100
set session wait_timeout = 2147483

set session interactive_timeout = 31536000;

설정값 확인

show variables like '%timeout%';
show global variables like '%timeout%';

전 포스트까지 Create, Find api를 만들었다. 이번엔 마지막으로 수정과 삭제를 구현해보겠다.

1. Update 라우터를 만들어준다.

routes/index.js

...

router.patch('/update', async (req, res, next) => {
    const query = req.query; // 클라이언트에서 보낸 query
    const where = JSON.parse(query.where); // 수정할 튜플 검색 (ex. {"name" : "teepo"})
    const content = JSON.parse(query.content); // 수정할 내용 (ex. {"email" : "teepo3@co.kr"})

    Users.update(content, { where }) // 검색 조건이 있을 경우 조건에 맞게 데이터를 수정한다.
        .then((result) => {
            console.log("수정 성공: ", result);
            return res.send({ success: true });
        })
        .catch((err) => {
            console.log("수정 Error: ", err);
            return res.send({ success: false });
        });
});

...

2. postman으로 확인해본다. ( email이 teepo@co.kr 인 튜플의 email을 teepo3@co.kr로 바꾸어본다. )

3. HeidiSQL로 확인해본다.

이메일이 정상적으로 바뀌었다.

4. Delete 라우터를 만든다.

routes/index.js

...

router.delete('/delete', async (req, res, next) => {
    const query = req.query; // 클라이언트에서 보낸 query
    Users.destroy({ where: query }) // 검색 조건이 있을 경우 조건에 맞게 데이터를 삭제한다.
        .then((result) => {
            console.log("삭제 성공: ", result);
            return res.send({ success: true });
        })
        .catch((err) => {
            console.log("삭제 Error: ", err);
            return res.send({ success: false });
        });
});

...

5. postman으로 확인해본다. ( email이 teepo2@co.kr 인 튜플을 삭제한다. )

6. HeidiSQL로 확인해본다.

여기까지 우리는 NodeJS 백엔드로 Sequelize를 사용한 CRUD API를 구현해보았다.

전 포스트에서 클라이언트에서 쓰일 Create API를 만들었다. 

이번엔 나머지 findALL과 find메소드를 사용해서 전체조회, name에 따른 내용 조회를 구현해보겠다.

1. 이름은 같지만 나머지 내용이 다른 튜플을 하나 더 생성해준다.

이제 이름이 teepo인 튜플 2개가 생성되었다.

2. 전체조회, 튜플 한 개 조회 라우터를 추가로 만들어준다.

routes/index.js

const express = require('express');
const router = express.Router();
const { Users } = require('../sequelize/models');

// 유저 생성 api
router.post('/create', async (req, res, next) => {
    const userbody = req.body; // 클라이언트로 부터 생성할 user 정보를 받는다.
    Users.create({
        email: userbody.email,
        password: userbody.password,
        name: userbody.name,
        phone: userbody.phone
    })
        .then((result) => {
            console.log("저장 성공: ", result);
            return res.send({ success: true, result });
        })
        .catch((err) => {
            console.log("저장 Error: ", err);
            return res.send({ success: false });
        });
});

// 유저 전체 조회 api
router.get('/findall', async (req, res, next) => {
    const query = req.query; // 클라이언트에서 보낸 query
    Users.findAll({ where: query }) // 검색 조건이 있을 경우 조건에 맞게 조회한다.
        .then((result) => {
            console.log("전체조회 성공: ", result);
            return res.send({ success: true, result });
        })
        .catch((err) => {
            console.log("전체조회 Error: ", err);
            return res.send({ success: false });
        });
});

// 유저 한 개 조회 api
router.get('/findone', async (req, res, next) => {
    const query = req.query; // 클라이언트에서 보낸 query
    Users.findOne({ where: query }) // 검색 조건이 있을 경우 조건에 맞게 제일 오래된 데이터를 조회한다.
        .then((result) => {
            console.log("조회 성공: ", result);
            return res.send({ success: true, result });
        })
        .catch((err) => {
            console.log("조회 Error: ", err);
            return res.send({ success: false });
        });
});


module.exports = router;

2-1. findall api로 먼저 조건없이 전체조회를 해본다.

2-2. findall api로 name이 teepo인 조건으로 조회한다.

2-3. findall api로 email이 teepo@co.kr인 조건으로 조회한다.

2-4. findone api로 조건없이 전체조회를 해본다.

2-5. findone api로 name이 teepo인 조건으로 조회한다.

2-6. findone api로 email이 teepo@co.kr인 조건으로 조회한다.

결과를 보면 알 수 있듯이 findAll 메소드로 검색을 하면 배열 안에 담기는 것을 볼 수 있고,

findOne 메소드로 검색을 하면 json형태로 한 개의 데이터만 담기는 것을 볼 수 있다.

전 포스트에서 만든 Users 모델을 이용해서 클라이언트에서 사용할 API를 구성해보자.

1. 먼저 클라이언트에서 전송한 json 파일을 읽기 위해 express json을 추가하고 루트 라우터 경로를 설정해준다.

server/index.js

const express = require('express'); //express를 설치했기 때문에 가져올 수 있다.
const { sequelize } = require('./sequelize/models');

const app = express();
app.use(express.urlencoded({extended:false}));
app.use(express.json());

sequelize.sync({ force: false })
.then(() => {
    console.log('데이터베이스 연결 성공');
})
.catch((err) => {
    console.error(err);
});

// index router
app.use('/', require('./routes'));


app.listen(3001);

2. 설정해준 것과 같이 routes 폴더를 만들고 index.js 파일을 만들어준다.

server/routes/index.js

const express = require('express');
const router = express.Router();
const { Users } = require('../sequelize/models');

router.post('/create', async (req, res, next) => {
    const userbody = req.body; // 클라이언트로 부터 생성할 user 정보를 받는다.
    Users.create({
        email: userbody.email,
        password: userbody.password,
        name: userbody.name,
        phone: userbody.phone
    })
    .then((result) => {
        console.log("저장 성공: ", result);
        return res.send({ success: true, result });
    })
    .catch((err) => {
        console.log("저장 Error: ", err);
        return res.send({ success: false });
    });
})


module.exports = router;

클라이언트로부터 데이터를 생성할 유저의 데이터를 받고 성공하면 클라이언트에 결과값을 반환하도록 하였다.

3. postman으로 데이터가 잘 생성되는지 확인해보자.

4. 콘솔에서 결과값을 확인해보자.

5. 성공적으로 튜플이 생성되었다. 이번엔 HeIdiSQL로 확인해보자.

입력한 값이 정상적으로 DB에 추가된 것을 확인할 수 있다.

Server.js

먼저 백엔드 서버를 express로 실행하기위해 설치해준다.

$ npm install express

그다음 package.json에 스크립트 서버를 실행하는 명령어를 추가해준다.

server/package.json

{
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

이제 index.js 파일을 만들고 다음과 같이 작성해보자.

index.js

const express = require('express'); //express를 설치했기 때문에 가져올 수 있다.
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
})

app.listen(3001);

npm run start 명령어로 서버가 잘 돌아가는지 3001번 포트에서 확인해본다.

$ npm run start

Sequelize

백엔드 API를 구현한 다음 테스트해보자.

1. server폴더 안에 sequelize 폴더를 만들고 Node.js 의 MySQL 관리 모듈인 Sequelize 을 설치한다.

$ npm i sequelize mysql2
$ npm i -g sequelize-cli
$ sequelize init

그럼 이렇게 폴더들이 생긴 것을 확인할 수 있다.

2. config.json 파일에 사용할 데이터베이스를 설정해준다.

sequelize/config/config.json

{
  "development": {
    "username": "teepo2",
    "password": "test1234",
    "database": "example", 
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  ...

migrations 파일
데이터 베이스 스키마의 버전을 관리하기위한 하나의 방법. 개별 SQL 파일을 MySQL 콘솔 등에서 직접
실행하지 않고 프레임워크의 특정 명령어를 통해 실행하고 결과를 별도의 테이블에 버전 관리하는 기법

seeder 파일
서버를 실행하거나 콘솔 창 명령어를 실행했을 때 sequelize를 통해 DB에 데이터를 생성할 때 사용

3. models 파일 안에 Users 모델을 만들어보자.

models/Users.js

module.exports = (sequelize, DataTypes) => {

    const Users = sequelize.define("Users", {
      id: {
        type: DataTypes.UUID,
        defaultValue: DataTypes.UUIDV4,
        primaryKey: true,
        comment: "고유번호 UUID",
      },
      email: {
        type: DataTypes.STRING(100),
        validate: {
          isEmail: true,
        },
        comment: "이메일",
      },
      password: {
        type: DataTypes.STRING(60),
        comment: "비밀번호",
      },
      name: {
        type: DataTypes.STRING(100),
        comment: "이름",
      },
      phone: {
        type: DataTypes.STRING(72),
        comment: "전화번호",
      },
    }, {
      charset: "utf8", // 한국어 설정
      collate: "utf8_general_ci", // 한국어 설정
      tableName: "Users", // 테이블 이름
      timestamps: true, // createAt & updateAt 활성화
      paranoid: true, // timestamps 가 활성화 되어야 사용 가능 > deleteAt 옵션 on
    });
  
    return Users;
  };

4. 서버 파일에 sequelize를 추가해준다.

server/index.js

const express = require('express'); //express를 설치했기 때문에 가져올 수 있다.
const { sequelize } = require('./sequelize/models')
const app = express();

sequelize.sync({ force: false })
.then(() => {
    console.log('데이터베이스 연결 성공');
})
.catch((err) => {
    console.error(err);
});

app.get('/', (req, res) => {
    res.send('Hello World!');
})

app.listen(3001);

5. 다시 npm run start를 실행해보면 성공적으로 DB가 연결된 것을 확인할 수 있다.

HeidiSQL 에서도 Users 테이블이 만들어진 것을 확인할 수 있다.

NoSQL인 MongoDB 같은 경우는 Robo 3T로 데이터베이스에 직접 접속해서 보다 편리하게 관리를 할 수 있었다.

MySQL에서는 HediSQL이라는 SQL 데이터베이스 관리 프로그램이 있다. 사용법을 차근차근 알아보자.

먼저 아래 사이트에서 HeidiSQL 프로그램을 설치한다.

https://www.heidisql.com/download.php?download=installer 

신규 버튼을 누른다.

전 포스트에서 생성한 DB의 내용으로 설정해준다.

그 다음 열기버튼을 클릭하면 아래와 같이 관리할 수 있는 화면과 이전에 생성한 example 데이터베이스를 볼 수 있다.

이제 CLI환경이 아닌 GUI 환경에서 보다 쉽게 데이터베이스를 관리할 수 있게 되었다.

이번 포스트부터는 백엔드에 Node.js(Sequelize)를 사용해서 간단하게 CRUD 하는 것을 구현해보겠다.

먼저 Node.js 환경구성을 해준다.

https://typo.tistory.com/entry/%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B11-node-%EC%84%A4%EC%B9%98?category=901285 

MySQL 설치

이제 MySQL을 설치해보자.

$ sudo apt install -y mysql-server

설치가 완료되면 MySQL 서버를 초기화한다.

$ sudo mysql_secure_installation

충분히 강한 패스워드를 생성할 수 있는 플러그인을 활성화 할건지 물어보는 내용으로, 엔터키로 넘어간다.

사용할 패스워드를 2번 입력한다.

익명의 사용자를 제거하는지 묻는 내용으로, y를 입력한다.

최고 관리자 권한으로 외부 로그인을 허용하지 않을 것인지 묻는 내용으로 y를 입력한다.

test 데이터베이스를 삭제할지 묻는 내용으로 y를 입력해서 삭제한다.

마지막으로 privileges table을 다시 로드할지 묻는 내용으로 y를 입력해서 다시 로드한다.

그리고 아래 명령어로 MySQL 데몬을 다시 실행한다.

$ sudo /etc/init.d/mysql restart

MySQL 설정

1. 아래 명령어를 입력해서 MySQL 서버에 접속하고 설정한 패스워드를 입력해서 로그인한다.

$ sudo mysql -u root -p

2. 데이터베이스 사용자를 생성한다. ( 사용자명 : teepo, 패스워드 : test1234 )

mysql> CREATE USER 'teepo'@'localhost' IDENTIFIED BY 'test1234';

3. 데이터베이스를 생성한다. ( db이름 : example )

mysql> create database example;

4. 방금 생성한 사용자에게 example DB에 대한 권한을 부여한다.

mysql> grant all privileges on example.* to 'teepo'@'localhost';

5. 마지막으로 flush privileges를 입력한다.

mysql> flush privileges;

6. 설정을 끝냈으면 MySQL 접속을 종료한다.

mysql> exit;

MySQL 외부 접속 허용

외부 접속을 허용하기 위해 먼저 외부에서 접속할 수 있는 계정을 생성해야 한다.

위에서 이미 생성한 사용자같은 경우는 localhost의 사용 가능 영역을 가지기 때문에 외부에서의 접근은

불가능하다. 때문에 특정 IP 또는 % 기호를 입력하여 외부 접속이 가능하게끔 해준다.

1. 외부 접속이 가능한 teepo2를 만들어보자.

mysql> CREATE USER 'teepo2'@'%' IDENTIFIED BY 'test1234';
mysql> grant all privileges on example.* to 'teepo2'@'%';
mysql> flush privileges;

2. 그 다음 /etc/mysql/mysql.conf.d/mysqld.cnf 파일의 [mysqld] 영역에서 bind-address 부분을 아래와 같이 주석 처리 한다.

3. 아래 명령어로 MYSQL 서버 데몬을 재실행한다.

$ sudo /etc/init.d/mysql restart