로그인, 회원가입 구현 어디까지 갔니? Truoble Shooting EP.5

아직 와이어프레임이 안나와서 기능 구현에 힘을 실었다. 처음이다 보니 많이 더욱 더 얼탈줄 알았는데

옆에 멘토같은 리더님이랑 코드를 그래도 조금 써봤다고 전에 CRUD할 때 보다는 많이 성장했다고 느꼈다..

그래도 한참 멀었지만?!

먼저 유효성 검사 코드는 이렇다.

    // 유효성검사
    if (id === "" || pw === "" || nick === "") {
      alert("아이디, 닉네임, 비밀번호를 모두 입력해주세요.");
      return;
    }
    // 이메일 검사: '@', '.' 이 둘다 포함될것.
    const isValidEmail =
      /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if (!isValidEmail.test(id)) {
      alert("이메일 형식이 올바른지 확인해주세요!");
      return;
    }
    // 비밀번호
    if (pw !== pwCheck) {
      alert("비밀번호가 일치하지 않습니다.");
      return;
    }
    const isValidPassword =
      /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[@$!%*#?&])[0-9a-zA-Z@$!%*#?&]{6,10}$/;
    if (!isValidPassword.test(pw)) {
      alert(
        "비밀번호는 6 ~ 10자 영문, 숫자 및 특수문자조합으로 입력해야합니다!"
      );
      return;
    }
    else {
      dispatch(registerA(id, nick, pw, pwCheck));
      navigate("/");
    }
  };

1. 유효성 검사 정규식과 부정문 사용

오늘 점심 쯤에도 유효성 검사를 하다가 이메일 부분에서 막혔었는데 비밀번호는 잘 되는데 이메일만 검사가 안되더라

같은 코드로 짰는데 그래서 정규식을 이것저것 찾다가 제일 많이 겹치는 것으로 찾았고 다시 테스트하는데 안되서 결국 리더님 찾아가서 같이 풀어보는 와중에 @,.com을 안쓰면 회원가입이 되길래 반대다! 했다. 그래서 바로 !isValidEmail 하니까 되어버린다.. 그럼 처음에 정규식 코드를 잘못가져온듯하다 잘못된 정규식 코드에 !를 썼으니 그때 안되던게 당연했던거고 정규식이 맞으니 !를 붙히니 잘 작동된다. 아숩다 아수워. 한 번 써서 안됐다고 코드의 방향을 잃어버리다니 ㅠㅠㅠ 코드를 이해하도록 노력하자 더욱 더 왜 쓰는지.

 

2. axios 서버요청에서 navigate

 

보이는 것과 같이 안에 navigate를 썼었다. 근데 Register.js 앞 페이지 에서도 navigate를 써놔서 위 사진에 있는게 작동되는 줄 알았으나 정작 요청칸에 있는 것은 작동되지 않는다. 그래서 axios가 아닌 요청  페이지에서 boolean 값을 줘서 페이지 이동을 시키기도 하는데 다른 분 코드를 보다가 새로운 것을 발견했다.

window.location.replace("/");

 = 기존 페이지를 새로운 페이지로 변경시킨다. 형태는 메소드, 주소는 기록되지 않는다.

지금은 잘 사용하지만 후에 더 좋은 코드가 있다면 사용해보겠다

 

3. axios - dispatch(인수) 오류

사진을 안찍어놓아 블로그의 오류를 가져왔다.

수정 전 / 후

수정 전 / 후

수정 전에 디스패치를 하는 과정에서 checkLogin 인자를 이상한 data를 받아서 넣는듯이 했었고 그 위에 reducer에서 로그인 post 부분에서 그대로 조회하는 액션을 취했었다. 그걸 post저장에 맞게 push로 바꿔주었고 dispatch는 Login.js에서 받아온 username,password를 저장하도록 인수에 넣어주었다.

 

블로그에 나오는대로 미들웨어를 추가할까 했지만, 더보면 풀 수 있을것같아서 이것 저것 만져보고

Redux의 핵심 사용 원칙 중 하나는 직렬화할 수 없는 값을 state, action에 넣지 않아야 한다는 것입니다. 를 보았다.

직렬화 할 수 없는 값 = 문자열이 아닌것들 즉, 문자열을 넣어줘야한다에서 힌트를 얻어 내가 뭔가를 잘못 넘겨줬구나 해서 찾아보게 되었다. 그 결과 문제해결!

 

 

 

다음은 이제 refresh token에 대해 공부하고 바로 코드 작성을 이어 나가보려한다아~

 

 

 

3. 오류 참고블로그

https://velog.io/@kingyong9169/Redux-Tool-kit-%EC%B4%9D%EC%A0%95%EB%A6%AC

Redux Tool kit 총정리

https://velog.io/@youngminss/WEB-%EC%A7%81%EB%A0%AC%ED%99%94-%EC%97%AD%EC%A7%81%EB%A0%AC%ED%99%94-JS

직렬화 & 역직렬화 ( JS )