Today I Learned

Parkboss·2023년 11월 2일
0

TIL

목록 보기
7/12
post-thumbnail

오늘 한일✅

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

그 전 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();

3. Signup 페이지와 server 연결하기

  • 나는 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 로그인

1. Login 페이지와 server 연결하기

// 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' });
      }
    }
  );
});

회원가입과 로그인을 구현하고 로그인을 유지시키기 위해 JWT, 쿠키를 사용하였다.

다음 글에서 인증 시스템에 대해 자세히 공부하여 적어볼 생각이다.

profile
ur gonna figure it out. just like always have.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN