yoga 프로젝트 작업일지 - 4

# 오늘 할 것은..?

 

이전 포스팅에 서버단을 구현했으므로, 오늘은 클라이언트 단에 관한 포스팅을 해볼까 합니다.

 

---

[ Register.js ]

 

1. 입력한 데이터를 저장할 용도를 쓸 useState 값.

2. 서버단에 요청을할 용도를 쓸 axios

3. 사이트 이동 용도로 쓸 useNavigate

import { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from "react-router-dom";

---

 

1. server단에 url에 아래와 같습니다. 아래의 url로 요청할 것 이고 앞부분은 바뀌지 않을꺼기 때문에 선언해서 이용하려고 합니다.

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

---

1. 이제 컴포넌트를 함수를 선언했습니다 => Register

2. useNavigate 훅은 navigate라는 변수명으로 이용합니다.

3. 회원 가입시 값을 useState로 초기화 합니다.

4. 에러 처리용 useState값을 초괴화 합니다.

5. 나중에 onChange = { changeInputData } 형태로 이용할 changeInputData 함수를 선언합니다.

6 useState에서 이전에 값은 기억하고 새로운 값을 추가할 때는 아래와 같은 형식으로 코딩합니다.

7. 그리고 각각의 input 태그에 선언된 name속성을 기준으로 각각에 맞는 e.targe.value에 값이 들어갑니다.

const Register = () => {
  const navigate = useNavigate();

  const [registerData, setRegisterData] = useState({
    email: "",
    nickname: "",
    password: "",
    repassword: ""
  })

  const [errorMsg, setErrorMsg] = useState("");

  // input에 데이터를 입력할때마다 singUpData가 변경되는걸 콘솔로 찍어서 보기위해
  // useEffect(() => {
  //   console.log(signUnData);
  // }, [signUnData]);

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

---

1. 입력되는 값을 유효성 검사해주는 부분입니다.

2, 각각에 상황에 맞게 유효성 검사를 하고 if문을 이용해 각각의 상황에 대응을 해주는 모습입니다.

3. 유효성 검사가 완료되면 마지막에 axios를 통해 서버단에 요청을 합니다.

// 유효성 검사
  const registerFunction = async () => {
    const emailRegex =
      /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
    
    const passwordRegex =
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&#]{8,}$/;
    
    
    const emailValueCheck = emailRegex.test(registerData.email);
    const passwordValueCheck1 = passwordRegex.test(registerData.password);
    const passwordValueCheck2 = passwordRegex.test(registerData.repassword);

    
    if (!emailValueCheck) {
      alert("이메일 형식을 알맞게 입력해주세요.")
      setRegisterData({
        email: "",
        password: document.getElementById("password").value,
        repassword: document.getElementById("rePassword").value,
        nickname: document.getElementById("nickName").value
      })

      //email input에 포커스
      document.getElementById("email").focus();
      //에러 메시지를 보여주고
      setErrorMsg("이메일 형식이 올바르지 않습니다.");
      return;
    }
    else if (registerData.nickname === undefined || registerData.nickname.length === 0) {
      alert("닉네임을 한 글자이상 입력해주세요.")
      return
    }
    else if (!passwordValueCheck1) {
      console.log(passwordValueCheck1)
      alert("비밀번호를 제대로 입력해주세요.")

      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("1차 패스워드를 형식을 알맞게 입력해주세요.");
      return
    }
    else if (!passwordValueCheck2) {
      alert("2차 패스워드를 형식을 알맞게 입력해주세요.")
      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // 2차 password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("2차 패스워드를 형식을 알맞게 입력해주세요.");
      return
    }
    else if (registerData.password !== registerData.repassword) {
      alert("1차 비밀번호랑 2차 비밀번호가 다릅니다.")
      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // 2차 password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("1차 비밀번호랑 2차 비밀번호가 다릅니다.");
      return
    }

    console.log(registerData);
    // axios.get(url,[,config])	
    return await axios.post(server.url + '/user/register', registerData)
  }

---

1. Register.js 의 return 문 입니다.

2. 각각의 input 값을 통해 아이디, 닉네임, 1차 비번, 2차 비번을 받습니다.

3. 앞서 말햇듯이 noChange = { changeInputData } 를 통해 변화되는 값을 받습니다.

return (
    <div
      className="container"
      style={{ paddingTop: "100px", marginBottom: "100px" }}
    >
      <div className="row justify-content-center">
        <div className="col-lg-5">
          <div
            class="custom-box aos-init aos-animate"
            data-aos="fade-up"
            data-aos-delay="0"
          >
            <h2 class="heading" style={{marginTop: "10px", marginBottom: "20px"}}>회원 가입</h2>
            <form action="#">
              <div class="form-field">
                <label htmlFor="email">이메일</label>
                <input type="email" class="form-control" value={registerData.email} onChange={changeInputData} name="email" id="email" placeholder='example@example.com' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field">
                <label htmlFor="nickName">닉네임</label>
                <input type="text" class="form-control" value={registerData.nickname} onChange={changeInputData} name="nickname" id="nickName" placeholder='example' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field">
                <label htmlFor="password">비밀번호</label>
                <input type="password" class="form-control" value={registerData.password} onChange={changeInputData} name="password" id="password" placeholder='Example123@' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field" style={{paddingBottom: "30px"}}>
                <label htmlFor="rePassword">비밀번호 확인</label>
                <input type="password" class="form-control" value={registerData.repassword} onChange={changeInputData} name="repassword" id="rePassword" placeholder='Example123@' style={{marginTop: "10px", marginBottom: "5px"}} />
              </div>
              {/* 에러메세지 표기 부분 */}
              <div className="mb-3">
                    <p className="text-dark">{errorMsg}</p>
              </div>

---

1. 해다 input 버튼을 클릭하면 (type을 button으로 했으므로) 유효성 검사가 시작되고, 중간에 유효성이 탈락되는 상황이 없다면 then까지 와서 res에 값이 반혼됩니다.

2. then까지 왔다면 서버 요청을하고 받아온 상태이므로 회원 가입이 완료되었다는 alert메세지를 보내고

3. navigate를 이용하여 홈으로 이동합니다.

4. 기타 오류 상황의 catch로 console.log(e) 오류를 출력하는 것으로 끝을 냈습니다. 

<div class="form-field" style={{marginRight: "30px"}}>
                <input
                  type="button"
                  class="btn btn-primary btn-block"
                  value="Sign in"
                  onClick={() => {
                    registerFunction().then((res) => {
                      console.log(res);
                      if (res.data.status) {
                        alert(res.data.message);
                        navigate('/');
                        // window.location.reload();
                      }
                      
                    }).catch(e => {
                      console.log(e)
                      
                    })

 

---

[ 전체 코드 ]

 

import { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from "react-router-dom";

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

const Register = () => {
  const navigate = useNavigate();

  const [registerData, setRegisterData] = useState({
    email: "",
    nickname: "",
    password: "",
    repassword: ""
  })

  const [errorMsg, setErrorMsg] = useState("");

  // input에 데이터를 입력할때마다 singUpData가 변경되는걸 콘솔로 찍어서 보기위해
  // useEffect(() => {
  //   console.log(signUnData);
  // }, [signUnData]);

  const changeInputData = (e) => {
      // e => element  요소 그자체를 가져온거, 요소는 input 
      setRegisterData({
          ...registerData,
          [e.target.name]: e.target.value
      });
  
  }
   
  // 유효성 검사
  const registerFunction = async () => {
    const emailRegex =
      /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
    
    const passwordRegex =
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&#]{8,}$/;
    
    
    const emailValueCheck = emailRegex.test(registerData.email);
    const passwordValueCheck1 = passwordRegex.test(registerData.password);
    const passwordValueCheck2 = passwordRegex.test(registerData.repassword);

    
    if (!emailValueCheck) {
      alert("이메일 형식을 알맞게 입력해주세요.")
      setRegisterData({
        email: "",
        password: document.getElementById("password").value,
        repassword: document.getElementById("rePassword").value,
        nickname: document.getElementById("nickName").value
      })

      //email input에 포커스
      document.getElementById("email").focus();
      //에러 메시지를 보여주고
      setErrorMsg("이메일 형식이 올바르지 않습니다.");
      return;
    }
    else if (registerData.nickname === undefined || registerData.nickname.length === 0) {
      alert("닉네임을 한 글자이상 입력해주세요.")
      return
    }
    else if (!passwordValueCheck1) {
      console.log(passwordValueCheck1)
      alert("비밀번호를 제대로 입력해주세요.")

      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("1차 패스워드를 형식을 알맞게 입력해주세요.");
      return
    }
    else if (!passwordValueCheck2) {
      alert("2차 패스워드를 형식을 알맞게 입력해주세요.")
      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // 2차 password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("2차 패스워드를 형식을 알맞게 입력해주세요.");
      return
    }
    else if (registerData.password !== registerData.repassword) {
      alert("1차 비밀번호랑 2차 비밀번호가 다릅니다.")
      setRegisterData({
        email: document.getElementById("email").value,
        password: "",
        repassword: "",
        nickname: document.getElementById("nickName").value
      })

      // 2차 password input에 포커스
      document.getElementById("password").focus();
      // 에러 메시지를 보여주고
      setErrorMsg("1차 비밀번호랑 2차 비밀번호가 다릅니다.");
      return
    }

    console.log(registerData);
    // axios.get(url,[,config])	
    return await axios.post(server.url + '/user/register', registerData)
  }
 
  return (
    <div
      className="container"
      style={{ paddingTop: "100px", marginBottom: "100px" }}
    >
      <div className="row justify-content-center">
        <div className="col-lg-5">
          <div
            class="custom-box aos-init aos-animate"
            data-aos="fade-up"
            data-aos-delay="0"
          >
            <h2 class="heading" style={{marginTop: "10px", marginBottom: "20px"}}>회원 가입</h2>
            <form action="#">
              <div class="form-field">
                <label htmlFor="email">이메일</label>
                <input type="email" class="form-control" value={registerData.email} onChange={changeInputData} name="email" id="email" placeholder='example@example.com' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field">
                <label htmlFor="nickName">닉네임</label>
                <input type="text" class="form-control" value={registerData.nickname} onChange={changeInputData} name="nickname" id="nickName" placeholder='example' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field">
                <label htmlFor="password">비밀번호</label>
                <input type="password" class="form-control" value={registerData.password} onChange={changeInputData} name="password" id="password" placeholder='Example123@' style={{marginTop: "10px", marginBottom: "20px"}} />
              </div>
              <div class="form-field" style={{paddingBottom: "30px"}}>
                <label htmlFor="rePassword">비밀번호 확인</label>
                <input type="password" class="form-control" value={registerData.repassword} onChange={changeInputData} name="repassword" id="rePassword" placeholder='Example123@' style={{marginTop: "10px", marginBottom: "5px"}} />
              </div>
              {/* 에러메세지 표기 부분 */}
              <div className="mb-3">
                    <p className="text-dark">{errorMsg}</p>
              </div>
              <div class="form-field" style={{marginRight: "30px"}}>
                <input
                  type="button"
                  class="btn btn-primary btn-block"
                  value="Sign in"
                  onClick={() => {
                    registerFunction().then((res) => {
                      console.log(res);
                      if (res.data.status) {
                        alert(res.data.message);
                        navigate('/');
                        // window.location.reload();
                      }
                      
                    }).catch(e => {
                      console.log(e)
                      
                    })

                    }
                  }
                />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Register;

 

---

후기

 

의외로 클라이언트 요청 부분의 코드가 기네요..?

로그인은 다음 포스팅에 올리고자 합니다. ㅎㅎㅎ