Today I Learned

Parkboss·2023년 11월 2일

TIL

목록 보기

7/8

오늘 한일✅

계속 쭉쭉 프로젝트를 하고 있지만 진행 속도는 굉장히 느리다.
프로젝트를 하면서 메모장에 에러나 구현 방법을 적어놓는데 벨로그에는 업데이트 하지 않았닼ㅋㅋ 천천히 업데이트를 하겠다

그 전 TIL에서 회원가입, 로그인 구현 방법을 자세히 적지 않아서 차근차근 구현 방법을 먼저 기록에 남길 예정이다!

구현 방법✅

MYSQL 회원가입

1. 패키지 설치

npm i --save mysql express cors nodemon

2. 테이터 베이스 만들기

초반에는 db.connect()를 하지 않아 연결이 되지 않았다! 무조건 꼭 추가하시라

const express = require('express');
const path = require('path');
const PORT = process.env.PORT || 5000;
const app = express();
const cors = require('cors');

// MYSQL
const mysql = require('mysql');
// MYSQL
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '비밀번호',
  database: '데이터베이스이름',
});

// connetct를 추가해야 된다.
db.connect();

나는 useAuth 훅으로 따로 만들어 사용하였다.
초반에는 회원가입 진행 부분만 코드를 설정해두고 이메일 중복 검사 로직을 추가하였다.

// Sigup.jsx
 const submitSingupHandler = (event) => {
    event.preventDefault();

    // 이름 유효성 검사 확인
    if (!auth.checkNameValidation()) return;

    // 이메일, 비밀번호 유효성 검사 확인
    if (!auth.checkValidation()) return;

    // 비밀번호 일치여부 확인
    if (!auth.checkValidationForSignUp()) return;

    axios
      .post('http://localhost:5000/signup', {
        Email: auth.email,
        UserName: auth.userName,
        Password: auth.password,
      })
      .then((res) => {
        if (res.data.message.includes('user-added')) {
          alert('회원가입을 성공하였습니다.');
          navigate('/Login');
        } else if (res.data.message.includes('already-in-use')) {
          alert('이미 가입된 계정입니다.');
          auth.setUserName('');
          auth.setEmail('');
          auth.setPassword('');
          auth.setConfirmPassword('');
        }
      });
  };

// server.js

// MYSQL 회원가입 및 이메일 중복 검사
app.post('/signup', (req, res) => {
  const sentEmail = req.body.Email;
  const sentUserName = req.body.UserName;
  const sentPassword = req.body.Password;

  // sql문을 쿼리로 실행

  // 먼저 이메일 중복 검사 실행
  db.query(
    'SELECT COUNT(*) as count FROM users WHERE email = ?',
    [sentEmail],
    (err, rows, fields) => {
      if (err) {
        console.error(err);
        res.status(500).send({ message: 'Database error' });
      } else if (rows[0].count > 0) {
        // 이미 존재하는 이메일인 경우 처리
        res.send({ message: 'already-in-use' });
      } else {
        // 이메일이 중복되지 않은 경우 회원가입 진행
        db.query(
          'INSERT INTO users (email, username, password) values (?,?,?)',
          [sentEmail, sentUserName, sentPassword],
          (err, results) => {
            if (err) {
              console.log('err');
            } else {
              console.log('success');
              res.send({ message: 'user-added' });
            }
          }
        );
      }
    }
  );
});

MYSQL 로그인

// Login.jsx
 const submitLoginHandler = (event) => {
    event.preventDefault();

    // 이메일, 비밀번호 유효성 검사 확인
    if (!auth.checkValidation()) return;

    axios
      .post('http://localhost:5000/login', {
        Email: auth.email,
        Password: auth.password,
      })
      .then((res) => {
        const message = res.data.message || '';
        if (message.includes('user-not-found')) {
          alert('회원을 찾을 수 없습니다. 회원가입을 먼저 진행해 주세요.');
          navigate('/Signup');
        } else if (message.includes('success')) {
          alert('환영합니다!');
          navigate('/');
        }
      });
  };

// server.jsx
// MYSQL 로그인
app.post('/login', (req, res) => {
  const sentEmail = req.body.Email;
  const sentPassword = req.body.Password;

  db.query(
    'SELECT * FROM users WHERE email = ? && password = ?',
    [sentEmail, sentPassword],
    (err, results) => {
      if (err) {
        console.log('err');
        res.send(err);
      }
      if (results.length > 0) {
      // 로그인에 성공할 경우
        res.send({ message: 'success' });
      } else {
        // 입력한 이메일 주소가 일치하지 않을 경우
        res.send({ message: 'user-not-found' });
      }
    }
  );
});