[김교연] Sprint4

[gyoyeon-kim]

요구사항

기본

로그인

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

회원가입

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signin” 로 이동합니다

심화

• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

• header > nav 클래스로 변경

스크린샷

• 로그인
  

• 회원가입
  

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

굿굿 이렇게 하면 로드가 완료된 후 자바스크립트가 실행 되는 것을 보장받을 수 있겠네요 👍👍

[kiJu2]

크으 ~ 순수 함수로 잘 작성된 함수입니다 👍👍

일관된 타입, 일관된 반환값, 외부의 상태를 변경하지 않는 깔끔한 함수입니다 👍

순수함수: 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수

[kiJu2]

별칭(isEmailValid, isPAsswordValid)을 적절히 선언하여 가독성이 너무 좋습니다 ! 👍

[kiJu2]

(참고/선택) 이벤트 객체를 활용해볼 수도 있습니다 !

<input id="text" />

document.getElementById("text")
  .addEventListener("input", (e) => {
    console.log('$$ e', e.target.value);
  
    e.target.style = "background-color: red"
});

이렇게 하면 부가적인 전역 변수 선언을 줄이며 코드를 작성 하는 데에 도움이 될 수 있을거예요 ! 😊

[kiJu2]

1, 2와 같은 의미를 알 수 없는 함수명은 지양하는게 좋아요.

아마 validateConfirmPassword와 같은 의미를 지닌 것으로 보여요.
기존 checkPassword와 다르게 "비밀번호 확인 유효성 검사" 라는 명확한 목표가 있으니 해당 의미를 함수명으로 사용해보는건 어떨까요 ?

[kiJu2]

수고하셨습니다 교연님 !
자바스크립트로 들어오니 미쳐 날뛰는군요 ! 논리에 센스가 있으신 것 같아요.
몇 가지 교연님께 도움이 될만한 코딩에 익숙치 않아서 발생하는 부분들을 피드백하였어요 ㅎㅎㅎ
스프린트 미션 수행하시느라 정말 수고 많으셨습니다 ㅎㅎㅎ

이제 곧 리액트군요 ! 기대가 됩니다 😊😊