뉴스피드 팀프로젝트 - 3

---

🧵 CreateAccount 기능 구현

로그인 폼과 기능구현을 완료했으니 이제 회원가입 기능 구현을 해야한다. 폼 자체는 로그인과 크게 다르지 않게 진행할 예정이다. 회원가입에는 createUserWithEmailAndPassword 메서드를 사용해보겠다.

- 회원가입 입력 관리

  const [nickname, setNickname] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onChange = (event) => {
    const {
      target: { name, value }
    } = event;
    if (name === 'email') {
      setEmail(value);
      // 유효성 검사 추가 예정
    }
    if (name === 'password') {
      setPassword(value);
      // 유효성 검사 추가 예정
    }
    if (name === 'nickname') {
      setNickname(value);
    }
  };

이번에도 입력 값 관리를 위해서 useState를 사용하여 이메일, 비밀번호, 닉네임의 입력 값을 상태로 관리한다. email 과 password 는 유효성 검사가 필요하니 변수를 만들어서 추가해보자.

- 회원 가입

  const signUp = async (event) => {
    event.preventDefault();
    try {
      if (password.length < 6 || emailError) {
        alert('비밀번호 혹은 이메일 형식이 올바르지 않습니다.');
        return;
      }

Firebase 에는 createUserWithEmailAndPassword 메서드가 제공되는데 이 메서드는 이메일과 패스워드로 새로운 사용자를 생성한다. 우선 event.preventDefault() 를 사용해서 페이지 새로고침을 막아주고 회원가입을 시도할 때 if 문을 사용해서 6자리 미만일 경우 alert를 통해 사용자에게 에러 메세지를 보여준다.

 const navigate = useNavigate();
      // 초기 회원정보를 따로 cloude db에 저장
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      // await sendEmailVerification(auth.currentUser);
      const uid = userCredential.user.uid;
      const newProfile = { uid, password, email, nickname, taste: [], intro: '' };
      await addDoc(collection(db, 'profile'), newProfile);

      // dispatch(setUserUid(uid));
      // dispatch(setNickname(nickname));
      alert('회원가입이 완료 되었습니다.');
      console.log('user singUp', userCredential);
      navigate('/login');
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log('error with singUp', errorCode, errorMessage);
    }
  };

Firebase의 createUserWithEmailAndPassword를 사용하여 사용자를 생성하고, 생성된 사용자의 정보를 userCredential에 저장한다. 그리고 newProfile 에 새로운 사용자의 프로필 정보를 객체로 생성하고, taste와 intro는 로그인 이후 사용자가 지정해야하기 때문에 초기값으로 빈 배열과 빈 문자열로 추가해준다. addDoc를 활용해서 "profile" 라는 컬렉션에 newProfile 데이터를 넣는다. 추가적으로 useNavigate 를 사용해서 회원가입이 되면 자동으로 로그인 페이지로 이동시켜준다.

---

🚨 발생한 문제 및 해결방안

처음에는 회원가입 시 유효성 검사 기능을 추가하지 않았었다. ( 사실 까먹었다.. )
그래서 유효성 검사를 추가하려 했는데 패스워드 같은 경우는 글자 수가 부족하면 출력시키는거라서 length 를 사용하면 간단했는데 이메일 같은 경우는 어떻게 로직을 구성해야 할지 난감했다. 구글에 서칭해보니 "정규식" 이라는게 있었고, 정규식을 활용하면 이메일 유효성 검사를 할 수 있었다.

  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');

  const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (email === '') {
      setEmailError('');
    } else if (!emailRegex.test(email)) {
      setEmailError('이메일 형식이 올바르지 않습니다.');
    } else {
      setEmailError('');
    }
  };

  const validatePassword = (password) => {
    if (password === '') {
      setPasswordError('');
    } else if (password.length < 6) {
      setPasswordError('비밀번호는 최소 6글자 이상이어야 합니다.');
    } else {
      setPasswordError('');
    }
  };

validateEmail , validatePassword 라는 변수를 만들고 먼저 이메일, 패스워드가 비어있는 경우 에러 메세지를 빈값으로 두고, if 문으로 조건을 추가한다. 이메일은 emailRegex 변수에 정규식을 넣고 정규식과 일치 하지 않을 경우 에러 메세지를 보여준다. 패스워드도 6자리 미만일 경우 에러 메세지를 보여주도록 코드를 짜봤다. 조건과 일치하는 경우엔 다시 에러 메세지를 빈값으로 만들어 줬다.