공포의 Review단

순항을 하던 프로젝트 1주차 나는 당연히 리뷰가 적게달리겠지?라는 안일한 생각과는 다르게 일어나보니 리뷰가 30개 달려있다 ㅎㅎ (굿모닝 ㅎㅎ) 무슨 리뷰가 달린지 하나하나 봤는데 이건왠걸?? (멘토님은 시력이4.0은 되시는듯) 굉장히 세세하게 클래스 네임부터 컨벤션까지 다 수정하라고 달려있었다. 뭐가문제였는지 하나하나 살펴보자

Login.js의 클래스네임

return (
    <div>
      {member ? (
        <div className="login">
          <div className="loginBox">
            <div className="title">
              <p className="titleLogin">LOGIN</p>
            </div>
            <ul className="memberShip">
              <li className="loginMember">회원 로그인</li>
              <li className="searchOrder" onClick={onClickbutton}>
                비회원 주문조회
              </li>
            </ul>
            <div className="signUp">
              <p className="inputEmailid">이메일 아이디</p>
              <input
                className="inputId"
                onChange={handleInputs}
                type="text"
                name="idInput"
                value={idInput}
              />

클래스 네임엔 BEM과 같은중간에___처리를 해서 눈에 보이게 쉽게 만드는 작업이 하나 있고 , 카멜케이스와 같은 loginBox 와같이 중간에 대문자를 넣어서 하는 종류가 있다.

처음엔 div className="Loginbox" 와 같이 앞에 대문자를 써줬는데 이건 다른 형식의 표현이라고 고치라고 리뷰가 달렸다. 그러므로 우리팀은 카멜케이스를 쓰기로했으니 loginBox로 고치게 되었다!!

path 는 소문자로

 return (
    <BrowserRouter>
      <Routes>
        <Route path="/Login" element={<Login />} />

이와같이 하면 혼납니다!! Login은 login 으로 고치기

Seleter

  .Password {
        font-size: 13px;
        padding-bottom: 20px;
        padding-top: 20px;
      }
      
      .inputpw {
        height: 45px;
        width: 500px;
        border: 1.5px solid #e0e0e0;
      }
      
      .inputpw2 {
        height: 45px;
        width: 500px;
        margin-top: 10px;
        border: 1.5px solid #e0e0e0;
      }

셀렉터끼리는 이와같이 보기좋게 한칸씩 띄워놓기로 약~속

동일한 스타일은 하나로 묶기

.detailAdress {
        height: 45px;
        width: 500px;
        margin-top: 10px;
        border: 1.5px solid #e0e0e0;
      }
      .realdetailAdress {
        height: 45px;
        width: 500px;
        margin-top: 10px;

이걸보면 heigt값과 width 값이 같죠 ???

 .inputId {
          @include inputWidthHeigh50045;
          border: 1.5px solid #e0e0e0;
        }
      }

이와 같이 중복되는값은 variable.scss에 저장후 import 해와서 사용하면 보기 깰~끔!

삼항연산자로 처리하지말고 변수로!

  <button type="submit" className="btn" disabled={false}>
                  로그인
                </button>
              ) : (
                <button type="submit" className="btn" disabled={true}>
                  로그인
                </button>

이건 삼항연산자로 처리했을때 잘 됬는데...멘토님이 변수로 값을줘라 요청하셔서 고민을 하던중 떠올려버렸다.. 그녀를(로직)

const validation = idInput.includes('@', '.') && pwInput.length > 7;

if (validation) navigate('/list-page');
   else {
     alert('등록되지 않은 회원입니다 회원가입을 먼저해주세요');
   }

어짜피 로그인 버튼 피활성화는 필요없으니 이메일에 필요한 @ , 값과 비밀번호 7개이상의 값을 validation 으로 변수를 주고 if 문을 써서 하니 !! 더욱더 값진 코드를 얻게되었다고 한다~

더욱더 리뷰를 쓸게많치만 다쓰면 재미없으니 다음시간에 오겠습니다

뿅