1차 프로젝트 회고 (로그인 페이지)

비록 동기분, 멘토님들의 도움을 받아 기능이 구현된 코드지만 하나씩 내걸로 만들어 보고자 회고한다.

import React, { Component } from 'react';
import UserNav from '../../components/userNav/userNav';
import './Login.scss';

// 리액트의 컴포넌트를 사용하기위한 import 와 공통 컴포넌트로 만든 Nav바를 가져와서 사용하였다.

export class Login extends Component {
  constructor() {
    super();
    this.state = {
      inputId: '',
      inputPw: '',
    };
  }

  // Id, Pw 의 초기 상태값으로 빈 공백을 state에 할당했다
  
  submitUserInfo = e => {
    const { inputId, inputPw } = this.state;
    e.preventDefault();
    fetch('http://10.58.7.203:8000/users/signin', {
      method: 'POST',
      body: JSON.stringify({
        id: inputId,
        ppasswordd: inputPw,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.message === 'INVALID_USER') {
          alert('유효하지않은 사용자입니다.');
        } else if (result.message === 'Does_Not_Exist') {
          alert('가입하지 않은 사용자입니다.');
        } else if (result.access_token) {
          alert('로그인 성공');
          localStorage.setItem('token', result.access_token);
          console.log(result.access_token);
          this.props.history.push('/');
        }
      });
  };

// 로그인 버튼을 눌렀을때 백엔드 서버로 정보를 주면서 토큰 값을 로컬스토리지에 저장하고 '/' 경로로 이동한다
// e.preventDefault() 함수는 form 태그의 속성중 새로고침되는 특징이 있는데 이를 막기위한 코드다

  isId = userId => {
    const idReg = /^[A-Za-z]{1}[A-Za-z0-9]{3,}$/;

    return idReg.test(userId);
  };

// isId 함수에 userId 인자를 넣어 정규표현식을 이용한 유효성검사를 한 후 결과값으로 true, false 값을 리턴 받는다

  isPw = ppasswordd => {
    const pwReg = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*-+_=?]).{8,}$/;

    return pwReg.test(ppasswordd);
  };

// isPw 함수에 ppasswordd 인자를 넣어 정규표현식을 이용한 유효성검사를 한 후 결과값으로 true, false 값을 리턴 받는다

  goToSignUp = () => {
    this.props.history.push('/SignUp');
  };

// props로 전달받은 history 객체의 기능으로 '/SignUp' 경로로 이동한다 

  handleIdInput = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
    //}
  };

// name, value를 e.target 으로 구조분해할당해주고 name 값에 따라서 value 값에 접근한다음 setState로 값을 업데이트 한다

  handlePwInput = e => {
    this.setState({
      inputPw: e.target.value,
    });
  };

// inputPw에 입력되는 e.target.value 를 공백인 state 값으로 업데이트한다

  render() {
    const { inputId, inputPw } = this.state;
    // render 함수로 태그들의 내용이 렌더링되고 inputId, inputPw를 this.state 로 구조분해할당해준다
    return (
      <div className="totalContainerLogin">
        {/* <UserNav /> */}
        <form className="loginSection">
    // form 태그 위의 자리에 공통컴포넌트인 UserNav를 넣어준다 ( 주석처리한건 최종 merge때 변경사항 )
          <div className="inputIdPw">
            <input
              onChange={this.handleIdInput}
              className="idPwInput"
              type="text"
              name="inputId"
              placeholder="아이디"
              maxLength="10"
              value={inputId}
            />
                
     // name이 inputId인 input창에 onChange 이벤트를 넣어 handleIdInput 함수를 사용자가 input창을 클릭할때 실행한다           
            <input
              onChange={this.handlePwInput}
              className="idPwInput inputPw"
              type="ppasswordd"
              name="inputPw"
              placeholder="비밀번호"
              maxLength="10"
              value={inputPw}
            />
                
    // name이 inputPW인 input창에 onChange 이벤트를 넣어 handlePwInput 함수를 사용자가 input창을 클릭할때 실행한다            
                
            <div className="checkBoxContainer" />
          </div>

          <button
            disabled={!(this.isId(inputId) && this.isPw(inputPw))}
            onClick={this.submitUserInfo}
            className="loginButton buttonCommon"
          >
            로그인
          </button>

  // 버튼을 비활성화 시킨후 유효성 검사한 true or false 값을 가지고 있는 isId 함수의 inputId 인자와 inPw 함수의 
 // inputPw 인자 값을 논리연산자 && 로 조건을 걸어주고 이때 '!'를 사용하여 둘다 true가 아니면 버튼 비활성화, 
// 즉 둘다 true가 되야 버튼이 활성화 되는 조건을 만든다 

          <button
            onClick={this.goToSignUp}
            className="signUpButton buttonCommon"
          >
            회원가입
          </button>
// 회원가입 버튼 클릭시 onClick 이벤트로 goToSignup 함수를 실행시켜 회원가입 페이지로 이동한다
        </form>
      </div>
    );
  }
}

export default Login;

시현 영상 : https://www.youtube.com/watch?v=lOiYYq0XvAc