[쉘위헬스] 회원가입 기능 구현

회원가입 기능 구현

홈페이지의 제일 기본인 회원가입 기능을 맡게 되었다.
지난 두 프로젝트에서 한번도 맡지 않았던 기능이기도 하였고,
Nodemailer를 이용한 메일인증기능이여서 자처하여 회원가입 기능을 구현하게 되었다
시작 전에는 간단할 거라 생각했지만 구현하다보니 생각했던 것보다 로직이 복잡하다는 생각이 들었다

회원가입에 필요한 정보

1. 닉네임 (이름사용X) state
2. Email (메일 인증 사용) state
3. 패스워드 state
   • 패스워드확인(check) state

확인해야하는 경우

1. 정규표현식 유효성 검사 (닉네임,이메일,패스워드)
2. 이전 가입자와 중복확인 (닉네임,이메일)

이메일

• 이메일 값이 없을 때
  • 아무런 액션도 발생되지 않음
• 유효성 검사가 통과되지 않았을 때
  • 이메일 형식이 올바르지 않습니다
• 통과가 되지 않았는데 중복확인을 눌렀을 때
  • 이메일 형식이 올바르지 않습니다(고정) (액션X)
• 유효성 검사 통과해야 중복확인 버튼 클릭
  • 사용가능한 이메일입니다
  • 가입된 이메일입니다

닉네임

• 닉네임 값이 없을 때
  • 아무런 액션도 발생되지 않음
• 유효성 검사가 통과되지 않았을 때
  • 닉네임 형식이 올바르지 않습니다
• 통과가 되지 않았는데 중복확인을 눌렀을 때
  • 닉네임 형식이 올바르지 않습니다(고정) (액션X)
• 유효성 검사 통과해야 중복확인 버튼 클릭
  • 사용가능한 닉네임입니다
  • 사용중인 닉네임입니다

비밀번호

• 유효성 검사 통과
• 비밀번호 와 비밀번호 확인이 일치하거나 불일치 할 시에 값 변경
• 둘 중 한개의 값만 변경되어도 비밀번호,비밀번호 확인 두 값이 확인되어야 함

모듈객체 생성 후 정규표현식 유효성 검사

회원가입 뿐 아니라 마이페이지-내정보수정 , 홈-비밀번호찾기 에서 사용 될 정규표현식을
모듈객체로 만들어서 사용하도록 했다

module.exports = {

verifyNickname: (nickname) => {
  //입력되는 글자 수 확인 후 유효성 검사
  // (1)글자수 제한 (2~8)  
  //(2) 한글 영어 숫자
  //(3) 특문불가
  
  let nickLength = 0;

  for (let i = 0; i < nickname.length; i++) { //한글은 2, 영문은 1로 치환 
    let nick = nickname.charAt(i); //입력 된 한글자 가져오기
    if (escape(nick).length > 4) { // 한글자 가져온게 한글이라면  (한글이면 length 6나옴)
      nickLength += 2;
    } else {
      nickLength += 1;
    }
  }

  if (nickLength > 3 && nickLength < 21) {
    const regex = /^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|\s]*$/;
    return regex.test(nickname)
  } else {
    return false
  }
},

charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다.
escape() 함수는 특정 문자가 16진수 이스케이프 시퀀스로 대체된 새 문자열을 계산합니다.
test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다

  verifyEmail: (email) => {
    const regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;  // eslint-disable-line
    return regex.test(email)
  },

  verifyPassword: (password) => {
    const regex = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,15}$/;
    return regex.test(password)
  },

}

기억하고 싶은 코드

  const [inputInfo, setInputInfo] = useState({ nickname: '', email: '', password: '', pwConfirm: '', });
// input onChange 이벤트핸들러 
  const handleInputChange = (e) => {
    const { name, value } = e.target; // 각 input 태그에 name으로 값을 지정해주어서 한가지 inputChagne 함수로 state value 업데이트
    setInputInfo({ ...inputInfo, [name]: value });
    setCheckMsg({ ...checkMsg, signUp: '' }); // 입력이 들어올 수 singup 문구 초기화
  };

마치며,

checkmsg State를 만들어서 경우에 따라 값을 변경해주면서 아래와 같이 메세지를 띄워주는 방식으로 구현하였었는데

<div className={passwordValid ? 'message check' : 'message err'}>{checkMsg.password}</div>

비밀번호와 비밀번호 확인 체크부분에 값이 원하는대로 메세지가 바뀌지 않아서
원하는 대로 메세지가 출력이 되지 않았다

useEffect(() => {
    handlePassword();
  }, [input.password])
//useEffect로 값이 입력 될 때마다 핸들함수 실행하기 

혼자 며칠동안 어떻게 해야할지 틈틈이 생각하다가 해결하지 못해서 팀원분하고 상의해보았는데
valid값으로 분기를 나눠주면 될거같다는 의견을 주셔서 그대로 코드를 변경했더니
원하는 대로 출력이 잘 되었다! 비록 원하는 방식으로는 해내지못했지만..
막힐때는 조언을 구하는 방법도 역시 좋은 해결책이 될 수 있다는 걸 다시 한번 느끼게 되었다

회원가입 기능을 구현하면서 생각해야 하는 경우의 수가 많다는 걸 느끼게 됐고 회원가입 파트를 맡기를 잘했다는 생각이 들었다 ㅎ_ㅎ 남은 기능도 잘 마무리해야겠다