회원관리(MariaDB) - Part2 로그인

사용자가 이메일과 비밀번호를 입력하여 로그인할 수 있는 기능을 구현합니다. 이 과정에서 프론트엔드와 백엔드가 상호작용하며, 입력된 정보를 바탕으로 데이터베이스에서 사용자를 인증합니다.

---

프론트엔드

 

1. 로그인 요청 핸들러

handleLogin 함수

const handleLogin = async (e) => {
  e.preventDefault(); // 폼 제출 시 페이지 새로고침 방지
  setError(""); // 기존 오류 메시지 초기화

  // 이메일 검증
  if (!email) {
    alert("이메일을 입력하세요."); // 이메일이 비어 있으면 경고 메시지 표시
    emailRef.current.focus(); // 이메일 입력 필드에 포커스
    return;
  }

  // 비밀번호 검증
  if (!password) {
    alert("비밀번호를 입력하세요."); // 비밀번호가 비어 있으면 경고 메시지 표시
    passwordRef.current.focus(); // 비밀번호 입력 필드에 포커스
    return;
  }

  try {
    // 서버에 로그인 요청 보내기
    const response = await axios.post(`${serverUrl}/auth/login`, { email, password });
    console.log(response.data); // 서버 응답 로그

    // Redux 스토어에 사용자 정보 저장
    dispatch(userLogin(response.data));

    // 피드 페이지로 이동
    navigate("/feed");
  } catch (err) {
    // 로그인 요청 실패 시 처리
    if (err.response && err.response.data) {
      setError(err.response.data.message); // 서버에서 받은 오류 메시지 설정
    } else {
      setError("로그인 오류?"); // 일반적인 오류 메시지 설정
      console.log(err); // 오류 로그
    }
  }
};

 

---

 

백엔드

 

1. 로그인 API 엔드포인트

authRouter.post("/login", (req, res) => {
  const { email, password } = req.body;

  db.query(
    `SELECT * FROM users WHERE email = ? AND password = ?`, // 주어진 이메일과 비밀번호로 사용자 검색
    [email, password],
    (err, results) => {
      if (err) {
        return res
          .status(500)
          .json({ message: "서버 오류가 발생했습니다. 다시 시도해주세요." }); // 서버 오류 처리
      } else {
        if (results.length === 0) {
          return res
            .status(400)
            .json({ message: "존재하지 않는 이메일입니다." }); // 사용자가 존재하지 않을 경우 처리
        }

        const user = results[0]; // 검색된 사용자
        if (password !== user.password) {
          return res
            .status(400)
            .json({ message: "비밀번호가 일치하지 않습니다." }); // 비밀번호가 일치하지 않을 경우 처리
        }

        // 사용자 정보 반환
        res.json({
          userNo: user.userNo,
          email: user.email,
          password: user.password,
          userName: user.userName,
          userNickname: user.userNickname,
          profilePicture: user.profilePicture,
          created_at: user.created_at,
        });
      }
    }
  );
});

 

sql 쿼리문

db.query(SELECT * FROM users WHERE email = ? AND password = ?, [email, password], (err, results) => { ... });

• ?는 쿼리문에서 파라미터를 나타내며, [email, password] 배열이 쿼리문의 ?에 매핑됩니다.
• 데이터베이스에서 주어진 이메일과 비밀번호로 사용자를 검색합니다.

사용자 검증

if (results.length === 0) { ... }

쿼리 결과가 없으면(사용자가 존재하지 않으면), 400 상태 코드와 "존재하지 않는 이메일입니다." 메시지를 반환합니다.

const user = results[0];

검색된 사용자를 가져옵니다.

if (password !== user.password) { ... }

비밀번호가 일치하지 않으면, 400 상태 코드와 "비밀번호가 일치하지 않습니다." 메시지를 반환합니다.

 

---