[차경훈] sprint4

[maclovedany]

요구사항

기본

로그인

• 이메일 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 까지의 작업들을 codie template 으로 변경 후, 그에 기반하여 미션4 진행

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dongqui]

경훈님 오랜만에 미션 하시느냐고 수고 많으셨습니다 🤣

역시나 기본적인 js는 잘 활용해 주시네요! 코드 중복을 줄이고 구조화 시켜보시면 더욱 좋을 거 같습니다 :)

[dongqui]

공통된 부분은 파일을 따로 만들어 import 하시면 좋습니다 :)

[dongqui]

현대 브라우저는 모듈 환경을 제공하고 있어요!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

[maclovedany]

네 감사합니다! 해당 부분 잘 숙지하겠습니다!

[dongqui]

깔끔하게 함수를 잘 나눠주셨네요! 👍

[dongqui]

정규식을 사용해 주셨군요! 👍

[dongqui]

크게 문제 있는 코드는 아니지만, 로직이 숨겨지는 것은 조심하셔야 합니다!

validateEmail 함수 이름만 보면 버튼 상태를 변경하는 것을 알 수 없죠 :)

[maclovedany]

네 기능별로 함수 나눠서 설계하도록 노력하겠습니다.

[dongqui]

signupButton.disabled = !(isEmailValid && isNicknameValid && isPasswordValid && isPasswordConfirmationValid)

요렇게 표현할 수도 있겠네요~!

[dongqui]

<button disabled> 를 쓰셨다면 불필요한 거 같네요 :)

[dongqui]

data 속성 등을 이용해 구조화 해보시는 것도 좋습니다!

<img
    src="images/icons/eye-invisible.svg"
    alt="비밀번호 숨김"
    class="toggle-password"
    data-target="password"
  />
 <img
    src="images/icons/eye-invisible.svg"
    alt="비밀번호 숨김"
    class="toggle-password"
    data-target="passwordConfirmation"
  />

togglePasswordButtons.forEach((button) => {
  const inputId = button.dataset.target;
  const passwordField = document.getElementById(inputId);
  setupPasswordToggle(passwordField, button);
});

https://developer.mozilla.org/ko/docs/Web/HTML/How_to/Use_data_attributes

[maclovedany]

오! 네! 알겠습니다. 감사합니다!

[dongqui]

에러 UI를 추가하고 제거하는 로직이 계속 반복되는데, 해당 부분을 함수로 묶어보셔도 좋을 거 같네요 :)

function addErrorUI(id, message) {
  const input= document.getElementById(id);
  const error= document.getElementById(`${id}-error`);
  
  //...
}