[엄세환] sprint4

[BossTeemo]

요구사항

기본

netlify배포링크입니다.

로그인

• 이메일 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” 로 이동합니다

---

심화

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

---

주요 변경사항

• sprint1에서 작성한 코드를 모범답안을 참고하여 수정하였습니다.
• 앞서 제출하지 못했던 sprint2와 sprint3도 모범답안을 참고하여 수정하였습니다.
• sprint4의 구현사항을 모두 구현했습니다.
• signin.js, signup.js, validation.js를 작성하였습니다.
• validation.js에서 signin.js와 signup.js에서 중복되는 코드를 구현하여 모듈로 사용했습니다.

---

스크린샷

멘토에게

• 금요일부터 구현을 시작했는데, 구현하는 데에 시간이 많이 걸려 제출이 늦어졌습니다. 죄송합니다ㅠㅠ

[JaeSang1998]

세환님 너무 잘하셨어요!!

다음번이 기대가 됩니다 :)

[JaeSang1998]

각 페이지 마다 메타 tag 를 잘 넣어주셨군요 너무 잘하셨습니다

[JaeSang1998]

global css 에 색상 변수를 정의해서 쓰는거는 매우매우 좋은습관입니다.

[JaeSang1998]

여기 a 태그가 잘못 닫혀있네요.

앞 태그가 / 를 포함하고 있다면 닫아주지 않아도 됩니다!

[JaeSang1998]

특정 동작을 함수로 분리하는 습관은 매우 좋은 습관입니다!

[JaeSang1998]

이렇게 할당을 반복하는 경우 배열에 담아서 every 메서드를 활용하는 방법도 있으니 참고해주시면 좋습니다!

[JaeSang1998]

벌써 모듈을 사용하고 계시군요! 👍

[JaeSang1998]

함수 맨 위에 어떤 값을 반환할지 선언해주는 습관 👍

단순히 result 라는 이름을 써줘도 큰 문제 없습니다!

함수를 마지막에 꼭 안전하게 return 이 되게끔하는 생각과 습관을 유지해주셔야해요!

[JaeSang1998]

단순하게 함수의 동작만을 설명하는 주석은 크게 필요성이 높지 않습니다. 오히려 업데이트되지 않은 주석이 헷갈리게 만들지도 몰라요!

주석은 보다 복잡한 함수에 추가적인 정보를 담거나, docs를 위한 정보를 나열하거나 나의 의도가 필요할때 담아주면 좋습니다!