[이민서] Sprint4

[LMS10]

요구사항

기본

로그인

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

심화

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

주요 변경사항

• 로그인 및 회원가입 유효성 검사 추가
• 이벤트 리스너 제거 함수 추가
• 비밀번호 표시/숨기기 아이콘 토글 기능 추가

스크린샷

• 로그인

• 회원가입

멘토에게

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

[kich555]

고생하셨습니다~!

[kich555]

window.location.href = "/index.html" 를 사용하면 어차피 새로운 페이지로 넘어가면서 기존 페이지의 스크립트와 이벤트 리스너는 자동으로 해제됩니다. 때문에 removeEventListeners()를 굳이 할 필요가 있을까? 싶긴 하네요 ㅎㅎ

하지만 연습이라는 의미에서는 좋습니다~

[kich555]

🙋 지금 함수도 나쁘진 않은데요 ㅎ 아래와 같이 코드를 데이터로 추상화하여 로직을 일반화하고, 데이터만 변경하여 동작을 조절할 수 있게 한다면 보다 유연하고 가독성도 좋은 코드가 될 수 있지 않을까요 ㅎ

function removeEventListeners() {
  const inputs = [
    { element: emailInput, events: ["focusout"], handler: checkEmailValidity },
    { element: nicknameInput, events: ["focusout"], handler: checkNicknameValidity },
    { element: passwordInput, events: ["focusout", "input"], handler: checkPasswordValidity },
    { element: passwordConfirmationInput, events: ["focusout", "input"], handler: checkPasswordConfirmationValidity },
  ];

  inputs.forEach(({ element, events, handler }) => {
    if (!element) return;
      events.forEach((eventType) => {
        element.removeEventListener(eventType, handler);
      });
  });
}

[kich555]

이런 부분은 커밋 이름인 feat(auth): 비밀번호 표시/숨기기 아이콘 토글 기능 추가 과 연관성이 없고 사전에 self-review를 진행했다면 나오지 않을 불필요한 변경점 인 것 같아요 ㅎ

뭐 크리티컬하게 문제가 있는 부분은 아니긴한데 커밋을 잘 통제할 수 있도록 git 다루는 연습을 미리 해두시면 좋을것 같아요!

[kich555]

HTML에서 이렇게 data- 속성을 지정하면 js에서 이렇게 간편하게 쓸 수 있어요~

<button class="password-toggle-button"
  data-visible-icon="/images/icons/eye-visible.svg"
  data-invisible-icon="/images/icons/eye-invisible.svg"
  data-visible-alt="비밀번호 표시 상태 아이콘"
  data-invisible-alt="비밀번호 숨김 상태 아이콘">
  <img class="password-toggle-icon" src="/images/icons/eye-invisible.svg" alt="비밀번호 숨김 상태 아이콘">
</button>

JS

 // 데이터 속성에서 아이콘 및 대체 텍스트 가져오기
  const visibleIcon = button.dataset.visibleIcon;
  const invisibleIcon = button.dataset.invisibleIcon;
  const visibleAlt = button.dataset.visibleAlt;
  const invisibleAlt = button.dataset.invisibleAlt;