[라인프렌즈] 회원가입 - 프로젝트 개념정리

DamHo Bae·2021년 3월 20일
1

SIGNUP

라인프렌즈 네이버 회원가입을 클론코딩
먼저 아웃 포커싱 했을 경우에, 안내 경고문을 alret창이 아닌
문구가 나오도록 구현을 했다!

👉 전체적인 부분은 구현은 했으나,

반복 되는 부분이 있어 아이디와 비밀번호만 정리를 했다.


state 초기값으로 무엇을 할 지 알려준다
회원가입에 들어 갈 빈 문자열과 유효성 검사를 하기 위한 boolean값을 초기 false로 지정했다.



onChange 이벤트로 계산된 속성명을 사용했고,
각각의 name값을 지정해서 하나의 이벤트안에서 value를 불러올 수 있다

 <div className="userId">
                <p>아이디</p>
                <input
                  class="userInputId"
                  type="text"
                  name="loginId"
                  onChange={this.handleChange}
                  onBlur={this.handleId}
                />
                <span>@naver.com</span>
              </div>

onBlur : 아웃 포커싱 이벤트 (값을 입력하고 포커싱이 빠졌을 경우)

const IS_ID_NUM_ENG = /^[a-z]+[a-z0-9]{5,19}$/g

아이디가 영문 소/대문자, 숫자가 가능한 정규 표현식
네이밍은 알아 볼 수 있게 선언하였고, 정규식에 따른 상수는 대문자로 !

const {loginId} = this.state

먼저 비구조할당을 하기 위해 선언했다!

   if(loginId === "")
	{this.setSate({ idCheck: false })}
	return;

아이디가 빈 공백일 경우 조건 1

id(IS_ID_NUM_ENG.test(loginId){
	this.setState({idCheck: false});
}else{
	this.setState({idCheck: true})

정규표현식에 대한 조건 2

setStatestate 값을 업데이트 시켜준다
정규식에 따른 값을 제대로 입력 하면 false
그렇지 않으면 true

아이디 div로 감싸진 <input /> 태그 밑에 연산자와 비교 해서 조건에 따라 출력된다

idCheck && "5~20자의 영문 소문자 또는 숫자만 사용 가능합니다."
&& 연산자를 이용해서 트루 일 경우에 문구가 출력된다.
spane 으로 감싸져서 scss 에서 스타일을 조금 변경 해줬다 !
경고 문구라서 폰트를 color:red 를 사용하면 좋을 것 같다.

   <div className="userInputBox">
              <div className="userId">
                <p>아이디</p>
                <input
                  class="userInputId"
                  type="text"
                  name="loginId"
                  onChange={this.handleChange}
                  onBlur={this.handleId}
                />
                <span>@naver.com</span>
              </div>
              <span className="pwCheck">
                {idCheck && "5~20자의 영문 소문자만 사용 가능합니다."}
              </span>


비밀번호 일치 & 아이콘 색 변경

기본 색상에서 틀릴 경우 틀렸다라는 문구와 동시에
아이콘도 레드색상으로 바뀌는 것을 구현 했다.
코드 리뷰를 보자!

My Code


비밀번호 공백일 경우와 비밀번호 8자 이상 총 2개의 로직이다.

비밀번호는 백엔드 규동님과 소통을 하여 형식을 8글자 이상일 경우만
찾기로 했다!

코드를 살펴보자!

 <div className="userPw">
          <p>비밀번호</p>
          <input
           class="users_id"
           name="loginPw"
           type="password"
           onBlur={this.handlePw}
           onChange={this.handleChange}
          />
      <RiLock2Fill className={pwcheck ? "active" : "openLock"} />
              </div>
              <span className="pwCheck">
                {pwcheck &&
                  "8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요."}
              </span>

마찬가지로 onBlur 아웃 포커싱 이벤트를 사용 !

<RiLock2Fill/>콤포넌트 가 아니다.
리엑트에서 제공하는 아이콘 라이브러리 를 사용

className을 두개를 주고 삼항연산식을 이용했다.
클래스네임을 두개를 선언 하는게 잘 생각이 나지 않아서 구글링을 통해 배웠다! ㅎㅎ

pwcheck 가 false일 경우에 경고 문구가 나와야 하기 때문에
active 속성을 color:red 를 줬고 openLock은 기본 색상이다.

💥 일치하지 않을 경우:

🔑 재확인 성공 !

profile
Frontend Developer

1개의 댓글

comment-user-thumbnail
2021년 3월 21일

정규식 왜케 무서워요..담호님만 믿겠습니다😇

답글 달기