[배민지] Sprint4

[minji9029]

요구사항

기본

로그인

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

심화

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

멘토에게

아직 미션 3때 리뷰주신부분들은 수정하지 않았습니다
미션 3에 미션4만 추가해서 올려드립니다!

1. git checkout Basic-배민지
2. git checkout -b Basic-배민지-sprint4
3. git push -u origin Basic-배민지-sprint4

하였습니다

[addiescode-sj]

수고하셨습니다~!

주요 리뷰 포인트

• 유지보수를 고려한 개발
• 함수 네이밍
• 모듈화

[addiescode-sj]

해당 함수는 로그인 버튼의 enabled 상태를 업데이트하는 역할이라 updateButtonState 정도가 적당할것같네요!

그리고 더 개선해보자면 이메일, 비밀번호뿐만 아니라 다른 요소가 폼 필드에 추가될때 해당 함수를 상당부분 변경해야할텐데 좀 더 확장성을 고려해 구조를 바꿔보면 어떨까요?

• 정해진 유효성 검사 규칙대로 요소에 대한 유효성 검사를 수행
• 버튼 UI를 업데이트

이렇게 함수를 분리해볼까요?

[addiescode-sj]

해당 내용이 여러곳에서 중복될 가능성이 커보이고, if 조건문을 여러가지 사용해 코드가 직관적으로 읽히지않는 단점이 있어요.

이렇게 따로 이벤트 리스너를 붙이지않고 아래 예시처럼 관련 요소에 대한 유효성 검사 결과를 알아내고 단순히 UI를 업데이트하는식으로 바꿔보는건 어떨까요?

[addiescode-sj]

• 요소별 유효성 검사 수행

export const validators = {
  email: (value) => {
    if (!value) return { isValid: false, message: "이메일을 입력해주세요" };
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return { isValid: false, message: "올바른 이메일 형식이 아닙니다" };
    }
    return { isValid: true, message: "" };
  },

  password: (value) => {
    if (!value) return { isValid: false, message: "비밀번호를 입력해주세요" };
    if (value.length < 8) {
      return { isValid: false, message: "비밀번호는 8자 이상이어야 합니다" };
    }
    return { isValid: true, message: "" };
  },
};

• 유효성 검사 결과에 따른 UI 업데이트

  if (result.isValid) {
    clearError(inputEl);
  } else {
    showError(inputEl, result.message);
  }

[addiescode-sj]

이렇게 구조를 바꿔보면 이런 장점이 생기겠죠?

• 각 함수가 { isValid, message } 형태로 일관된 형태로 결과를 반환해 코드를 좀 더 예측이 쉽고 안정적인 흐름을 가질수있도록 만들수있습니다.
• 객체를 통한 명확한 매핑을 사용해 조건문을 사용하는것보다 훨씬 코드의 의도를 명확히 드러낼 수 있습니다.
• 각 함수가 독립적이어서 개별적인 동작을 테스트하기쉽고, 수정 및 확장에 용이합니다.
• 재사용 가능한 로직을 쉽게 분리할 수 있습니다.

[addiescode-sj]

이 파일에서도 login.js와 겹치는 로직들의 경우 코드를 중복해서 사용하는것보다는 모듈화해서 사용하면 훨씬 코드가 간결해보일수있겠죠? 다음 미션에서 나오겠지만 미리 알아두는것도 좋을것같아요!

이 아티클 참고해보세요 :)