[이형준]sprint4

[leehj322]

요구사항

기본 요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

체크리스트 (기본)

로그인

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

체크리스트 (심화)

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

피드백 반영

• misssion3 피드백 내용 없음

주요 변경사항

• sprint mission 4 요구사항 반영

사이트 배포 링크

• https://leehj322-codeit.netlify.app/

스크린샷

멘토에게

• JavaScript를 사용하여 코드를 처음 작성하였습니다. 모듈 분할을 어떤 기준으로 해야할지 잘 모르겠습니다.
• pw_visibility.js 에서 input태그를 타겟팅 하기 위해서 const input = img.parentElement.parentElement.firstElementChild;
  이렇게 작성 하였습니다. 다른 좋은 방법이 있을까요? 제가 생각할때는 html에 변경사항이 생기거나 하면 위와 같이 작성할때 문제가 될 것 같고, 그렇다고 id를 이용해서 요소를 찾아내기에는 비밀번호를 보이게 하는 것과 비밀번호 확인을 보이게 하는 것에 두개의 함수가 필요한 것 같습니다..
• main.js 에서 login page와 signup page의 요소가 달라서 없는 요소에 addEventListener를 이용하여 이벤트를 등록하는 경우 null값이 되어 에러가 발생했습니다. 그래서 if문을 이용해서 처리했는데 다른 좋은 방법이 있을까요?
• 부족하지만 잘 부탁 드립니다. 감사합니다!

[arthurkimdev]

JavaScript를 사용하여 코드를 처음 작성하였습니다. 모듈 분할을 어떤 기준으로 해야할지 잘 모르겠습니다.

-> 지금 만드신 구조에서는 pwInputCheck 함수처럼 valid 체크를 위한 유틸들을 별도 validation.js 와 같은 파일로 빼는 방법을 하면 좋을 것 같아요.

[arthurkimdev]

위 코드를 아래처럼 바꿀 수 있어요!

1. 동일하게 동작하는데, 중복코드를 줄일 수 있어요.
2. 유효성 검사 하는 함수를 별도로 분리해서 재사용성도 높일 수 있습니다.

/**
 * 로그인 버튼 유효성 검사
 * @returns {boolean}
 */
function isLoginButtonValid() {
  return emailIsValid && pwIsValid;
}

/**
 * 회원가입 버튼 유효성 검사
 * @returns {boolean}
 */
function isSignupButtonValid() {
  return emailIsValid && pwIsValid && nicknameIsValid && pwRetypeIsValid;
}

export function buttonDisableChecker(event) {
  if (loginButton) {
    loginButton.disabled = !isLoginButtonValid();
  }

  if (signupButton) {
    signupButton.disabled = !isSignupButtonValid();
  }
}

[arthurkimdev]

추가적으로 함수를 작성했을 때, 타입스크립트를 아직 사용하지 않다보니 아래처럼 JSDoc을 통해 주석을 추가해주시면 좋아요.

/**
 * 로그인 버튼 유효성 검사
 * @returns {boolean}
 */
function isLoginButtonValid() {
  return emailIsValid && pwIsValid;
}

관련 링크는 남겨놓을게요!
https://jsdoc.app/about-getting-started

[arthurkimdev]

이렇게 if 문 안에서 !== null 대신 truthy 값을 사용하여 조건을 단순화할수 있어요

if (signupButton) {
  signupButton.disabled = !isSignupButtonValid();
}

[arthurkimdev]

emailInputCheck 함수 외에도 아래에 있는 validation 역할을 해주는 함수들 중 중복 코드들이 보여요.

이를 해결하기 위해, classList.toggle 사용해서 가독성 있게 해결 해볼 수 있어요.

아래 방법을 nicknameInputCheck, pwInputCheck, pwRetypeInputCheck 함수에 똑같이 적용해주시면 됩니다.

/**
 * 에러 메시지 설정 및 클래스 토글 함수
 * @param {HTMLElement} target
 * @param {HTMLElement} errorMessage
 * @param {string} message
 * @param {boolean} isValid
 */
function setErrorMessage(target, errorMessage, message, isValid) {
  target.classList.toggle('error-input', !isValid);
  errorMessage.textContent = message;
}

export function emailInputCheck(event) {
  const target = event.target;
  const errorMessage = document.querySelector('#email-error-message');

  if (!target.value) {
    setErrorMessage(target, errorMessage, '이메일을 입력해주세요.', false);
    emailIsValid = false;
  } else if (!target.checkValidity()) {
    setErrorMessage(target, errorMessage, '잘못된 이메일 형식입니다.', false);
    emailIsValid = false;
  } else {
    setErrorMessage(target, errorMessage, '', true);
    emailIsValid = true;
  }
}

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

[arthurkimdev]

disabled 만 적어주셔도 됩니다! 기본 값이 true 이기 때문이에요~

[arthurkimdev]

pw_visibility.js 에서 input태그를 타겟팅 하기 위해서 const input = img.parentElement.parentElement.firstElementChild;
이렇게 작성 하였습니다. 다른 좋은 방법이 있을까요? 제가 생각할때는 html에 변경사항이 생기거나 하면 위와 같이 작성할때 문제가 될 것 같고, 그렇다고 id를 이용해서 요소를 찾아내기에는 비밀번호를 보이게 하는 것과 비밀번호 확인을 보이게 하는 것에 두개의 함수가 필요한 것 같습니다..

-> parentElement와 firstElementChild 사용보다는 각 요소들에 클래스를 통해 접근하는 방법이 좋습니다. 이렇게 진행하면 HTML 구조를 변경해도 유지보수에 이슈가 없을거에요. 예를들어 아래처럼 각 클래스를 추가를 하는게 좋아요.

<div class="password-container">
    <input type="password" id="password-input" class="password-input">
    <img src="/images/btn_visibility_off.png" class="visibility-toggle" alt="toggle visibility">
</div>

이후 closest() 메서드를 사용하여 관련된 부모 요소를 찾고, querySelector() 를 통해 입력 필드를 찾습니다. 이렇게 하면 HTML 구조가 변경되더라도 더 안정적인 접근이 가능합니다.

const input = img.closest('.password-container').querySelector('.password-input');

[arthurkimdev]

main.js 에서 login page와 signup page의 요소가 달라서 없는 요소에 addEventListener를 이용하여 이벤트를 등록하는 경우 null값이 되어 에러가 발생했습니다. 그래서 if문을 이용해서 처리했는데 다른 좋은 방법이 있을까요?

-> 아래처럼 요소 값 체크 하는 함수를 하나 만들어서 해당 함수로 랩핑하는 방법은 어떨까요?

/**
 * 요소가 존재할 경우 이벤트 리스너를 추가합니다.
 * @param {HTMLElement} element
 * @param {string} event
 * @param {function} handler
 */
function addEventListenerIfExists(element, event, handler) {
  if (element) {
    element.addEventListener(event, handler);
  }
}


...
addEventListenerIfExists(emailInput, 'focusout', emailInputCheck);
addEventListenerIfExists(pwInput, 'focusout', pwInputCheck);
...

[arthurkimdev]

과제 제출하시느라 수고 많으셨습니다 🙏