들어가며

느닷없이 8일차다. 파이널 프로젝트 기준으로 8일차가 지났으니 8일차부터 쓰려고 한다. 7일차는 어제 Redux 정리한 글로 퉁쳤다. 12시가 지난 오늘. 12월이 됐다. 여름에 부트캠프를 시작해서 벌써 12월이라니. 바깥이 어떻게 돌아가는지도 모르는채 오랜시간 수련했다. 이전엔 코딩이라는 단어를 들으면 막연한 느낌이 들었는데 이제는 확실하게 손에 잡히는 듯하다. 벌써 12월이구나.

비동기 & 유효성 검사

1초를 기다리고 검사하는 작업을 또 진행했다. 이전에 한 번 경험해서 더 빨리 적응했다. 언제 promise를 넘겨주는지 찾아내고 async/await를 적절히 배치하니까 금방 해결했다.
우리 프로젝트 시그니쳐인 1초 기다리고 유효성 검사도 그대로 가져왔다.

1초 기다리고 유효성 검사

  const handleInputValue = (key) => (e) => {
    const inputKey = e.target.value;
    setSignUpInfo({ ...SignUpInfo, [key]: inputKey });
    clearTimeout(timeWait.current);
    timeWait.current = setTimeout(async () => {
      if (key === 'email') setErrorMessage({ ...errorMessage, email: await isValidEmail(inputKey) });
      else if (key === 'nickname') setErrorMessage({ ...errorMessage, nickname: await isValidNickname(inputKey) });
      else if (key === 'password') setErrorMessage({ ...errorMessage, password: isValidPassword(inputKey) });
      else if (key === 'confirm') setErrorMessage({ ...errorMessage, confirm: isValidPasswordConfirm(SignUpInfo.password, inputKey) });
    }, 500);
  };

일괄 검사

  // * Submit 버튼 클릭
  const handleSignUp = async () => {
    const { email, nickname, password, confirm } = SignUpInfo;

    // * 유효성 처리
    const errorResult = await isValid(SignUpInfo);
    setErrorMessage(errorResult);

    // * 서버 통신
    // console.log(SignUpInfo);
    const serverResult = await signUpRequest();
    if (serverResult) console.log('hi!');
    else console.log('error!');
  };

유효성 검사

const isConflictEmail = async (email) => {
  return await axios
    .post(`${process.env.REACT_APP_SERVER_ADDR}/user/isValid`, { email: email })
    .then((res) => {
      return false;
    })
    .catch((err) => {
      return true;
    });
};