[node.js] express-session, mySQL 로그인 기능 구현

0. 목차

1. 개요

2. mySQL

3. 기본셋팅 / 파일 쪼개기

4. 기능개발

5.후기

1. 개요

mySQL 안한지 너무 오래됐다.

까먹을거 로그인기능 mySQL 이용해서 만들거다.

회원가입기능은 다음에..

2. mySQL

데이터 베이스에 

요렇게 데이터 입력 해놨다.

 

이거 입력하는건

2022.02.03 - [경일/DATABASE] - [mySQL] mySQL 기본 사용법, CRUD(Create, Read, Update, Delete)

[mySQL] mySQL 기본 사용법, CRUD(Create, Read, Update, Delete)

여기있지롱

3. 기본셋팅 / 파일 쪼개기

설치해야될 라이브러리가 이제 슬슬 갯수가 늘어나기 시작한다.

express,

nunjucks,

express-session,

memorystore,

mysql

 

곤란하다.. ㅎ

 

const express = require('express');
const nunjucks = require('nunjucks');
const session = require('express-session');
const MemoryStore = require('memorystore')(session);
const mysql = require('mysql');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'Hun71033498!',
  database: 'board',
});

const sessionObj = {
  secret: 'kong',
  resave: false,
  saveUninitialized: true,
  stroe: new MemoryStore({ checkPeriod: 1000 * 60 * 10 }),
  cookie: {
    maxAge: 1000 * 60 * 10,
  },
};

const app = express();

app.set('view engine', 'html');
nunjucks.configure('views', { express: app });

app.use(session(sessionObj));

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

app.listen(3000);

이제 셋팅만 해도 제법 뭔가 할게 많은 느낌이다...

 

파일 다쪼갰다.

4. 기능개발

이제 기능개발 해보자

4-0. my sql 모듈화 해서 사용하기

처음부터 막혔다.

exports.loginGetMid = (req, res) => {
  console.log(db);
  res.render('user/login.html');
};

exports.loginPostMid = (req, res) => {
  res.rendirect('/');
};

exports.profileGetMid = (req, res) => {
  res.render('user/profile.html');
};

exports.logoutGetMid = (req, res) => {
  res.rendirect('/');
};

 

user.controller.js 파일이다.

만들어둔 함수(미들웨어로 사용됨)들 안에서 

데이터베이스 조작을 위해 

server.js 에 셋팅해놓은

db를 사용해야되는데,

db를 못찾는다.

이유는 당연하게도 user.controller.js 파일 에는

db 가 없으니까.

이 파일에다가, 

 

const mysql = require('mysql');

const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'Hun71033498!',
  database: 'board',
});

db.connect((error, result) => {
  if (error) console.log(error);
});

server.js 파일에다가 해놓은 mySQL 셋팅을 

user.controller.js 파일에 옮기면 되는거 아닌가?

 

응 아님

 

지금은 한가지의 기능만 개발하는 중이라 그렇게 해도 상관없는것 같지만,

나중에 board 도 만들고,

뭐.. 또 다른 기능도 만들고 하려면,

모든 ~.controller.js  파일에 저걸 갖다 붙여야 되는 상황이 발생한다.

 

개발자 특) 같은 코드 반복되는 꼬라지 못봄.

 

같은 코드가 반복되는게 보기 싫을때 사용하던 방법이 있다.

모듈화.

저 코드를 db 라는 디렉토리 안에 db.js 라는 파일을 만들어서,

저 코드를 집어 넣을거다.

 

위에서 내가 파일을 쪼개는 방식이 MVC 라는 패턴인데,

 

MVC 패턴을 사용하면 필연적으로 발생하는 문제이고,

(사실 다른 모든 디자인패턴 도 마찬가지일듯)

 

MVC 패턴에서 이런 문제를 해결하기 위해

내가 위에서 설명한 방법을 쓴다고 한다.

 

왼쪽부터 차례대로 디렉토리 구성, user.controller.js, db.js 이다.

 

재밌다 재밌어 하핳..

4-1. login post

이제 진짜 시작하자. ㅎ

exports.loginPostMid = (req, res) => {
  const { id, pw } = req.body;
  db.query(`SELECT * FROM user WHERE id="${id}"`, (error, result) => {
    if (error) return console.log(error);

    if (result.length) {
      console.log(result);
      if (result[0].pw === pw) {
        console.log('login 성공');
      } else {
        console.log('login 실패');
      }
      res.redirect('/');
    } else {
      console.log('login 실패');
      res.redirect('/');
    }
  });
};

 

