[임재은] sprint4

[Lim-JaeEun]

요구사항

기본

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강 테두리와 아래에 “이메일을 입력해주세요.” 에러 메시지를 표시
• 이메일 input에서 focus out 할 때, 이메일 형식이 잘못되었을 경우 “잘못된 이메일 형식입니다” 에러 메시지를 표시
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 “닉네임을 입력해주세요.” 에러 메시지를 표시
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 “비밀번호를 입력해주세요.” 에러 메시지를 표시
• 비밀번호 input에서 focus out 할 때, 8자 미만일 경우 “비밀번호를 8자 이상 입력해주세요.” 에러 메시지를 표시
• 비밀번호 확인 input이 비밀번호와 다를 경우 “비밀번호가 일치하지 않습니다.” 에러 메시지를 표시
• 하나라도 값이 비어있거나 에러가 있는 경우 ‘회원가입’ 버튼은 비활성화
• 모든 입력이 유효한 경우 ‘회원가입’ 버튼이 활성화됨
• 회원가입 버튼 클릭 시 로그인 페이지(/login/index.html)로 이동
• 이메일 input focus out → 값 없음: “이메일을 입력해주세요.” 에러 표시
• 이메일 형식이 잘못된 경우: “잘못된 이메일 형식입니다.” 에러 표시
• 비밀번호 input focus out → 값 없음: “비밀번호를 입력해주세요.” 에러 표시
• 비밀번호 8자 미만일 경우: “비밀번호를 8자 이상 입력해주세요.” 에러 표시
• 하나라도 에러가 있으면 로그인 버튼 비활성화
• 모든 입력이 유효하면 로그인 버튼 활성화
• 로그인 버튼 클릭 시 /items 페이지로 이동

심화

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

주요 변경사항

• 회원가입,로그인 유효성검사
• 코드 리팩토링

스크린샷

• 로그인

• 회원가입

멘토에게

• 코드리뷰해주신 후 바로 머지 부탁드리겠습니다 !
• 감사합니다

[addiescode-sj]

현재 각 입력 필드마다 별도의 이벤트 리스너를 설정하고 있는데, 하나의 이벤트 핸들러로 통합하고 이벤트 위임(Event Delegation) 패턴을 사용하면 코드를 더 효율적으로 만들 수 있을것같아요.

[addiescode-sj]

먼저 폼 설정과 관련된 객체를 만들고, 초기화를 처리해서 관련있는 코드끼리 응집도를 높일수있게 처리해볼까요?

// 폼 설정 객체
const formConfig = {
  email: {
    selector: '#email',
    warningIndex: 0,
    validationType: 'email',
    eventType: 'blur'
  },
  pw: {
    selector: '#pw',
    warningIndex: 1,
    validationType: 'pw',
    eventType: 'input'
  }
};

// 폼 요소 초기화
const formElements = {
  form: document.querySelector('form'),
  warnings: document.querySelectorAll('.warning-text'),
  eyeIcon: document.querySelector('.eye-icon'),
  loginBtn: document.querySelector('.form-btn'),
  fields: {}
};

// 폼 필드 초기화
Object.entries(formConfig).forEach(([key, config]) => {
  formElements.fields[key] = document.querySelector(config.selector);
});

[addiescode-sj]

그리고, 아래와 같이 하나의 이벤트 핸들러에서 위임 방식으로 이벤트를 처리해보면:

// 이벤트 리스너 설정
Object.entries(formConfig).forEach(([fieldName, config]) => {
  const inputEl = formElements.fields[fieldName];
  const warningEl = formElements.warnings[config.warningIndex];
  
  inputEl.addEventListener(config.eventType, () => {
    handleValidation(fieldName, inputEl, warningEl, config.validationType);
  });
});

개별 입력 필드마다 별도의 이벤트 리스너를 설정하지않아도되고,
이런 장점들이 생길 수 있어요.

[addiescode-sj]

개선으로 생길 수 있는 장점들

• 확장성: 새로운 폼 필드를 추가할 때 formConfig에 설정만 추가하면돼서, 확장에 용이해요.
• 각 필드의 설정이 명확하게 구조화되어 있어 유지보수에 용이해요.
• 이벤트 리스너 설정을 하나로 통합해두면, 이후 수정이 필요할 때 한 곳에서만 변경하면 되니까 추적도 쉬워지고 수정에도 용이해요.
• 각 입력 필드의 설정이 명확하게 분리되어 있어 디버깅이 쉬워져요.
• 코드 중복이 줄어들 수 있어요.

[addiescode-sj]

수고하셨습니다!
리뷰하고 바로 머지 요청드린다고 본문에 남겨주셔서,
바로 머지해드릴테니 제가 남겨드린 코멘트는 잘 보시고 나중에 여유되실때 꼭 리팩토링 진행해보세요!

주요 리뷰 포인트

• 유지보수를 고려한 개발

[addiescode-sj]

해당 파일에서도 위 login.js에서 드렸던 피드백 참고해보시고, 리팩토링 진행해볼까요? :)

[addiescode-sj]

각 함수가 적절한 수준으로 모듈화되어있네요. 굳굳! 좋습니다 :)

[addiescode-sj]

먼저 폼 설정과 관련된 객체를 만들고, 초기화를 처리해서 관련있는 코드끼리 응집도를 높일수있게 처리해볼까요?

// 폼 설정 객체
const formConfig = {
  email: {
    selector: '#email',
    warningIndex: 0,
    validationType: 'email',
    eventType: 'blur'
  },
  pw: {
    selector: '#pw',
    warningIndex: 1,
    validationType: 'pw',
    eventType: 'input'
  }
};

// 폼 요소 초기화
const formElements = {
  form: document.querySelector('form'),
  warnings: document.querySelectorAll('.warning-text'),
  eyeIcon: document.querySelector('.eye-icon'),
  loginBtn: document.querySelector('.form-btn'),
  fields: {}
};

// 폼 필드 초기화
Object.entries(formConfig).forEach(([key, config]) => {
  formElements.fields[key] = document.querySelector(config.selector);
});

[addiescode-sj]

그리고, 아래와 같이 하나의 이벤트 핸들러에서 위임 방식으로 이벤트를 처리해보면:

// 이벤트 리스너 설정
Object.entries(formConfig).forEach(([fieldName, config]) => {
  const inputEl = formElements.fields[fieldName];
  const warningEl = formElements.warnings[config.warningIndex];
  
  inputEl.addEventListener(config.eventType, () => {
    handleValidation(fieldName, inputEl, warningEl, config.validationType);
  });
});

개별 입력 필드마다 별도의 이벤트 리스너를 설정하지않아도되고,
이런 장점들이 생길 수 있어요.

[addiescode-sj]

개선으로 생길 수 있는 장점들

• 확장성: 새로운 폼 필드를 추가할 때 formConfig에 설정만 추가하면돼서, 확장에 용이해요.
• 각 필드의 설정이 명확하게 구조화되어 있어 유지보수에 용이해요.
• 이벤트 리스너 설정을 하나로 통합해두면, 이후 수정이 필요할 때 한 곳에서만 변경하면 되니까 추적도 쉬워지고 수정에도 용이해요.
• 각 입력 필드의 설정이 명확하게 분리되어 있어 디버깅이 쉬워져요.
• 코드 중복이 줄어들 수 있어요.