🔧 기술 스택
- react
- emotionjs
✨ 로그인
로그인 기능을 구현할 것이다.
- 입력창에 focus 될 경우에 선의 색이 변한다.
- 이메일과 비밀번호를 입력하면
로그인버튼이 활성화 된다. 입력되지 않은 입력창이 있거나, 이메일 주소를 입력하지 않으면 버튼은 활성화되지 않는다. - 로그인 버튼을 클릭하면 로그인에 대한 유효성 검사를 진행하며, 이메일 주소나 비밀번호가 일치하지 않을 경우 경고 문구가 나타난다.
입력창에 focus 될 경우 스타일 추가
입력창에 focus 될 경우에 선의 색이 변한다.
const Input = styled.input`
&:focus {
border-color: ${PALLETS.ORANGE};
}
`;:focus 의사 클래스는 포커스 받은 요소를 나타낸다. 사용자가 요소를 클릭 또는 탭, 또는 키보드 tap 키로 선택하였을 경우 발동한다. input:focus 속성을 사용해 border-color를 바꿔주었다.
유효성 검사 및 버튼 활성화
이메일과 비밀번호를 입력하면 로그인 버튼이 활성화 된다. 입력되지 않은 입력창이 있거나, 이메일 주소를 입력하지 않으면 버튼은 활성화되지 않는다.
이메일 주소 유효성 검사
유효성 검사란, 서버로 데이터를 제출하기 전에 포함되어야 할 정보들이 올바른 형식인지 입력 조건에 잘 맞게 입력되어있는 지 확인하는 것이다.
input태그의 type과 required 속성을 활용해도 되지만 버튼 활성화/비활성화 시 스타일도 추가하려고 하기 때문에 정규표현식을 사용하여 이메일 주소 유효성 검사를 진행할 것이다.
const checkEmail =
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;먼저 이메일 주소 형식을 검사하는 정규표현식을 만든다.
RegExp.prototype.test()
const handleIdInput = (event) => {
setEmail(event.target.value);
};
const handlePwInput = (event) => {
setPw(event.target.value);
};
<Fieldset>
<Label htmlFor="id">아이디</Label>
<Input required id="id" type="email" onChange={handleIdInput} />
</Fieldset>
<Fieldset>
<Label htmlFor="password">비밀번호</Label>
<Input
required
id="password"
type="password"
onChange={handlePwInput}
/>
<Error display={error ? 1 : 0}>
*이메일 또는 비밀번호가 일치하지않습니다.
</Error>
</Fieldset>
<Btnsubmit
disabled={!(checkEmail.test(email) && pw.length > 5)}
type="button"
onClick={submitLogin}>
로그인
</Btnsubmit>test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false 로 반환한다. 버튼 태그의 disabled 속성을 활용해, (1)앞서 만들었던 이메일주소정규표현식을 test하고 (2)비밀번호의 길이가 5자가 넘는 지 확인한다. 이 때 논리곱연산자 && 와 함께 단축평가를 사용했다.
이메일 주소를 입력하고, 비밀번호를 6자 이상 입력해야 로그인버튼이 활성화되는 것을 볼 수 있다.
로그인 실패 시 경고문구
🐛 Warning: Received false for a non-boolean attribute display.
const [error, setError] = useState(false);
const submitLogin = async () => {
try {
....
}
} catch (err) {
setError(true);
console.log(err);
}
};
<Error display={error}>
*이메일 또는 비밀번호가 일치하지않습니다.
</Error>
const Error = styled.strong`
display: ${(props) => (props.display ? 'block' : 'none')};
`;
다음과 같은 에러를 만났다. 요약하면 boolean 값이 허용되지 않는 속성이니 string 형태로 값을 넣어달라는 것이다.
styled-components 깃헙에서 위와 같은 코멘트를 발견하였고, 이를 참고하여 코드를 수정했다.
//수정 전
<Error display={error}>
*이메일 또는 비밀번호가 일치하지않습니다.
</Error>
//수정 후
<Error display={error ? 1 : 0}>
*이메일 또는 비밀번호가 일치하지않습니다.
</Error>📸 기능 구현 화면
로그인 버튼 활성화
로그인 에러
로그인 성공
🔗 참고링크
https://developer.mozilla.org/ko/docs/Web/CSS/:focus
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
https://velog.io/@m-vault/%ED%8F%BC%EA%B3%BC-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC#%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC
https://github.com/styled-components/styled-components/issues/1198
