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
setState
로state
값을 업데이트 시켜준다
정규식에 따른 값을 제대로 입력 하면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>
기본 색상에서 틀릴 경우 틀렸다라는 문구와 동시에
아이콘도 레드색상으로 바뀌는 것을 구현 했다.
코드 리뷰를 보자!
비밀번호 공백일 경우와 비밀번호 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은 기본 색상이다.
정규식 왜케 무서워요..담호님만 믿겠습니다😇