스파르타코딩 WIL11 - 리액트네이티브 프로젝트

사실 처음 네이티브를 접했을 때는 신기함 반 어려움 반 이였는데, 막상 해보니깐 재미가 있더라구요.
기초적인 실력만 있었다면 이것저것 다양한 것을 만들어 낼 수 있겠다는 생각이 들었네요.

이번 프로젝트는 여러가지 우여곡절이 많았지만 그래도 내 힘으로 스스로 해결한 부분들이 많아서 굉장히 뿌듯한 회차이기도 합니다.

유효성검사를 위한 로그인, 회원가입 페이지

로그인, 회원가입 부분에서는 가장 중요한 부분이 유효성검사가 아닐까 합니다.
특히 사용친화적인 UI/UX를 만들기 위해서 20개개가 넘는 어플을 다운받아서 직접 로그인 및 회원가입을 진행하면서 좋은 점들을 사용해보려고 했습니다.

덕분에 useRef도 원없이 사용해본 것 같네요. 확실히 기초적인 개념을 익히는데는 실습 및 응용을 하는게 최고인 것 같습니다.

로그인
    signInWithEmailAndPassword(authService, email, password)
      .then(() => {
        console.log("로그인 성공");
        setEmail("");
        setPassword("");
        navigate("Tabs", { screen: "Home" });
      })
      .catch((err) => {
        console.log("err.message:", err.message);
        if (err.message.includes("user-not-found")) {
          alert("회원이 아닙니다. 회원가입을 먼저 진행해주세요.");
        }
        if (err.message.includes("wrong-password")) {
          alert("비밀번호가 틀렸습니다.");
        }
      });
  };

역시 파이어베이스는 참 편리한 것 같습니다. 특별한 기능 없이 저렇게 코드를 몇자 적어주면 알아서 서버에 해당 로그인 유저의 UID값이 저장이되니, 따로 설정을 해줄필요가 없네요.

정규식, 유효성 검사
  const handleLogin = () => {
    const matchedEmail = email.match(emailRegex);
    const matchedPw = password.match(pwRegex);

    if (matchedEmail === null) {
      setEmailError(true);
      emailRef.current.focus();
      return true;
    } else {
      setEmailError(false);
    }
    if (matchedPw === null) {
      setPasswordShortError(true);
      passwordRef.current.focus();
      return true;
    } else {
      setPasswordShortError(false);
    }

이번 기회를 통해서 정규식과 유효성 검사에 대해서 더 알아가는 계기가 된 것 같습니다.

회원가입

    createUserWithEmailAndPassword(authService, email, password)
      .then(() => {
        console.log("회원가입성공");
        setEmail("");

        setPassword("");
        setCheckPassword("");
        navigate("Login");
      })
      .catch((err) => {
        console.log("err.message:", err.message);
        if (err.message.includes("already-in-use")) {
          alert("이미 사용중인 아이디 입니다.");
        }
      });
  };