4주차 과제는 다음과 같았다.
나는 조회, 추가, 삭제까지는 무난하게 했으나..
수정에서 매우 어려움을 겪었다. 내 손으로 해결하진 못했지만 팀원의 도움을 받아 과제는 완성하였다.
하지만 배포에서 또 문제가 생겼다. heroku에서의 오류인데 도저히 해결할 수가 없어서 포기했다.
4주차를 끝내며,
스스로 많이 부족한것 같아서 홀로 회원가입 및 로그인 기능을 서버와 통신하는 것으로 만들어 보기 시작했다.
온갖 패기지를 다운 받는 고초를 겪으며.. 우여곡절 끝에 시작했는데..
가장 쉽다고 생각했던 Post에서 바로 막혀버렸다..
계속해서 500 error가 뜨는데 서버도 다 켜져있고, url 오탈자도 없었는데 왜 서버오류가 뜨는지 의문이었다.
그러다가 Stackoverflow에서 발견한 해결법 ..
나는 json db에 id값을 설정 안해주면 자동으로 1,2,3,4,... 지정해주는 줄 알았는데 아니었다.
id값에 0을 기본값으로 주니깐 바로 작동이 잘 되었다.
정말 완벽하게 알고 있다고 생각해도 이런 예기치 못한 오류가 발생하는 걸 보면 ,,
아직 한참 멀었다고 느껴진다.
회원가입에서 유효성 검사 기능을 만들려고 하는데, 어떻게 해야 형식에 맞지 않으면 데이터를 보내지 않게 할까 고민을 하다가 button에 disabled를 줘서 간신히 완료.
유효성 검사부분을 만드는데도 상당히 애를 먹었는데, 삼항연산자를 쓰지 않고 하는 방법이 없을까 고민하다가
onFocus 나 onBlur를 생각해봤지만 구현에 실패했다.
결국 삼항연산자 범벅으로 만들어 버린 코드..
import React,{useState, useRef} from "react";
import { useDispatch } from "react-redux";
import { signupThunk } from "../module/reducer/signupSlice";
const Signup = () => {
const dispatch = useDispatch();
const [info, setInfo] = useState({
name:"",
userId:"",
userPassword:"",
userPasswordConfirm:"",
birth:"",
email:""
});
let [disabled, setDisabled] = useState(true)
const onChange = (event) => {
const {name, value} = event.target;
setInfo({...info, [name]:value})
};
const onSubmit = (event) => {
event.preventDefault();
dispatch(signupThunk(info));
};
const passwordRegEx = /^[A-Za-z0-9]{8,20}$/
const passwordCheck = (password) => {
if(password.match(passwordRegEx)===null) {
return;
}else{
}
}
const birthRegEx = /([0-9]{2}(0[1-9]|1[0-2])(0[1-9]|[1,2][0-9]|3[0,1]))/
if ((info.userPassword.match(passwordRegEx)) && (info.birth.match(birthRegEx)) !== null
&& info.userPassword === info.userPasswordConfirm) {
disabled = false
}
const birthCheck = (birth) => {
if(birth.match(birthRegEx)===null) {
return;
}else{
}
}
return (
<div>
<form onSubmit={onSubmit}>
이름<input onChange={onChange} maxLength={8} name="name" type="text"/> <br/>
아이디<input onChange={onChange} maxLength={16} name="userId" type="id"/> <br/>
비밀번호<input onChange={onChange} name="userPassword" type="password"/> <br/>
{info.userPassword.match(passwordRegEx) ?
<p style={{fontSize:"12px", color:"green"}}>✓</p>
:
<p style={{fontSize:"12px", color:"tomato"}}>비밀번호 형식을 확인해주세요(8~20자)</p>}
비밀번호확인<input onChange={onChange} name="userPasswordConfirm" type="password"/> <br/>
{(info.userPassword !== info.userPasswordConfirm) ?
<p style={{fontSize:"12px", color:"tomato"}}>비밀번호가 일치하지 않습니다</p>
:
<p style={{fontSize:"12px", color:"green"}}>✓</p>}
생년월일<input onChange={onChange} name="birth" type="text"/> <br/>
{(info.birth.match(birthRegEx))?
<p style={{fontSize:"12px", color:"green"}}>✓</p>
:
<p style={{fontSize:"12px", color:"tomato"}}>"숫자 6자리만 입력해주세요 (ex.940303)"</p>}
이메일<input onChange={onChange} name="email" type="email"/> <br/>
<button disabled={disabled}>회원가입</button>
{console.log(disabled)}
</form>
</div>
)
}
export default Signup;내가 설정한 형식에 맞춰서 작성하지 않으면 버튼이 disabled={true}로 되어있기 때문에 제출 자체가 불가능하다.
아래는 위 방법이 좋은 처리방법만은 아닌것 같아서 추후에 Back과 협력하여 새로 만든 로직이다.
불필요한 부분은 제외하고 핵심적인 부분만 말하자면.
const onClickSubmitHandler = (event) => {
dispatch(signUpThunk(signUpInfo))
if((signUpInfo.userName.match(userNameRegEx) !== null)
&& (signUpInfo.password.match(passwordRegEx) !== null)
//유효성
&& (signUpInfo.password === signUpInfo.passwordCheck)
//비밀번호와 비밀번호 확인 일치
&& (signUpInfo.email.match(emailRegEx) !== null )
//유효성
&& (emailCheck >= 1)
//중복버튼을 누르도록 지시
)
{
return navigate('/')
}
};중복 확인 버튼을 만들어서 Back과 연동하여 중복을 걸러낼 수 있게 하였고,
위 항목들에 의해 제출되면 메인페이지로 돌아가는 로직이다.
처음에는 내가 유효성 검사 + Post 제어 로직까지 구현했다면, 이번에는 Back과 협력하여 불필요한 Post를 막고(Back에서) 나는(Front) 결격사유가 없는 데이터인 경우에 회원가입 완료창과 함께 메인페이지로 돌아가게 만들어주었다.
아래는 참고 영상이다
