yoga 프로젝트 작업일지 - 5

# 이제 클라이언트에서 로그인 하는 부분을 구현해봅시다.

 

 

---

[ Login.js ]

 

1. 이전과 마찬가지로 서버단에 axios 요청을을 하기 위해 임포트 합니다.

2. 로그인 성공시 쿠키를 배포하여, 권한 관리를 해줄거기 때문에 npm에서 쿠키 라이브러리를 다운 받은 후, 임포트 합니다.

3. 서버 이동을 하기위해 navigate 훅을 임포트합니다.

4. 마찬가지로 서버쪽 url은 고정이기에 변수로 선언하고 이용할 것 입니다.

import axios from "axios";
import { useState } from "react";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";

const server = {
  "url": "http://localhost:8080"
}

---

 

1. 로그인 데이터를운용할 때 쓸 useState 훅을 선언합니다.

2. useCookies의 이용은 다음과 같습니다.

useCookie([ 배포할 쿠키 변수명 ])

cookie: 쿠키데이터, setCookie: 저장 명령어, removeCookie: 삭제 명령어

3. 그 다음 input 태그에 데이터는 changeInputData 함수를 이용하여 처리합니다.

const Login = () => {
  const [loginData, setLoginData] = useState({
    email: "",
    password: "",
  });

  // 쿠키
  const [cookies, setCookie, removeCookie] = useCookies(['cookie'])

  //로그인이 제대로 진행되지 않았을 경우, 에러 메시지를 보여주는 부분
  const [errorMsg, setErrorMsg] = useState("");

  // navigate 사용
  const navigate = useNavigate();

  // 더미 데이터
  // const dummyEmail = "test@test.com";
  // const dummyPwd = "Rltwldhr77@";

  const changeInputData = (e) => {
    // e => element  요소 그자체를 가져온거, 요소는 input
    setLoginData({
      ...loginData,
      [e.target.name]: e.target.value,
    });
  };

 

---

1. 유효성 검사를 하는 부분입니다. 

2. 아이디와 비번은 어차피 알맞은 비번과 이메일이 들어와야 로그인되기 때문에 빡빡한 유효성 검사는 하지 않앗씁니다.

3. 유효성 검사가 완료되면, axios를 이용해서 서버단에 로그인 요청을 합니다.

const loginFunction = async () => {
    
    if (loginData.email.length === 0) {
      alert("이메일을 알맞게 입력 해주세요.");
      return;

    } else if (loginData.password.length === 0) {
      console.log(loginData);
      alert("패스워드들 알맞게 입력 해주세요.");
      return;
    }

    console.log(loginData);
    
    // 더미 데이터 체크
    // if (loginData.email === dummyEmail && loginData.password === dummyPwd) {
    //   alert("로그인 성공!");
    // } else {
    //   alert("비번이나 아이디가 틀렷네영..!!ㅋㅋ");
    // }

    return await axios.post(server.url + '/user/login', loginData)
  };

---

1. input태그를 이용하여 로그인 버튼을 만든 코드입니다.

2. onClick시 위에서 구현 로그인 함수가 실행 됩니다.

3. axios를 통해 요청이 올바르게 응답이오면 setCookie를 이용하여 쿠키를 전 사이트에 배포합니다, path: "/" 뜻이 전 웹 사이트에 쿠키를 배포하겠다는 뜻입니다.

4. 응답이 제대로 오지 않았을 경우 비밀번호만 빈값으 바꾼 후 에러메세지를 출력합니다.

<input
                    type="button"
                    className="btn btn-primary btn-block"
                    value="Sign in"
                    onClick={() => {
                      loginFunction().then((res) => {
                        // 체크용
                        console.log(res);
                        if (res.data.status) {
                          setCookie("cookie", res.data, { path: "/" })
                          navigate('/');
                          return;
                        }
                        else {
                          setLoginData({
                            email: document.getElementById("email").value,
                            password: ""
                          })
                          setErrorMsg(res.data.message);
                        }

                      }).catch(err => {
                        console.log(err);
                      })
                    }}

---

 

 

[ heaer.js ]

 

1. 로그아웃 버튼은 헤더 컴포넌트에 로그인시 활성화 되게 만들었습니다. 때문에 로그아웃 버튼을 누르면 쿠키를 지우는 로직은 간단하게 이렇습니다.

let logOutBtn = () => {
    removeCookie("cookie", { path: "/" });
    // 그 후 home 페이지로 이동~
    navigate("/");
  };

 

---

[ Login.js ] - 전체 코드

 

import axios from "axios";
import { useState } from "react";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";

const server = {
  "url": "http://localhost:8080"
}

const Login = () => {
  const [loginData, setLoginData] = useState({
    email: "",
    password: "",
  });

  // 쿠키
  const [cookies, setCookie, removeCookie] = useCookies(['cookie'])

  //로그인이 제대로 진행되지 않았을 경우, 에러 메시지를 보여주는 부분
  const [errorMsg, setErrorMsg] = useState("");

  // navigate 사용
  const navigate = useNavigate();

  // 더미 데이터
  // const dummyEmail = "test@test.com";
  // const dummyPwd = "Rltwldhr77@";

  const changeInputData = (e) => {
    // e => element  요소 그자체를 가져온거, 요소는 input
    setLoginData({
      ...loginData,
      [e.target.name]: e.target.value,
    });
  };

  const loginFunction = async () => {
    
    if (loginData.email.length === 0) {
      alert("이메일을 알맞게 입력 해주세요.");
      return;

    } else if (loginData.password.length === 0) {
      console.log(loginData);
      alert("패스워드들 알맞게 입력 해주세요.");
      return;
    }

    console.log(loginData);
    
    // 더미 데이터 체크
    // if (loginData.email === dummyEmail && loginData.password === dummyPwd) {
    //   alert("로그인 성공!");
    // } else {
    //   alert("비번이나 아이디가 틀렷네영..!!ㅋㅋ");
    // }

    return await axios.post(server.url + '/user/login', loginData)
  };

  return (
    <>
      <div
        className="container"
        style={{ paddingTop: "100px", paddingBottom: "100px" }}
      >
        <div className="row justify-content-center">
          <div className="col-lg-5">
            <div
              className="custom-box aos-init aos-animate"
              data-aos="fade-up"
              data-aos-delay="0"
            >
              <h2
                className="heading"
                style={{ marginTop: "10px", marginBottom: "20px" }}
              >
                로그인
              </h2>
              <form action="#">
                <div className="form-field">
                  <label htmlFor="email">이메일</label>
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    value={loginData.email}
                    onChange={changeInputData}
                    style={{ marginTop: "10px", marginBottom: "20px" }}
                    name="email"
                    placeholder="Example@Example.com"
                  />
                </div>
                <div className="form-field">
                  <label htmlFor="password">비밀번호</label>
                  <input
                    type="password"
                    className="form-control"
                    id="password"
                    value={loginData.password}
                    onChange={changeInputData}
                    style={{ marginTop: "10px", marginBottom: "40px" }}
                    name="password"
                    placeholder="Example123@"
                  />
                </div>
                <div className="mb-3">
                    <p className="text-danger">{errorMsg}</p>
                </div>
                <div className="form-field" style={{marginRight: "30px"}}>
                  <input
                    type="button"
                    className="btn btn-primary btn-block"
                    value="Sign in"
                    onClick={() => {
                      loginFunction().then((res) => {
                        // 체크용
                        console.log(res);
                        if (res.data.status) {
                          setCookie("cookie", res.data, { path: "/" })
                          navigate('/');
                          return;
                        }
                        else {
                          setLoginData({
                            email: document.getElementById("email").value,
                            password: ""
                          })
                          setErrorMsg(res.data.message);
                        }

                      }).catch(err => {
                        console.log(err);
                      })
                    }}
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Login;

 

[ Header.js ] - 전체 코드

 

 

import imgYoga from "./../assets/images/yogaLogo.png";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
import $ from "jquery";
import { useEffect } from "react";
import "./Header.css";

const Header = () => {
  // 쿠키
  const [cookies, setCookie, removeCookie] = useCookies(["cookie"]);

  const navigate = useNavigate();

  let logOutBtn = () => {
    removeCookie("cookie", { path: "/" });
    // 그 후 home 페이지로 이동~
    navigate("/");
  };

  // var nav = $('.content-nav');
  useEffect(() => {
    let lastScrollPosition = 0;
    const navbar = document.querySelector(".site-nav");
    window.addEventListener("scroll", function (e) {
      lastScrollPosition = window.scrollY;

      if (lastScrollPosition > 100) navbar.classList.add("site-nav-dark");
      else navbar.classList.remove("site-nav-dark");
    });
  });

  return (
    <>
      <nav
        className="site-nav dark js-site-navbar mb-5 site-navbar-target"
        // style={{ position: "fixed", background: "white" }}
      >
        <div className="container">
          <div className="site-navigation">
            {/* 헤더 이미지 코드 - khs */}
            <a href="/">
              <img
                className="logo m-0 float-left"
                style={{ width: "100px", height: "50px" }}
                alt="yogaLog"
                src={imgYoga}
              />
            </a>
            {/* <a href="index.html" className="logo m-0 float-left">
              yogaA!<span className="text-primary"></span>
            </a> */}

            <ul className="js-clone-nav d-none d-lg-inline-block site-menu float-left">
              <li className="active" style={{ paddingLeft: "100px" }}>
                <a href="home" className="nav-link">
                  <a h3>Home</a>
                </a>
              </li>
              <li className="has-children" style={{ paddingLeft: "100px" }}>
                <a href="#!" className="nav-link">
                  <a h3>Info</a>
                </a>
                <ul className="dropdown">
                  <li>
                    <a href="infopose" className="nav-link">
                      Pose
                    </a>
                  </li>
                  <li>
                    <a href="infomap" className="nav-link">
                      Map
                    </a>
                  </li>
                  {/* <li className="has-children">
                    <a href="#!">Menu Two</a>
                    <ul className="dropdown">
                      <li>
                        <a href="#!" className="nav-link">
                          Sub Menu One
                        </a>
                      </li>
                      <li>
                        <a href="#!" className="nav-link">
                          Sub Menu Two
                        </a>
                      </li>
                      <li>
                        <a href="#!" className="nav-link">
                          Sub Menu Three
                        </a>
                      </li>
                    </ul>
                  </li> */}
                  {/* <li>
                    <a href="#!" className="nav-link">
                      Menu Three
                    </a>
                  </li> */}
                </ul>
              </li>
              <li>
                <a
                  href="start"
                  className="nav-link"
                  style={{ paddingLeft: "100px" }}
                >
                  <a h3>Let's start</a>
                </a>
              </li>
              {/* <li>
                <a href="#pricing-section" className="nav-link">
                  Pricing
                </a>
              </li> */}
              <li>
                <a
                  href="community"
                  className="nav-link"
                  style={{ paddingLeft: "100px" }}
                >
                  <a h3>Community</a>
                </a>
              </li>
            </ul>

            <ul className="js-clone-nav d-none mt-1 d-lg-inline-block site-menu float-right">
              {
                // 만약 쿠키에 token이 존재하지 않는다면 로그아웃 버튼을 보여주지 않음.
                cookies.cookie === undefined ? (
                  <li
                    className="cta-button-outline"
                    style={{ marginRight: "10px" }}
                  >
                    <a href="login">로그인</a>
                  </li>
                ) : (
                  <li
                    className="cta-button-outline"
                    style={{ marginRight: "10px" }}
                  >
                    <a
                      className="logout"
                      style={{
                        paddingTop: "9px",
                        paddingBottom: "8px",
                        paddingLeft: "23px",
                        paddingRight: "23px",
                      }}
                      onClick={logOutBtn}
                    >
                      로그아웃
                    </a>
                  </li>
                )
              }

              {cookies.cookie === undefined ? (
                <li className="cta-primary">
                  <a href="register">회원 가입</a>
                </li>
              ) : (
                <></>
              )}
            </ul>

            <a
              href="#!"
              className="burger ml-auto float-right site-menu-toggle js-menu-toggle d-inline-block dark d-lg-none"
              data-toggle="collapse"
              data-target="#main-navbar"
            >
              <span></span>
            </a>
          </div>
        </div>
      </nav>
    </>
  );
};

export default Header;

 

---

후기

 

yogaA! 웹사이트에서 제가 크게 기여한 부분의 작업일지 리뷰가 끝났네요.

내일부터 구현 해보고 싶었지만 시간이 촉박하여 구현하지 못한것들을 다시 구현해보는

프로젝트를 시작하는데요.

리액트 실습은 그때 다시 리뷰하고자 합니다.

그럼 이만..!

 

프로젝트 깃허브 주소: https://github.com/jmahn1901/YogAI

GitHub - jmahn1901/YogAI