Project-Log 4. 로그인 코드 리뷰

🪨 무너지면 걸림돌, 이겨내면 디딤돌

오늘은 멘토님의 리뷰와 팀원들의 피어 리뷰를 받는 날이다. 어제까지 회원가입 화면을 잘 구현해두고 오늘 오전에는 기능을 구현하려고 했으나, 쉽게 풀리지 않았다.

그렇게 회원가입을 다 끝내지 못한 채 로그인에 대한 리뷰를 받았다. 멘토님께서
우리들이 생각하지 못한 부분까지 섬세하게 리뷰를 해주셨고 리뷰가 끝난 이후에도 팀원들끼리 긴 시간 회의를 통해서 앞으로의 피어 리뷰 방식을 정하고 바로 팀원 리뷰에 들어갔다.

팀원들끼리 서로의 코드를 보며 이해하는 눈을 키우며, 소통하는 법을 배웠고 즐겁게 팀 미팅을 통해서 각자의 진도 공유와 코드를 함께 보며 수정했다.

- 모르는 점

• state에 계산될 수 있기에 기존에 handleBtn이라는 함수에 state를 운용했었는데 너무 state 활용과 함수에 빠져있었던 것 같다.
• 멘토님의 힌트를 듣고 한참을 고민하다가 방법을 찾았고 마치 등잔 밑이 어두웠던 느낌을 받았다.

- 배운점

handleBtn = () => {
    const { id, password } = this.state;
    this.setState({ isActive: id.includes('@') && password.length >= 5 });
  };

const userValidate = email.includes('@') && password.length >= 5;

• 첫 번째 코드에서 아래의 코드로 변경하였는데 굳이 함수 안에 set.state를 사용하지 않고 변수를 선언해서 활용이 가능했던 구간이었다.

• 또한 첫 번째 코드에서는 불필요하게 render가 한 번 더 일어나기에 보다
  간결한 코드를 치는 법을 배울 수 있었다.

@media only screen and (max-width: $widthBreakPoint)

추가로 미디어 쿼리에 팀원들과의 약속을 정하고 오타와 실수를 방지하기 위해 변수를 설정해 두는 것도 배웠다.

- 잘한 점과 개선할 점

• 기존에는 아래의 코드처럼 중복되는 부분을 길게 작성했었는데,

{seePw ? (
              <FaEyeSlash className='onEye' onClick={this.changeIcon} />
            ) : (
              <FaEye className='onEye' onClick={this.changeIcon} />
            )}

• 리뷰 반영한 수정 코드는 훨씬 간결하게 작성했다.

<div className='onEye' onClick={this.changeIcon}>
              {showPw ? <FaEyeSlash /> : <FaEye />}
            </div>

오늘의 교육을 기억하면서 앞으로 코드를 작성할 때에 중복되는 부분과 굳이 필요 없는 부분을 잘 파악해서 더욱 간결하고 예쁘며 실용적인 코드를 작성할 것이다.

- 리뷰 후 코드

• SignIn.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FaEye } from 'react-icons/fa';
import { FaEyeSlash } from 'react-icons/fa';
import './SignIn.scss';

class SignIn extends Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
      showPw: false,
    };
  }

  handleInput = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  signInFailAlert = () => {
    alert('유효한 이메일과 비밀번호가 아닙니다.');
  };

  changeIcon = () => {
    this.setState({
      showPw: !this.state.showPw,
    });
  };

  goToList = () => {
    const { email, password } = this.state;
    if (email.includes('@') && password.length >= 5) {
      this.props.history.push('./ProductList');
    }
  };

  render() {
    const { showPw, email, password } = this.state;
    const userValidate = email.includes('@') && password.length >= 5;
    return (
      <section className='SignIn'>
        <form className='form'>
          <div className='signInBox'>
            <p className='email'>이메일</p>
            <input
              className='emailText'
              type='text'
              placeholder='이메일'
              name='email'
              onChange={this.handleInput}
            />
            <p className='password'>비밀번호</p>
            <input
              className='passwordInput'
              type={showPw ? 'text' : 'password'}
              placeholder='비밀번호'
              name='password'
              onChange={this.handleInput}
            />
            <div className='onEye' onClick={this.changeIcon}>
              {showPw ? <FaEyeSlash /> : <FaEye />}
            </div>
            <button
              className='signInButton'
              onClick={userValidate ? this.goToList : this.signInFailAlert}
            >
              <p className='signInText'>LOGIN</p>
            </button>
            <div className='addFunction'>
              <Link className='signUp' to='/SignUp'>
                회원가입
              </Link>
              <Link className='findPassword' to=''>
                비밀번호 찾기
              </Link>
            </div>
            <button className='button'>LOGIN WITH KOKOA</button>
            <button className='button'>LOGIN WITH FACEKICK</button>
            <button className='button'>LOGIN WITH GARGLE</button>
          </div>
        </form>
      </section>
    );
  }
}

export default SignIn;

• SignIn.scss

@import '../../styles/variables';

.SignIn {
  display: flex;
  justify-content: center;
  align-items: center;

  .signInBox {
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 130px 40px 100px 40px;
    font-family: Helvetica;
  }

  .email,
  .password {
    margin-bottom: 6px;
    font-size: large;
  }

  .onEye {
    position: relative;
    bottom: 50px;
    left: 560px;
    cursor: pointer;
  }

  .emailText,
  .passwordInput {
    height: 43px;
    margin-bottom: 20px;
    padding-left: 10px;
    border: solid 1px;
    font-size: 15px;
    opacity: 0.8;
  }

  .signInButton {
    height: 40px;
    margin-bottom: 21px;
    color: white;
    background-color: black;
    border-radius: 45px;
    border: none;
    font-size: large;
    cursor: pointer;

    &:hover {
      background-color: white;
      border: solid 1px black;
    }
  }

  .signInText {
    font-size: 23px;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;

    &:hover {
      color: black;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
    }
  }

  .addFunction {
    display: flex;
    justify-content: space-around;
  }

  .signUp,
  .findPassword {
    margin-bottom: 90px;
    font-size: 17px;
    text-decoration: underline;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }

  .signUp:hover,
  .findPassword:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  .button {
    height: 45px;
    margin-bottom: 10px;
    background-color: white;
    border: solid 0.1px;
    border-radius: 45px;
    font-size: large;
    cursor: pointer;
  }
}

@media only screen and (max-width: $widthBreakPoint) {
  .SignIn {
    .signInBox {
      width: 100vw;
      padding-left: 10px;
      padding-right: 10px;
    }

    .onEye {
      position: absolute;
      top: 255px;
      left: auto;
      bottom: auto;
      right: 30px;
      cursor: pointer;
    }
  }
}

🌲 어제의 코드와는 조금 더 성숙해진 코드를 보며 기분 좋게 하루를 마무리한다.