파이널 프로젝트 6,7일차(21-11-27/28)
유효성 검사
회원가입 유효성 검사
글자수 제한, 형식 제한 등의 양식에 관한 약속은 유효성 검사 처리로 프론트 쪽에서 담당하고, 비밀번호가 일치하지 않음, 입력하지 않은 input등의 논리적인 오류는 백엔드에서 처리를 하기로 했습니다.
회원가입에는 닉네임, 이메일과 비밀번호가 들어간다. 이들에 대한 유효성 검사를 어떻게 진행하면 좋을지 알아보았습니다.
정규식(regex)
: 문자열에서 특정한 문자를 찾아내는 도구
- regular expression의 약자.
regex===정규식===정규표현식
정규표현식을 한 문장으로 정의하면 문자열에서 특정한 문자를 찾아내는 도구입니다. 이를 이용하면 수십 줄이 필요한 코딩 작업을 간단하게 한두 줄로 끝낼 수 있습니다. 정규표현식은 특정한 규칙을 갖는 문자열로 이루어진 표현식이며, 정규표현식에서 특수 문자는 각각의 고유한 규칙을 갖고 있습니다. 우리는 이러한 규칙들을 조합하여 원하는 패턴을 만들고, 특정 문자열에서 해당 패턴과 대응하는 문자를 찾을 수 있습니다.
[출처] 유어클래스 '코딩테스트-준비' 단원 self-guided-lesson 中
[출처] mdn - 정규표현식
[출처] velog - 회원가입 페이지 만들기
📖 무엇을 공부했나요
정규식 문법
[a-zA-Z0-9]- a~z, A~Z, 0~9에 속하는 것을 찾습니다
[^a-zA-Z0-9]- a~z, A~Z, 0~9에 속하지 않은 것을 찾습니다
?- 없거나 있거나(zero or one)
*- 없거나 있거나 많거나(zero or more)
+- 하나 또는 많이(one or more)
^a- 맨 앞글자는 무조건 a로 시작
a$- 맨 뒷글자는 무조건 a로 끝
[출처] youtube - 정규표현식 , 더이상 미루지 말자 🤩
닉네임 유효성 검사
- 닉네임 규칙은 한글, 영문(대/소), 숫자 4-12자리 내로 입력하는 겁니다.
- 정규식으로 나타내면 다음과 같습니다.
const testNickname = /^[a-zA-Z0-9_-]{4,12}$/;⛔️ 에러 핸들링
: 에러메시지가 화면상에 적재적소에 나타나지 않는 현상
// 닉네임 핸들링 함수
const handleInputNickname = (e) => {
setJoinInfo({ ...joinInfo, [e.target.name] : e.target.value });
const { nickname } = joinInfo;
const testNickname = /^[a-zA-Z0-9_-]{4,12}$/;
if (!testNickname.test(nickname)) {
setNicknameMessage('한글, 영문(대/소), 숫자 4-12자리 내로 입력해주세요.');
} else {
setNicknameMessage('');
}
};- 백스페이스를 누른 경우 true로 처리되는 현상 발생
- 글자수를 4-12자리 내로 입력받아야 하는데, {4,12}가 아닌 {3,11}로 해야 처리가 되고 이 마저도 적재적소에 에러메시지가 나오지 않음
- 구조분해할당한 변수 대신, e.target.value를 유효성검사의 test 메소드 대상으로 설정했더니 해결됐다.
// 닉네임 핸들링 함수
const handleInputNickname = (e) => {
setJoinInfo({ ...joinInfo, [e.target.name] : e.target.value });
const testNickname = /^[a-zA-Z0-9_-]{4,12}$/;
if (!testNickname.test(e.target.value)) {
setNicknameMessage('한글, 영문(대/소), 숫자 4-12자리 내로 입력해주세요.');
} else {
setNicknameMessage('');
}
};이메일 유효성 검사
-
이메일의 규칙은 다음과 같습니다.
____________@_____.___
-
이 형식을 정규식으로 나타내면 다음과 같습니다.
let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;⛔️ 에러 핸들링
:각 인풋창의 에러메시지가 나오는 경우, 화면이 아래로 밀려, 버튼이 Block 밖으로 밀리는 현상
- 에러메시지를 관리하는 Message 컴포넌트에
position: absoulte;속성을 부여하고 - 부모인 className이
auth-input-box인 div 태그에position: relative;속성을 부여했습니다.
RTK(redux toolkit)
-파이널 프로젝트땐, 리덕스 툴킷을 사용하기로 했기에 주말을 이용해서 공부를 해보기로 했습니다.
📖 무엇을 공부했나요
RTK란?
: 리덕스를 더 쉽게 사용하기 위한 도구 모음
- Redux-Tool-Kit의 약자
RTK 설치
# Redux + Plain JS template
npx create-react-app . --template redux.- 프로젝트명을 적는 위치에
.을 기재하면, 현재 위치에 cra를 설치할 수 있습니다.
- 프로젝트명을 적는 위치에
공식문서 읽는 방법
- 처음부터 쭉 읽는다. 건너뛰면서 읽지 않는다.
- API Reference부터 읽지 않는다.
RTK 공식문서 읽어본 파트
RTK 예제 실습
npm init
: 해당 폴더를 node가 관리할 수 있게 만들어줌
npm initpackage.json파일이 생깁니다.
npm i redux
npm i redux{
"name": "1.redux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"redux": "^4.1.2"
}
}
References
