Nodejs/ [NodeJs] MVC 모델을 활용한 간단한 로그인 기능 구현
2023-05-22 21:06:41

회원 가입 및 로그인 기능 구현해보기

MVC 디자인 패턴에서 각각의 의미에 대해 생각해보고 용도에 맞게 사용하는 법을 익히기 위해 로그인과 회원가입에 대한 기능을 간단하게 구현해 보았습니다. get, post 메소드에 대하여 이해하고 활용하는데 중점을 두고 실습하였습니다.

기본 베이스는 https://dbdj.tistory.com/36 여기에 있는 코드에 로그인과 회원가입 부분만 추가하여 기능을 구현합니다.

 

controllers/controller.js

const { userAll, userSelect, userSignUp } = require("../models");

exports.mainpage = async (req, res) => {
  try {
    const result = await userAll();
    console.log(result);
    res.render("main", { result });
  } catch (error) {
    console.error(err);
  }
};

// 회원가입은 간단하게 아이디와 패스워드만 받아서 진행
exports.signUp = async (req, res) => {
  try {
    // post으로 넘어온 user_id, user_pw를 req.body에서 구조분해하여 사용
    const { user_id, user_pw } = req.body;
    if (user_id == null) {
      console.log("아이디를 입력해주세요.");
    }
    if (user_pw == null) {
      console.log("패스워드를 입력해주세요.");
    }
    // user_id가 있는지 user_id를 데이터베이스에서 조회
    const data = await userSelect(user_id);
    // console.log(data);
    if (data?.user_id) {
      console.log("중복된 아이디가 있습니다.");
    } else {
      // 중복된 아이디가 없으면 회원가입
      await userSignUp(user_id, user_pw);
      res.redirect("/login");
    }
  } catch (error) {
    console.error(error);
  }
};

// 로그인 기능
exports.login = async (req, res) => {
  try {
    // post로 넘어온 user_id, user_pw를 req.body에서 구조분해
    const { user_id, user_pw } = req.body;
    if (user_id == null) {
      console.log("아이디를 입력해주세요.");
    }
    if (user_pw == null) {
      console.log("패스워드를 입력해주세요.");
    }
    // user_id가 있는지 조회
    const data = await userSelect(user_id);

    if (!data?.user_id) {
      console.log("없는 아이디가 입니다.");
    }

    if (data.user_id == user_id && data.user_pw == user_pw) {
      res.send("로그인 성공");
    }
  } catch (error) {
    console.error(error);
  }
};

 

models/model.js

const mysql = require("./config");

exports.init = async () => {
  try {
    await mysql.query("SELECT * FROM blog_users");
  } catch (error) {
    await mysql.query(
      "CREATE TABLE blog_users (id INT AUTO_INCREMENT, user_id VARCHAR(20), user_pw VARCHAR(200), PRIMARY KEY(id)); INSERT INTO blog_users (user_id, user_pw) VALUES ('test', 'test');INSERT INTO blog_users (user_id, user_pw) VALUES ('test2', 'test2');"
    );
  }
};

exports.userAll = async () => {
  try {
    const [data] = await mysql.query("SELECT * FROM blog_users;");
    return data;
  } catch (error) {
    console.error(error);
  }
};

// 특정 사용자가 있는지 조회
exports.userSelect = async (user_id) => {
  try {
    const [result] = await mysql.query(
      "SELECT * FROM blog_users WHERE user_id = ?",
      [user_id]
    );
    return result[0];
  } catch (error) {
    console.error(error);
  }
};

// 회원가입
exports.userSignUp = async (user_id, user_pw) => {
  try {
    await mysql.query(
      "INSERT INTO blog_users (user_id, user_pw) VALUES (?, ?);",
      [user_id, user_pw]
    );
  } catch (error) {
    console.error(error);
  }
};

 

models/index.js

// model.js에서 exports한 함수들을 구조분해하여 다시 내보냄
// 추후 여러 model을 쓰면 각 파일마다 exports하기 힘드니 model의 함수들을 한곳에 모아서 (index.js) 한번에 exports
const { init, userAll, userSelect, userSignUp } = require("./model");

init();

module.exports = { userAll, userSelect, userSignUp };

 

routers/route.js

const router = require("express").Router();
// controller에서 exports한 함수들을 가져옴
const { mainpage, signUp, login } = require("../controllers/controller");

router.get("/", mainpage);

// '/login'으로 get 요청이 오면 login page를 보여줌
router.get("/login", (req, res) => {
  res.render("login");
});

// '/signup'으로 get 요청이 오면 signup page를 보여줌
router.get("/signup", (req, res) => {
  res.render("signup");
});

// '/login'으로 post 요청이 들어오면 login 함수 실행
router.post("/login", login);
// '/signup'으로 post 요청이 들어오면 signUp 함수 실행
router.post("/signup", signUp);

module.exports = router;

 

pages/signup.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>signup page</h2>
    <form action="/signup" method="post">
      <label for="">id</label>
      <input type="text" name="user_id" />
      <label for="">password</label>
      <input type="text" name="user_pw" />
      <button>signup</button>
    </form>
  </body>
</html>

test3이라는 이름으로 회원가입
test3이 데이터베이스에 들어간 것을 볼 수 있다.

pages/login.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>login page</h2>
    <form action="/login" method="post">
      <label for="">id</label>
      <input type="text" name="user_id" />

      <label for="">password</label>
      <input type="text" name="user_pw" />

      <button>login</button>
    </form>
  </body>
</html>

test3으로 로그인 시도
로그인 성공

 

728x90

'Nodejs' 카테고리의 다른 글

[NodeJs] JWT 알아보기  (0) 2023.08.29
[NodeJs] bcrypt를 활용한 간단한 회원가입 만들기  (0) 2023.08.29
[NodeJs] MVC 디자인 패턴을 활용한 서버 만들기  (0) 2023.05.22
[NodeJs] MySQL에 연결 및 테이블 만들기  (0) 2023.05.01
[NodeJs] http, fs 내장 모듈을 활용한 html 불러오기  (0) 2023.05.01

티스토리툴바