[정수민] sprint4

[suminique]

요구사항

기본

• [x]이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• [x]이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• [x]비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• [x]비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• [x]input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• [x]Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다, 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
• [x]닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• [x]비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다
• [x]input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다. Input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다. 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다

심화

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

주요 변경사항

스크린샷

-[x] 로그인

-[x] 회원가입

멘토에게

• 주석을 삭제해야하는데 깜빡했습니다 죄송해요 다음부터는 삭제하겠습니다!!
• button으로 서밋하고 전송만 되고 사이트 이동시키는 방법이 조금 어려워서 질문이 있습니다 저는 ./items items.html로 했는데 이렇게 하는 방법 말고 다른 방법이 있을까요? 찾아봐도 어려워서요ㅠㅠ
• 자바스크립트 자체가 아직 좀 어려운데, 코드가 눈에 좀 더 쉽게보이고, 가독성있게 짜는 방법이 뭐가 있을까요?

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 유지보수를 고려한 개발
• 모듈화

[addiescode-sj]

코드가 어느시점에 언제 실행되는지 흐름을 예측하기 어렵고 추적도 힘든 문제가 보여요. 어떻게 고치면 이 문제를 개선해볼수있을까요?

우선 특정 조건에 따른 UI 업데이트 로직이 복잡하고 많아서 그런 특징이 생기는것같아요.
UI 업데이트를 위한 값을 모아서 관리할수있는 객체를 만들어볼까요?

// 상태 관리 객체
const loginState = {
  email: {
    value: '',
    isValid: false,
    errors: {
      empty: false,
      invalid: false
    }
  },
  password: {
    value: '',
    isValid: false,
    errors: {
      empty: false,
      invalid: false
    }
  },
  isPasswordVisible: false,
  isFormValid: false
};

[addiescode-sj]

위 예시와 같이 관련있는 코드끼리 모아놓으면, 응집도가 올라가 훨씬 명확한 구조를 가질 수 있게되고 유지보수하기도 쉬워질거예요.

그리고 아래와 같이 유효성 검사를 처리하는 함수와 상태 업데이트를 담당하는 함수, UI를 업데이트하는 함수를 개별적으로 만들어볼까요?

// 유효성 검사를 처리하는 함수
function validateForm() {
  // 이메일 검증
  const emailValue = emailInput.value.trim();
  loginState.email.errors.empty = emailValue === '';
  loginState.email.errors.invalid = !loginState.email.errors.empty && !isValidEmail(emailValue);
  loginState.email.isValid = !loginState.email.errors.empty && !loginState.email.errors.invalid;

  // 비밀번호 검증
  const passwordValue = passwordInput.value;
  loginState.password.errors.empty = passwordValue === '';
  loginState.password.errors.invalid = !loginState.password.errors.empty && passwordValue.length < 8;
  loginState.password.isValid = !loginState.password.errors.empty && !loginState.password.errors.invalid;

  // 전체 폼 유효성
  loginState.isFormValid = loginState.email.isValid && loginState.password.isValid;

  // UI 업데이트
  updateUI();
  
  return loginState.isFormValid;
}

// 상태 업데이트 함수
function updateState(field, value) {
  loginState[field].value = value;
  validateForm();
}

[addiescode-sj]

이렇게 각 함수가 하나의 일만 책임지는 형태로 (단일 책임 원칙) 수정되니까,
이런 장점들이 생길거예요.

• html 마크업 변경에 따른 함수 내부 로직 변경을 최소화 할 수 있습니다.
• 코드의 실행 흐름이 더 예측 가능한 형태로 바뀝니다 (유지보수 및 협업에 용이).
• 구조에 의해 더 명확하게 의도를 드러낼 수 있습니다 (유지보수 및 협업에 용이).

[addiescode-sj]

이 함수들도 지금처럼 너무 세부적인 단위로 작업을 쪼개기보다는,
toggleFormField와 같이 네이밍 바꾸고, 하나의 함수에서 UI 상태에 따른 UI 업데이트가 일어날수있게끔 인자와 함수 내부 구현 내용도 조금 맞춰서 바꿔보면 좋겠죠?

[addiescode-sj]

해당 파일에서도 비슷한 코드가 반복되고있는데, 재사용이 가능한 로직들은 모듈화하고 import받아서 사용해주면 코드가 훨씬 정리될수있겠죠? 이번 미션 구현사항은 아니지만 미리 참고해보시면 좋을것같아요 :)

참고

[addiescode-sj]

질문에 대한 답변

멘토에게

• 주석을 삭제해야하는데 깜빡했습니다 죄송해요 다음부터는 삭제하겠습니다!!
• button으로 서밋하고 전송만 되고 사이트 이동시키는 방법이 조금 어려워서 질문이 있습니다 저는 ./items items.html로 했는데 이렇게 하는 방법 말고 다른 방법이 있을까요? 찾아봐도 어려워서요ㅠㅠ
• 자바스크립트 자체가 아직 좀 어려운데, 코드가 눈에 좀 더 쉽게보이고, 가독성있게 짜는 방법이 뭐가 있을까요?

html css js만 사용하는 상황을 가정하다면
외부 웹사이트로 이동하게 만들고싶다면 window.location.href = 'https://www.example.com'; 이런식으로 외부 연결을 위한 window.location.href를 사용하시면됩니다.

다만 외부 웹사이트가 아니라 내부적으로 페이지를 바꿔주고싶은거면 기존에 쓰시던 방법을 사용하는게 가장 직관적이고, 커스텀 라우팅 모듈을 구현해서 window의 popState와 history 객체의 pushState를 사용해 내부 라우팅을 구축하셔도됩니다.

자바스크립트 사용 관련해서는 PR 본문 내에 자세히 피드백 드렸습니다~