[Express] MySQL로 깔끔한 로그인 인증 만들기

🚩소개

안녕하세요! 대학생 개발자 주이어입니다! 오늘은 node.js와 MySQL을 사용하여 "로그인 인증"을 만드는 법에 대해서 정리해보려고 합니다. 로그인 인증은 유저 회원가입 및 로그인이 필요한 웹사이트라면 무조건 사용되는 기술 중 하나인데요. 이 기능을 mysql2/promise 모듈을 사용하여 비동기 처리를 훨씬 깔끔하고 가독성 있게 만들어보려고 합니다.

---

✅ mysql2/promise란?

mysql2/promise는 기존 mysql2 라이브러리의 Promise 기반 API입니다.
기존 방식이 콜백 함수 위주였다면, 이 모듈은 async/await로 사용할 수 있어서 에러 처리, 가독성, 유지보수 측면에서 훨씬 편리하게 사용할 수 있습니다.

import mysql from "mysql2/promise";

위와 같이 라이브러리를 불러올 수 있습니다.(npm i mysql2로 라이브러리를 다운받아야 함)

const db = await mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "0000",
  database: "woostar",
});

 

promise를 사용할 때는 db에 연결하는 방식도 살짝 달랍니다. 왜냐하면 promise는 비동기 처리를 기반으로 사용되는 API이기 때문에 연결할 때도 await를 사용하여 연결해주어야 합니다. 

추가로 db.connect(기본 mysql 사용시 적었던 코드)는 따로 적어줄 필요가 없습니다. (await라서 연결될 때까지 자동으로 기다림)

---

🔎 query() vs execute()

본격적으로 로그인 인증을 구현하기 전에 mysql2라이브러리에 있는 query와 execute에 대해서 비교하고 알아야 할 필요가 있습니다.

매서드	사용 방식	보안성	성능	사용 시점
query()	일반 SQL 실행	SQL Injection에 취약	반혹 호출 시 매번 파싱	단순한 쿼리
execute()	준비된 SQL 실행	SQL Injection에 강함	처음 파싱 후 재사용 가능	바인딩 값이 있는 쿼리

위의 표를 통해 비교가 가능하지만 가장 중요한 점은 execute는 성능적으로 query보다 뛰어나며 보안면에서도 안정적이다.
(실제 실무에서는 주로 execute()를 사용한다.)

---

🔐 로그인 인증 흐름

1. 프론트엔드 요청

const clickButton = () => {
  axios.post("http://localhost:5000/login", {
    userId: inputData.userId,
    password: inputData.password,
  })
  .then((res) => {
    if (res.data.success) {
      nav("/Home");
    } else {
      window.alert("회원정보가 일치하지 않습니다.");
    }
  });
};

먼저 프론트엔드에서 POST 요청으로 로그인시 사용자가 입력한 정보를 보내도록 해줍니다. 
보내는 정보에는 userId와 password가 있으며, 서버에서 반환한 success 값을 통해 로그인 성공 여부를 확인하고 있습니다.

2. 서버 처리 (server.js)

app.post("/login", async (req, res) => {
  const { userId, password } = req.body;
  const user = await getUserDB(userId);

  if (!user) {
    res.json({ success: false });
  } else if (user.password === password) {
    res.json({ success: true });
  } else {
    res.json({ success: false });
  }
});

서버 파일에서는 위와 같이 만들어 주었습니다. /login 경로를 통해 정보를 주고 받으며, mysql2/promise를 사용하므로 async로 선언해 주었습니다.

getUserDB 함수는 밑에서 추가로 설명할 예정이지만, 간단하게 존재하는 ID인지 확인하는 함수입니다.

• 만약 받아온 user 데이터가 없다면 false
• 받아온 데이터의 비밀번호와 사용자가 입력한 비밀번호가 다르다면 false
• 비밀번호가 같다면 true

위와 같은 기준으로 로그인 검증이 이루어지고 있습니다.

3. DB 쿼리 함수 (userService.js)

import db from "./server.js";

export async function getUserDB(userId) {
  try {
    const [rows] = await db.execute(
      "SELECT * FROM user_info WHERE userId = ?",
      [userId]
    );
    if (rows.length > 0) {
      return rows[0];
    } else {
      return null;
    }
  } catch (err) {
    console.error(err);
    throw err;
  }
}

getUserDB 함수는 매개변수로 받은 id가 존재하는 id인지 확인해주는 함수입니다.

역시 mysql2/promise를 사용하므로 async로 함수를 선언해 주었습니다.

그 후 try/catch를 사용하여 오류 처리를 해주었으며, db.execute를 통해 준비된 쿼리문을 실행해주는 것을 알 수 있습니다.

 

마지막으로 실행한 결과에 user 정보가 있다면 반환을 해주고, 만약 없다면 null을 반화해주도록 만들었습니다.

---

😊  마무리

지금까지 mysql2/promise를 사용하여 로그인 검증을 보다 깔끔하게 구현하는 법에 대해서 정리해 보았습니다.
로그인 인증은 많이 사용되는 기능이므로 확실하게 이해하고 가셨으면 좋겠습니다!

 

필요하다면, JWT 토큰 발급이나 비밀번호 암호화와 같은 기능도 함께 적용하실 수 있고 아래 제 글을 참고하신다면 더 많은 도움이 되실 것 같습니다! 궁금한 부분이 있으시다면 댓글에 남겨주셔도 되고, 아래 디스코드 사이트로 들어와주셔도 됩니다!

다음 포스팅에선 유저 검색 기능 API를 구현하는 방법에 대해서 다뤄보도록 하겠습니다! 

지금까지 읽어주셔서 감사합니다!

 

[Node] bcrypt로 비밀번호 암호화하는 방법 (React 연동)

[Node] bcrypt로 비밀번호 암호화하는 방법 (React 연동)

비밀번호 암호화 글 읽으러 가기

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!