[박연희] sprint4

[pyeonh8]

요구사항

기본

로그인

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

심화

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

주요 변경사항

• 피드백 변경

멘토에게

• 미션 4 스크립트 코드를 짜보면서 조언을 얻는 방식으로 AI 활용도 하게 됐는데 그래도 짜는 동안 꽤 시간이 오래 걸리더라고요. AI를 활용해서 공부를 하는 방식에 대해서는 어떻게 생각하시나요?

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 유지보수를 고려한 개발

[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: "" };
  },
};

• 필드 map을 만들어 조건문을 쓰지않고 올바른 유효성 검사를 수행

  const fieldMap = {
    'input--email': 'email',
    'input--nickname': 'nickname',
    'input--password': 'password',
    'input--password-confirm': 'passwordConfirm'
  };
  
  const field = fieldMap[inputType];
  const validator = validators[field];
  
  if (!validator) return;
  
  const result = validator(
    value,
    field === 'passwordConfirm' ? DOM.passwordInput.value : undefined
  );

[addiescode-sj]

• UI 업데이트 (유효성 검사 결과에 따른 에러 상태 표시)

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

[addiescode-sj]

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

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

[addiescode-sj]

초기화 함수를 사용하면 코드의 흐름과 의도를 잘 드러낼수있죠! :) 굳굳

[addiescode-sj]

함수이름은 명사형보다는 동사형으로 지어주는게(동사로 시작하는게) 일반적입니다.

네이밍 컨벤션 참고해볼까요?
참고

[addiescode-sj]

질문에 대한 답변

멘토에게

• 미션 4 스크립트 코드를 짜보면서 조언을 얻는 방식으로 AI 활용도 하게 됐는데 그래도 짜는 동안 꽤 시간이 오래 걸리더라고요. AI를 활용해서 공부를 하는 방식에 대해서는 어떻게 생각하시나요?

초반에 개발자료 채널에 공유드렸던것처럼 AI 활용은 이제 선택이 아닌 필수가 되었다고 생각합니다.
메시지 링크

다만, 학습하실땐 코드를 100% AI가 짜게끔 활용하기보다는 학습하신 내용을 스스로 코드를 짜보는 과정을 통해 충분히 연습해보시면서 현재 코드에 어떤 문제와 장점이 있을수있는지 더블체크하는 용도로 써보시는걸 추천드려볼게요 :)