글자수 제한, 형식 제한 등의 양식에 관한 약속은 유효성 검사 처리로 프론트 쪽에서 담당하고, 비밀번호가 일치하지 않음, 입력하지 않은 input등의 논리적인 오류는 백엔드에서 처리를 하기로 했습니다.
회원가입에는 닉네임, 이메일과 비밀번호가 들어간다. 이들에 대한 유효성 검사를 어떻게 진행하면 좋을지 알아보았습니다.
: 문자열에서 특정한 문자를 찾아내는 도구
regex
=== 정규식
=== 정규표현식
정규표현식을 한 문장으로 정의하면 문자열에서 특정한 문자를 찾아내는 도구입니다. 이를 이용하면 수십 줄이 필요한 코딩 작업을 간단하게 한두 줄로 끝낼 수 있습니다. 정규표현식은 특정한 규칙을 갖는 문자열로 이루어진 표현식이며, 정규표현식에서 특수 문자는 각각의 고유한 규칙을 갖고 있습니다. 우리는 이러한 규칙들을 조합하여 원하는 패턴을 만들고, 특정 문자열에서 해당 패턴과 대응하는 문자를 찾을 수 있습니다.
[출처] 유어클래스 '코딩테스트-준비' 단원 self-guided-lesson 中
[출처] mdn - 정규표현식
[출처] velog - 회원가입 페이지 만들기
[a-zA-Z0-9]
[^a-zA-Z0-9]
?
*
+
^a
a$
[출처] youtube - 정규표현식 , 더이상 미루지 말자 🤩
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('');
}
};
// 닉네임 핸들링 함수
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 밖으로 밀리는 현상
position: absoulte;
속성을 부여하고 auth-input-box
인 div 태그에 position: relative;
속성을 부여했습니다.-파이널 프로젝트땐, 리덕스 툴킷을 사용하기로 했기에 주말을 이용해서 공부를 해보기로 했습니다.
: 리덕스를 더 쉽게 사용하기 위한 도구 모음
# Redux + Plain JS template
npx create-react-app . --template redux
.
.
을 기재하면, 현재 위치에 cra를 설치할 수 있습니다.: 해당 폴더를 node가 관리할 수 있게 만들어줌
npm init
package.json
파일이 생깁니다.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"
}
}