[이준영] sprint4

[wns2077681]

요구사항

기본

로그인

• 이메일 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 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다

심화

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

주요 변경사항

• 로그인, 회원가입 페이지의 js파일을 auth.js로 통합시켰습니다.
• 각 input에 유효성 검사를 한 후 에러 메세지를 출력하는 기능을 추가했습니다.
• auth 버튼 활성화, 비밀번호 숨김 처리 버튼의 구현을 새로 했습니다.

멘토에게

• 이번주 코드리뷰도 잘부탁드립니다 ㅎㅎ..^^

[Lanace]

너무 깔끔하게 잘 작성해주신것같습니다...!

고생 많으셨어요ㅋㅋ!

[Lanace]

오... 이건 좀 놀라긴 했네요...!
삭제된거까지 같이 없애주는거 정말 좋은 습관이에요!

더이상 사용하지 않는 스타일 코드는 삭제해주시는게 좋거든요
놓치기 쉬운건데 꼼꼼하게 잘 챙겨주셨네요ㅎㅎ

[Lanace]

error-message 의 display 기본값을 none으로 하기엔 아래 .hide 스타일로 처리할 수 있을것같아서

저라면 error-message는 display를 초기값으로 그대로 두고, hide를 넣었다 뺐다 해서 화면에 노출시킬것같아요ㅎㅎ

[Lanace]

물론 src 에 있는 값을 통해 현재 상태를 구분해서 처리할 수 있어요ㅎㅎ!

틀린코드는 아닌데, 관리하기가 어려울것같아요.

ex) 이미지 아이콘이 변경된경우나 이미지 파일명이 변경된 경우에 까먹지 않고 auth.js 파일에 와서 변경된 부분을 같이 수정해주어야 하거든요.

만약

if (pwInput.type === "text") {
    e.target.setAttribute('src', '/images/login/pw-eye-btn-on.png');
    pwInput.setAttribute('type', 'text');
} else {
    e.target.setAttribute('src', '/images/login/pw-eye-btn-off.png');
    pwInput.setAttribute('type', 'password');
}

이렇게 해주면 굳이 이미지 경로를 알 필요까진 없을거에요ㅎㅎ!
(물론 지금도 잘 동작합니)

[Lanace]

authBtnStatusChange 를 위쪽에서 사용하는데 authBtnStatusChange 함수는 아래에 정의가 되어있어요.

컴퓨터는 코드를 위에서부터 아래로 코드를 읽는데 authBtnStatusChange 가 정의되지 않은 상태에서도 authBtnStatusChange 함수를 찾아갔어요...!

이런 현상을 호이스팅 이라고 하는데, 한번 이번기회에 찾아보시면 좋을것같아요ㅎㅎ!

만약 function () 으로 함수를 생성하지 않고 const = () => {} 로 생성하셨으면 문제가 생겼을 수 있어요ㅠ

https://f-lab.kr/insight/understanding-javascript-hoisting?gad_source=1&gclid=CjwKCAiA3Na5BhAZEiwAzrfagJ1psdHlDMPqI8fbVhX535mvrKXKKUfd7u88RYF1sp-uVFzCioW6DxoC_ZQQAvD_BwE

[Lanace]

와 이거 너무 잘하셨는데여ㅋㅋㅋ

공통적으로 반복되는 부분들을 이런식으로 뺴고 재사용을 많이 합니다...!

[Lanace]

조금더 개선한다고 하면 이러한 부분들을 직접 스타일 조정하기보단 class로 처리해주시는게 좀더 좋긴 해요...!

inline style이 그다지 좋진 않거든요ㅠ

나중에 규모가 커지면 어디서 어떻게 바뀐건지 추적하기가 어려워져요ㅠ

[Lanace]

네이밍도 좀더 좋은것같네요ㅎㅎ

[Lanace]

이렇게 각각의 에러 상황을 표시해주는것도 좋지만 하나만 만들어두고 innterText를 바꾸는 식으로 접근하는건 어떨까요?

왜냐하면 이렇게 되어있으면 실수로 동시에 2개의 에러 메시지가 나올 가능성도 있기도 하고, DOM이 조금 지저분해질 수 도 있어서요ㅠ

물론 지금은 규모가 작기도 해서 괜찮지만요ㅎㅎ