와.. 뭔데 이렇게 어렵지..;;

하나하나 코드 읽어보면,

입력된 id 와, pw 는 request 의 body 에 들어있을거다.

그럼 우선 db 에서 id를 찾아야 한다.

왜냐하면 id는 중복 되지 않기때문에

우선 id 로 검색한다.

 

그리고 일치하는 데이터가 없으면,

로그인 실패를 출력하고, redirect 된다.

 

일치하는 데이터가 있다면,

이번에는 pw 를 비교한다.

데이터의 pw 와 pw 일치한다면,

로그인 성공을 출력하고, redirect 된다.

일치하지 않는다면,

로그인 실패를 출력하고, redirect 된다.

 

이걸 alert 로띄워줄거다.

alertMove 함수 만들어서,

utill 파일에서 관리해주자.

 

const alertMove = (path, msg) => {
  return `<script>
    alert('${msg}')
    location.href  = "${path}"
    </script>`;
};

module.exports = { alertMove };

 

 

exports.loginPostMid = (req, res) => {
  const { id, pw } = req.body;
  db.query(`SELECT * FROM user WHERE id="${id}"`, (error, result) => {
    if (error) return console.log(error);

    if (result.length) {
      console.log(result);
      if (result[0].pw === pw) {
        res.redirect('/');
      } else {
        res.send(alertMove('/', '비밀번호가 일치하지 않습니다'));
      }
    } else {
      res.send(alertMove('/', '등록되지 않은 id 입니다'));
    }
  });
};

 

아이디부터 일치하지 않으면 등록되지 않은 id 입니다라는 알림창이 뜨고

아이디는 일치하지만 비밀번호가 일치하지 않으면, 비밀번호가 일치하지 않습니다 라는 문구가 뜬다.

 

끝이아니다.

저 정보들을 session 에 넣어줘야한다!

        req.session.user = result[0];

로그인이 성공했을때 처리되는 코드에 위에 코드 한줄만 입력해주면 세션에 잘 안착한다!

4-2. / GET

로그인이 됐을 때 화면 구성 바꿔주자.

이건 이제 쉽다 쉬워.

 

router.get('/', (req, res) => {
  const { user } = req.session;
  res.render('index.html', { user });
});

 

4-3. profile GET /  logout GET

exports.profileGetMid = (req, res) => {
  const { user } = req.session;
  res.render('user/profile.html', { user });
};

exports.logoutGetMid = (req, res) => {
  req.session.destroy(() => {
    req.session;
  });
  res.send(alertMove('/', '로그아웃이 되었습니다'));
};

 

프로필 과 로그아웃을 쉬우니까.

뚝-딱

해주고 얘네는 로그인이 안되어있을 때는 접속이 안되게 막아야 하기때문에,

 

 

요렇게 해주면 완성!

5. 후기

후우 오랜만에 db를 만지니까 엄청 버벅거렸다.

그리고 다만들고 나니까 생각난건데

로그인 할때, 입력된 아이디와 id 디비에 있는id 가 일치하는 데이터를 db에서 가져오고

가져온 데이터의 비밀번호와 입력된 비밀번호를 비교했는데,

처음부터 where col='val' and col='val'로 가져오면 좀더 만들긴 편하긴 했을듯하다.

 

근데, 다시 생각해보니까

사용자 입장에선 내가 구현한게 더 편할지도 모르겠다는 생각이든다.

내가 만든건 id가 일치하지 않으면 '등록되지 않은 id 입니다.' 라는 문구가뜨고

id는 일치하지만, 비밀번호가 일치하지 않으면, '잘못된 비밀번호입니다' 라는 문구가뜬다.

그러므로 사용자는 자신이 뭘 잘못입력했는지 쉽게 알수가있다.

 

반면, where 에 조건을 두개 걸어서 한번에 확인을하면,

잘못된 정보를 입력했을때, id가 틀렸건, pw 가 틀렸건 똑같은 문구만 보여주게 될것이다.

 

흠.

생각이 짧아서 만들어진 실수라고 생각했는데,

다시 생각해보니 오히려 좋아..?

 

다음엔 여기다가 게시판을 붙여봐야지